Междоменные проблемы, возникающие при рисовании холста

JavaScript 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('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>
При открытии этой страницы в браузере вы заметите эту проблему:
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('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>
Сравнив два приведенных выше фрагмента кода JS, вы обнаружите эту дополнительную строку:
image.setAttribute('crossorigin', 'anonymous');

Это простое и идеальное решение!


Категории