详解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 三维变形实现立体方块特效源码
Dec 15 HTML / CSS
支持IE8的纯css3开发的响应式设计动画菜单教程
Nov 05 HTML / CSS
CSS3 3D旋转rotate效果实例介绍
May 03 HTML / CSS
移动端Web页面的CSS3 flex布局快速上手指南
May 31 HTML / CSS
关于HTML5你必须知道的28个新特性,新技巧以及新技术
May 28 HTML / CSS
HTML5是什么 HTML5是什么意思 HTML5简介
Oct 26 HTML / CSS
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
Apr 08 HTML / CSS
HTML5 3D书本翻页动画的实现示例
Aug 28 HTML / CSS
3种方式实现瀑布流布局小结
Sep 05 HTML / CSS
html5 datalist 选中option选项后的触发事件
Mar 05 HTML / CSS
Amaze UI 文件选择域的示例代码
Aug 26 HTML / CSS
HTML5拖拽文件上传的示例代码
Mar 04 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
防止MySQL注入或HTML表单滥用的PHP程序
2009/01/21 PHP
ThinkPHP水印功能实现修复PNG透明水印并增加JPEG图片质量可调整
2014/11/05 PHP
php实现复制移动文件的方法
2015/07/29 PHP
PHP实现的统计数据功能详解
2016/12/06 PHP
thinkPHP引入类的方法详解
2016/12/08 PHP
完美解决Thinkphp3.2中插入相同数据的问题
2017/08/01 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
2011/11/14 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
2014/04/08 Javascript
javascript常见用法总结
2014/05/22 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
2015/08/22 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
2016/05/15 Javascript
深入解析JavaScript中的arguments对象
2016/06/12 Javascript
AngularJS入门教程之双向绑定详解
2016/08/18 Javascript
Vue 按键修饰符处理事件的方法
2018/05/04 Javascript
node上的redis调用优化示例详解
2018/10/30 Javascript
OpenLayers实现图层切换控件
2020/09/25 Javascript
[02:17]DOTA2亚洲邀请赛 RAVE战队出场宣传片
2015/02/07 DOTA
python去除空格和换行符的实现方法(推荐)
2017/01/04 Python
利用Python在一个文件的头部插入数据的实例
2018/05/02 Python
Python实现去除列表中重复元素的方法总结【7种方法】
2019/02/16 Python
python增加图像对比度的方法
2019/07/12 Python
python2使用bs4爬取腾讯社招过程解析
2019/08/14 Python
学点简单的Django之第一个Django程序的实现
2021/02/24 Python
英国鞋网:Rubber Sole
2020/03/03 全球购物
将"引用"作为函数返回值类型的格式、好处和需要遵守的规则
2016/02/09 面试题
大学生军训自我评价分享
2013/11/09 职场文书
中学教师管理制度
2014/01/14 职场文书
致长跑运动员广播稿
2014/01/31 职场文书
个人作风剖析材料
2014/02/02 职场文书
授权委托书怎么写
2014/04/03 职场文书
大学共青团员个人自我评价
2014/04/16 职场文书
井冈山红色之旅心得体会
2014/10/07 职场文书
西双版纳导游词
2015/02/03 职场文书
科级干部培训心得体会
2016/01/06 职场文书
九大龙王魂骨,山龙王留下躯干骨,榜首死的最憋屈(被捏碎)
2022/03/18 国漫