详解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将文字描边及填充文字颜色的方法
Mar 07 HTML / CSS
CSS3的新特性介绍
Oct 31 HTML / CSS
CSS3教程(7):CSS3嵌入字体
Apr 02 HTML / CSS
CSS3 特效范例整理
Aug 22 HTML / CSS
检测浏览器是否支持html5视频的代码
Mar 28 HTML / CSS
HTML5学习笔记之html5与传统html区别
Jan 06 HTML / CSS
HTML5+css3:3D旋转木马效果相册
Jan 03 HTML / CSS
详解HTML5 录音的踩坑之旅
Dec 26 HTML / CSS
详解canvas绘图时遇到的跨域问题
Mar 22 HTML / CSS
z-index不起作用
Mar 31 HTML / CSS
css3带你实现3D转换效果
Feb 24 HTML / CSS
CSS中实现动画效果-附案例
Feb 28 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 开源框架22个简单简介
2009/08/24 PHP
php数组函数序列之array_pop() - 删除数组中的最后一个元素
2011/11/07 PHP
PHP使用curl模拟post上传及接收文件的方法
2016/03/04 PHP
Yii实现Command任务处理的方法详解
2016/07/14 PHP
javascript事件模型代码
2007/07/01 Javascript
javascript 跳转代码集合
2009/12/03 Javascript
Json对象与Json字符串互转(4种转换方式)
2013/03/27 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
2014/03/14 Javascript
JS模式之单例模式基本用法
2015/06/30 Javascript
基于jQuery实现的QQ表情插件
2015/08/25 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
2016/12/16 Javascript
jQuery中ajax获取数据赋值给页面的实例
2017/12/31 jQuery
微信小程序视图容器(swiper)组件创建轮播图
2020/06/19 Javascript
layui radio单选限制下一个radio单选的实例
2019/09/03 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
2020/04/11 Javascript
node运行js获得输出的三种方式示例详解
2020/07/02 Javascript
[01:01:42]Secret vs Optic Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
Python中用于转换字母为小写的lower()方法使用简介
2015/05/19 Python
python将秒数转化为时间格式的实例
2018/09/16 Python
python通过paramiko复制远程文件及文件目录到本地
2019/04/30 Python
Django多数据库的实现过程详解
2019/08/01 Python
Python imageio读取视频并进行编解码详解
2019/12/10 Python
Python模块的制作方法实例分析
2019/12/21 Python
pytorch实现线性拟合方式
2020/01/15 Python
python数据库操作mysql:pymysql、sqlalchemy常见用法详解
2020/03/30 Python
python实现Oracle查询分组的方法示例
2020/04/30 Python
基于django micro搭建网站实现加水印功能
2020/05/22 Python
python 根据列表批量下载网易云音乐的免费音乐
2020/12/03 Python
canvas 下载二维码和图片加水印的方法
2018/03/21 HTML / CSS
Alba Moda德国网上商店:意大利时尚女装销售
2016/11/14 全球购物
公共汽车、火车和飞机票的通用在线预订和销售平台:INFOBUS
2019/11/30 全球购物
美国最大最全的亚洲购物网站:美国亚米网(Yamibuy)
2020/05/05 全球购物
秘书专业自荐信范文
2013/12/26 职场文书
给男朋友的道歉短信
2015/05/12 职场文书
MySQL 自定义变量的概念及特点
2021/05/13 MySQL
python实现会员管理系统
2022/03/18 Python