详解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 相关文章推荐
详解CSS的border边框属性及其在CSS3中的新特性
May 10 HTML / CSS
css3动画效果小结(推荐)
Jul 25 HTML / CSS
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
Dec 29 HTML / CSS
CSS3 实现穿梭星空动画
Nov 13 HTML / CSS
如何让IE9以下版本(ie6/7/8)认识html5元素
Apr 01 HTML / CSS
在canvas上实现元素图片镜像翻转动画效果的方法
Mar 20 HTML / CSS
Html5 滚动穿透的方法
May 13 HTML / CSS
iframe跨域的几种常用方法
Nov 11 HTML / CSS
amazeui页面分析之登录页面的示例代码
Aug 25 HTML / CSS
CSS变量实现主题切换的方法
Jun 23 HTML / CSS
HTML常用标签超详细整理
Mar 19 HTML / CSS
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
Dec 24 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
wordpress之wp-settings.php
2007/08/17 PHP
PHP编程中的__clone()方法使用详解
2015/11/27 PHP
php mailer类调用远程SMTP服务器发送邮件实现方法
2016/03/04 PHP
用PHP将Unicode 转化为UTF-8的实现方法(推荐)
2017/02/08 PHP
使用jquery为table动态添加行的实现代码
2011/03/30 Javascript
js去空格技巧分别去字符串前后、左右空格
2013/10/21 Javascript
js判断undefined类型示例代码
2014/02/10 Javascript
javascript委托(Delegate)blur和focus用法实例分析
2015/05/26 Javascript
Jquery实现瀑布流布局(备有详细注释)
2015/07/31 Javascript
移动端日期插件Mobiscroll.js使用详解
2016/12/19 Javascript
nodejs入门教程四:URL相关模块用法分析
2017/04/24 NodeJs
实例教学如何写vue插件
2017/11/30 Javascript
Vue和React组件之间的传值方式详解
2019/01/31 Javascript
微信小程序框架的页面布局代码
2019/08/17 Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
2019/08/29 Javascript
使用 Element UI Table 的 slot-scope方法
2019/10/10 Javascript
js实现简单音乐播放器
2020/06/30 Javascript
python基于xml parse实现解析cdatasection数据
2014/09/30 Python
Python栈算法的实现与简单应用示例
2017/11/01 Python
python修改list中所有元素类型的三种方法
2018/04/09 Python
python实现输入任意一个大写字母生成金字塔的示例
2019/10/27 Python
Python抓新型冠状病毒肺炎疫情数据并绘制全国疫情分布的代码实例
2020/02/05 Python
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
2016/12/06 HTML / CSS
Quiksilver美国官网:始于1969年的优质冲浪服和滑雪板外套
2020/04/20 全球购物
交通专业个人自荐信格式
2013/09/23 职场文书
聚美优品陈欧广告词
2014/03/14 职场文书
省级优秀毕业生主要事迹
2014/05/29 职场文书
室内设计专业自荐信
2014/05/31 职场文书
大学新闻系求职信
2014/06/03 职场文书
社区矫正工作方案
2014/06/04 职场文书
2015年小学生新年寄语
2014/12/08 职场文书
幼儿园六一主持词开场白
2015/05/28 职场文书
宣传部部长竞选稿
2015/11/21 职场文书
《梅花魂》教学反思
2016/02/18 职场文书
浅谈spring boot使用thymeleaf版本的问题
2021/08/04 Java/Android
python神经网络学习 使用Keras进行回归运算
2022/05/04 Python