详解canvas绘图时遇到的跨域问题


Posted in HTML / CSS onMarch 22, 2018

当在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');

就是这么简单,完美的解决了!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
如何用css3实现switch组件开关的方法
Feb 09 HTML / CSS
css3利用transform变形结合事件完成扇形导航
Oct 26 HTML / CSS
html5使用html2canvas实现浏览器截图的示例
Aug 31 HTML / CSS
HTML5 WebGL 实现民航客机飞行监控系统
Jul 25 HTML / CSS
Canvas 文本转粒子效果的实现代码
Feb 14 HTML / CSS
HTML5 标准将把互联网视频扔回到黑暗时代
Feb 10 HTML / CSS
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
Jan 09 HTML / CSS
a标签下载链接的简单实现
Sep 13 HTML / CSS
可能这些是你想要的H5软键盘兼容方案(小结)
Apr 23 HTML / CSS
使用html5实现表格实现标题合并的实例代码
May 13 HTML / CSS
html5中嵌入视频自动播放的问题解决
May 25 HTML / CSS
css3 文字断裂效果
Apr 22 HTML / CSS
canvas 下载二维码和图片加水印的方法
Mar 21 #HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
Mar 21 #HTML / CSS
html5调用app分享功能示例(WebViewJavascriptBridge)
Mar 21 #HTML / CSS
浅谈html5与APP混合开发遇到的问题总结
Mar 20 #HTML / CSS
在canvas上实现元素图片镜像翻转动画效果的方法
Mar 20 #HTML / CSS
HTML5 新表单类型示例代码
Mar 20 #HTML / CSS
浅谈基于Canvas的手绘风格图形库Rough.js
Mar 19 #HTML / CSS
You might like
php中file_exists函数使用详解
2015/05/08 PHP
php实现小程序支付完整版
2018/10/09 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
PHP基于array_unique实现二维数组去重
2020/07/14 PHP
NodeJS 模块开发及发布详解分享
2012/03/07 NodeJs
jQuery如何实现点击页面获得当前点击元素的id或其他信息
2014/01/09 Javascript
JQuery遍历json数组的3种方法
2014/11/08 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
2015/10/21 Javascript
AngularJS入门教程之ng-class 指令用法
2016/08/01 Javascript
JS获取鼠标相对位置的方法
2016/09/20 Javascript
探究Vue.js 2.0新增的虚拟DOM
2016/10/20 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
2017/01/19 Javascript
JS日程管理插件FullCalendar简单实例
2017/02/07 Javascript
js 输入框 正则表达式(菜鸟必看教程)
2017/02/19 Javascript
浅谈ECMAScript6新特性之let、const
2017/08/02 Javascript
浅谈node.js 命令行工具(cli)
2018/05/10 Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
2018/10/09 Javascript
Vue使用screenfull实现全屏效果
2020/09/17 Javascript
[08:44]DOTA2发布会群星聚首 我们都是刀塔人
2014/03/21 DOTA
[48:53]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第一场
2014/05/26 DOTA
Python中的并发编程实例
2014/07/07 Python
python回调函数用法实例分析
2015/05/09 Python
python比较两个列表是否相等的方法
2015/07/28 Python
Python读取word文本操作详解
2018/01/22 Python
用python与文件进行交互的方法
2018/03/01 Python
Python绘制堆叠柱状图的实例
2019/07/09 Python
Python 操作 ElasticSearch的完整代码
2019/08/04 Python
配置python的编程环境之Anaconda + VSCode的教程
2020/03/29 Python
python函数中将变量名转换成字符串实例
2020/05/11 Python
Python通过递归函数输出嵌套列表元素
2020/10/15 Python
详解CSS3的perspective属性设置3D变换距离的方法
2016/05/23 HTML / CSS
HTML5地理定位实例
2014/10/15 HTML / CSS
优质美利奴羊毛袜,不只是徒步旅行:Darn Tough Vermont
2018/11/05 全球购物
Internet体系结构
2014/12/21 面试题
社区健康教育实施方案
2014/03/18 职场文书
村级环境卫生整治方案
2014/05/04 职场文书