如何解決使用canvas繪圖時(shí)遇到的跨域問(wèn)題

發(fā)布時(shí)間：2021-05-28 14:12:54 來(lái)源：億速云閱讀：675 作者：小新欄目：web開(kāi)發(fā)

這篇文章主要介紹了如何解決使用canvas繪圖時(shí)遇到的跨域問(wèn)題，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

當(dāng)在canvas中繪制一張外鏈圖片時(shí)，我們會(huì)遇到一個(gè)跨域問(wèn)題。

示例如下：

<!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('canvas');
        var ctx = canvas.getContext('2d');
        var image = new Image();
        image.onload = function() {
            ctx.drawImage(image, 0, 0);
            document.getElementById('image').src = canvas.toDataURL('image/png');
        };
        image.src = 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3497300994,2503543630&fm=27&gp=0.jpg';
    </script>
</body>

當(dāng)在瀏覽器中打開(kāi)這個(gè)頁(yè)面時(shí)，你會(huì)發(fā)現(xiàn)這個(gè)問(wèn)題：

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

這是受限于 CORS 策略，會(huì)存在跨域問(wèn)題，雖然可以使用圖像，但是繪制到畫(huà)布上會(huì)污染畫(huà)布，一旦一個(gè)畫(huà)布被污染,就無(wú)法提取畫(huà)布的數(shù)據(jù)，比如無(wú)法使用使用畫(huà)布toBlob(),toDataURL(),或getImageData()方法；當(dāng)使用這些方法的時(shí)候會(huì)拋出上面的安全錯(cuò)誤

這是一個(gè)苦惱的問(wèn)題，但幸運(yùn)的是img新增了crossorigin屬性，這個(gè)屬性決定了圖片獲取過(guò)程中是否開(kāi)啟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('canvas');
        var ctx = canvas.getContext('2d');
        var image = new Image();
        image.setAttribute('crossorigin', 'anonymous');
        image.onload = function() {
            ctx.drawImage(image, 0, 0);
            document.getElementById('image').src = canvas.toDataURL('image/png');
        };
        image.src = 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3497300994,2503543630&fm=27&gp=0.jpg';
    </script>
</body>

對(duì)比上面兩段JS代碼，你會(huì)發(fā)現(xiàn)多了這一行：

image.setAttribute('crossorigin', 'anonymous');

就是這么簡(jiǎn)單，完美的解決了!

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“如何解決使用canvas繪圖時(shí)遇到的跨域問(wèn)題”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

向AI問(wèn)一下細(xì)節(jié)

如何解決使用canvas繪圖時(shí)遇到的跨域問(wèn)題

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽