如何解决canvas绘图时遇到的跨域问题

PHP中文网 JavaScript 百度已收录

本文摘自PHP中文网，作者不言，侵删。

这篇文章主要介绍了详解canvas绘图时遇到的跨域问题的相关资料,内容挺不错的，现在分享给大家，也给大家做个参考。

当在canvas中绘制一张外链图片时，我们会遇到一个跨域问题。

示例如下：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<!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功能：

阅读剩余部分

相关阅读 >>

基于 html5 canvas 的 3d 渲染引擎界面以及吸附等效果的运用

canvas原生实现前端网页移动端签名

怎么用canvas压缩图片

canvas 学习 3---画坐标系

用javascript将canvas内容转化成图片的方法详解

canvas像素点操作之视频绿幕抠图

canvas制作旋转太极的动画

借助todataurl实现将html5 canvas的内容保存为图片

html5 canvas的事件处理介绍

html5 canvas画布的宽高为什么写在<canvas>标签里的详细介绍

更多相关阅读请进入《canvas》频道 >>




标签：

打赏

取消

感谢您的支持，我会继续努力的!

扫码支持
扫码打赏，您说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

分享从这里开始，精彩与您同在

相关推荐

评论

管理员已关闭评论功能...