解锁canvas导出图片跨域的N种姿势小结


Posted in HTML / CSS onJanuary 24, 2019

本文介绍了解锁canvas导出图片跨域的N种姿势小结,分享给大家,具体如下:

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

上面这个错误相信大家用canvas执行 toDataUrl导出图片的时候都遇到过,图片服务器域名和当前不一样,因为安全策略不允许跨域导出图片

解决这个跨越问题方式有多种

一 、将图片转换成base64

图片变成base64就没有域名一说了,自然不存在跨域

注意:图片转换成base64加增加图片文件大小,如果图片比较大,不建议转换base64,否则会增加网页加载时间,影响网站速度,这种方式一般适用于小图

二、 图片服务器设置允许跨域

即请求图片返回的响应头中带有Access-Control-Allow-Origin切值为 *(允许所有网站跨域请求)或者当前网站域名(只允许固定域名下跨域请求), 然后前端在加载图片是设置图片跨域属性img.crossOrigin="anonymous"。具体代码如下

var canvas = document.getElementById('myCanvas')
  var ctx = canvas.getContext('2d')
  var img = document.createElement('img')
  img.crossOrigin="anonymous"
  img.src = 'https://p4-q.mafengwo.net/s12/M00/CA/3B/wKgED1w8fL6ADk16AAXyDaz2bdU61.jpeg'
  img.onload = function() {
    ctx.drawImage(img,0,0,500,300);
    console.log(canvas.toDataURL())
  }

这样前后结合跨域问题便迎刃而解

三、把图片放到当前域名下

原谅我不厚道的笑了,这的确是一种可以解决问题。

BUT 实际项目中图片一般都存储在cdn上,所以这种方式不太现实???

图片变成base64就没有域名一说了,自然不存在跨域

四、当图片服务没法设置跨域响应头时

确实有这种情况,比如获取第三方网站的头像,比如微信头像,然后前端动态生成新的图片,微信头像图片不允许跨域导出,怎么办??? 上面的几种方式都不好使

这种情况需要后端协助了,后端做一层转发,服务端获取头像,转换成base64返回前端,或者存储到本地允许跨域的服务器上,生产一个新的图片链接,返回给前端,这个时候结合方法一或者方法二,跨域问题也自然解决

如果你用的htmlToCanvas插件导出图片的话,则需要添加useCORS: true配置项,原理跟方法二一样,当然前置条件是图片域名允许跨域

至此我所知道的N中方式介绍完毕了,欢迎补充

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

HTML / CSS 相关文章推荐
使用CSS3实现字体颜色渐变的实现
Mar 09 HTML / CSS
CSS3实现翘边的阴影效果的代码示例
Jun 13 HTML / CSS
CSS3 边框效果
Nov 04 HTML / CSS
通过css3的filter滤镜改变png图片的颜色的示例代码
May 06 HTML / CSS
前端canvas动画如何转成mp4视频的方法
Jun 17 HTML / CSS
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
Jan 30 HTML / CSS
HTML5添加禁止缩放功能
Nov 03 HTML / CSS
Canvas绘制浮动球效果的示例
Dec 29 HTML / CSS
HTML5 常见面试题之PC端和移动端区别介绍
Jan 22 HTML / CSS
html5 冒号分隔符对齐的实现
Jul 31 HTML / CSS
html+js 实现markdown编辑器效果
Oct 23 HTML / CSS
AmazeUI 输入框组的示例代码
Aug 14 HTML / CSS
详解canvas绘制多张图的排列顺序问题
Jan 21 #HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
Jan 18 #HTML / CSS
canvas绘制圆角头像的实现方法
Jan 17 #HTML / CSS
HTML5如何使用SVG的方法示例
Jan 11 #HTML / CSS
Canvas 像素处理之改变透明度的实现代码
Jan 08 #HTML / CSS
详解Canvas实用库Fabric.js使用手册
Jan 07 #HTML / CSS
Html5原创俄罗斯方块(基于canvas)
Jan 07 #HTML / CSS
You might like
Zend studio for eclipse中使php可以调用mysql相关函数的设置方法
2008/10/13 PHP
PHP的autoload机制的实现解析
2012/09/15 PHP
PHP把数字转成人民币大写的函数分享
2014/06/30 PHP
javascript 节点排序 2
2011/01/31 Javascript
JS实现QQ图片一闪一闪的效果小例子
2013/07/31 Javascript
extjs表格文本启用选择复制功能具体实现
2013/10/11 Javascript
javascript实现信息的显示和隐藏如注册页面
2013/12/03 Javascript
AngularJS基础学习笔记之表达式
2015/05/10 Javascript
jquery实现滑动特效代码
2015/08/10 Javascript
jquery+css实现的红色线条横向二级菜单效果
2015/08/22 Javascript
JS只能输入正整数的简单实例
2016/10/07 Javascript
bootstrap多种样式进度条展示
2016/12/20 Javascript
Angular的MVC和作用域
2016/12/26 Javascript
用js制作淘宝放大镜效果
2020/10/28 Javascript
jquery实现轮播图效果
2017/02/13 Javascript
javascript算法之二叉搜索树的示例代码
2017/09/12 Javascript
Vue组件之Tooltip的示例代码
2017/10/18 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
2018/09/26 Javascript
小程序如何使用分包加载的实现方法
2019/05/22 Javascript
Python使用函数默认值实现函数静态变量的方法
2014/08/18 Python
Python获取当前页面内所有链接的四种方法对比分析
2017/08/19 Python
Python实现感知机(PLA)算法
2017/12/20 Python
python机器学习之KNN分类算法
2018/08/29 Python
10分钟教你用Python实现微信自动回复功能
2018/11/28 Python
Python中zip()函数的解释和可视化(实例详解)
2020/02/16 Python
Python AutoCAD 系统设置的实现方法
2020/04/01 Python
Python基于opencv的简单图像轮廓形状识别(全网最简单最少代码)
2021/01/28 Python
做一个能自适应高度的textarea的示例代码
2019/09/06 HTML / CSS
民族团结先进个人材料
2014/02/05 职场文书
违反校纪校规检讨书
2014/02/15 职场文书
大学生社会实践自我鉴定
2014/03/24 职场文书
网络妈妈观后感
2015/06/08 职场文书
2016大学生优秀志愿者事迹材料
2016/02/25 职场文书
教你用Python写一个植物大战僵尸小游戏
2021/04/25 Python
「女孩的钓鱼慢活」全新版权绘公布
2022/03/21 日漫
MyBatis在注解上使用动态SQL方式(@select使用if)
2022/07/07 Java/Android