全国服务热线:4008-888-888

技术知识

详解canvas制图时遇到的跨域难题

当在canvas中绘图1张外链照片时,大家会遇到1个跨域难题。

示比如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <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 对策,会存在跨域难题,尽管可使用图象,可是绘图到画布上会污染画布,1旦1个画布被污染,就没法提取画布的数据信息,例如没法应用应用画布toBlob(),toDataURL(),或getImageData()方式;当应用这些方式的情况下 会抛出上面的安全性不正确

这是1个苦恼的难题,但好运的是img新增了crossorigin特性,这个特性决策了照片获得全过程中是不是打开CORS作用:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <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编码,你会发现多了这1行:

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

便是这么简易,完善的处理了!

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服