Home >Web Front-end >H5 Tutorial >How to solve cross-domain problems encountered when drawing on canvas

How to solve cross-domain problems encountered when drawing on canvas

不言Original: 2018-06-14 11:25:334017browse

This article mainly introduces relevant information that explains in detail the cross-domain problems encountered when drawing canvas. The content is quite good. I will share it with you now and give it as a reference.

When drawing an external link image in canvas, we will encounter a cross-domain problem.

The example is as follows:

<!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>

When you open this page in the browser, you will find this problem:

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

This is limited by the CORS policy and there will be cross-domain problems, although it can be used Image, but drawing it to the canvas will pollute the canvas. Once a canvas is polluted, the data of the canvas cannot be extracted. For example, the canvas toBlob(), toDataURL(), or getImageData() methods cannot be used; when using these methods, it will The above security error is thrown

This is a distressing problem, but fortunately img has added the crossorigin attribute. This attribute determines whether the CORS function is enabled during the image acquisition process:

<!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>

Comparing the above two pieces of JS code, you will find this extra line:

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

It’s that simple, Perfect solution!

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

About the properties of canvas lines

##How to use canvas to achieve image mosaic

The above is the detailed content of How to solve cross-domain problems encountered when drawing on canvas. For more information, please follow other related articles on the PHP Chinese website!

php JS canvas

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use canvas to implement image mosaicNext article：How to use canvas to implement image mosaic

See more

How to solve cross-domain problems encountered when drawing on canvas

Related articles