首頁 > 文章 > web前端 > 如何解決canvas繪圖時遇到的跨域問題

如何解決canvas繪圖時遇到的跨域問題

不言原創: 2018-06-14 11:25:333921瀏覽

這篇文章主要介紹了詳解canvas繪圖時遇到的跨域問題的相關資料,內容挺不錯的，現在分享給大家，也給大家做個參考。

當在canvas中繪製一張外鏈圖片時，我們會遇到一個跨域問題。

範例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>crossorigin</title>
</head>
<body>
    <canvas width="600" height="300" id="canvas"></canvas>
    <img id="image" alt="">
    <script>
        var canvas = document.getElementById(&#39;canvas&#39;);
        var ctx = canvas.getContext(&#39;2d&#39;);
        var image = new Image();
        image.onload = function() {
            ctx.drawImage(image, 0, 0);
            document.getElementById(&#39;image&#39;).src = canvas.toDataURL(&#39;image/png&#39;);
        };
        image.src = &#39;https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3497300994,2503543630&fm=27&gp=0.jpg&#39;;
    </script>
</body>

當在瀏覽器中開啟這個頁面時，你會發現這個問題：

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

這是受限於CORS 策略，會存在跨域問題，雖然可以使用圖像，但是繪製到畫布上會污染畫布，一旦一個畫布被污染,就無法提取畫布的數據，例如無法使用使用畫布toBlob(),toDataURL(),或getImageData()方法；當使用這些方法的時候會拋出上面的安全錯誤

這是一個苦惱的問題，但幸運的是img新增了crossorigin屬性，這個屬性決定了圖片取得過程中是否開啟CORS功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>crossorigin</title>
</head>
<body>
    <canvas width="600" height="300" id="canvas"></canvas>
    <img id="image" alt="">
    <script>
        var canvas = document.getElementById(&#39;canvas&#39;);
        var ctx = canvas.getContext(&#39;2d&#39;);
        var image = new Image();
        image.setAttribute(&#39;crossorigin&#39;, &#39;anonymous&#39;);
        image.onload = function() {
            ctx.drawImage(image, 0, 0);
            document.getElementById(&#39;image&#39;).src = canvas.toDataURL(&#39;image/png&#39;);
        };
        image.src = &#39;https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3497300994,2503543630&fm=27&gp=0.jpg&#39;;
    </script>
</body>

比較上面兩段JS程式碼，你會發現多了這一行：

image.setAttribute(&#39;crossorigin&#39;, &#39;anonymous&#39;);

就是這麼簡單，完美的解決了!

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

如何解決canvas繪圖時遇到的跨域問題

相關文章