解锁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教程(4):网页边框和网页文字阴影
Apr 02 HTML / CSS
CSS3中几个新增加的盒模型属性使用教程
Mar 01 HTML / CSS
css3实现背景模糊的三种方式(小结)
May 15 HTML / CSS
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
Jun 01 HTML / CSS
详解rem 适配布局
Oct 31 HTML / CSS
详解通过变换矩阵实现canvas的缩放功能
Jan 14 HTML / CSS
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
Jan 09 HTML / CSS
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
Jan 31 HTML / CSS
利用HTML5画出一个坦克的形状具体实现代码
Jun 20 HTML / CSS
HTML5+CSS3应用详解
Feb 24 HTML / CSS
常用的HTML5列表标签
Jun 20 HTML / CSS
HTML5实现可缩放时钟代码
Aug 28 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
php计算到指定日期还有多少天的方法
2015/04/14 PHP
简单了解将WordPress中的工具栏移到底部的小技巧
2015/12/31 PHP
PHP获取路径和目录的方法总结【必看篇】
2017/03/04 PHP
thinkPHP+phpexcel实现excel报表输出功能示例
2017/06/06 PHP
php使用array_chunk函数将一个数组分割成多个数组
2018/12/05 PHP
javascript 读取图片文件的大小
2009/06/25 Javascript
Javascript实现的鼠标经过时播放声音
2010/05/18 Javascript
iframe里使用JavaScript控制主页转向的方法
2015/04/03 Javascript
JavaScript操作Cookie方法实例分析
2015/05/27 Javascript
javascript实现方法调用与方法触发小结
2016/03/26 Javascript
JavaScript用构造函数如何获取变量的类型名
2016/12/23 Javascript
微信小程序组件 marquee实例详解
2017/06/23 Javascript
浅谈node模块与npm包管理工具
2018/01/03 Javascript
vue使用vue-i18n实现国际化的实现代码
2018/04/08 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
2020/03/02 Javascript
[13:40]TI3青蛙君全程回顾 DOTA2我们为梦想再战
2013/09/13 DOTA
[00:12]2018DOTA2亚洲邀请赛 Sccc亮相SOLO赛,今年他又会有什么样的战绩?
2018/04/06 DOTA
Python编写Windows Service服务程序
2018/01/04 Python
Python+tkinter使用40行代码实现计算器功能
2018/01/30 Python
Tornado Web Server框架编写简易Python服务器
2018/07/28 Python
python的schedule定时任务模块二次封装方法
2019/02/19 Python
Django框架首页和登录页分离操作示例
2019/05/28 Python
python实现拼图小游戏
2020/02/22 Python
django美化后台django-suit的安装配置操作
2020/07/12 Python
Pycharm常用快捷键总结及配置方法
2020/11/14 Python
Antler英国官网:购买安特丽行李箱、拉杆箱
2019/08/25 全球购物
Charles&Keith美国官方网站:新加坡快时尚鞋类和配饰零售商
2019/11/27 全球购物
盖尔斯工厂店:GUESS Factory
2020/01/21 全球购物
技术副厂长岗位职责
2013/12/26 职场文书
大专学生求职信
2014/07/04 职场文书
火锅店的活动方案
2014/08/15 职场文书
大学生档案自我鉴定(2篇)
2014/10/14 职场文书
优秀教师个人总结
2015/02/11 职场文书
神农溪导游词
2015/02/11 职场文书
2016年教育局“我们的节日——端午节”主题活动总结
2016/04/01 职场文书
nginx对http请求处理的各个阶段详析
2021/03/31 Servers