解锁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结构性伪类选择器九种写法
Apr 18 HTML / CSS
CSS3制作半透明边框(Facebox)类似渐变
Dec 09 HTML / CSS
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
Jan 06 HTML / CSS
css3进行截取替代js的substring
Sep 02 HTML / CSS
css3实现input输入框颜色渐变发光效果代码
Apr 02 HTML / CSS
使用CSS3来代替JS实现交互
Aug 10 HTML / CSS
移动端适配 使px自动转换rem
Aug 26 HTML / CSS
css3实现圆锥渐变conic-gradient效果
Feb 12 HTML / CSS
HTML5在canvas中绘制复杂形状附效果截图
Jun 23 HTML / CSS
Html5移动端div固定到底部实现底部导航条的几种方式
Mar 09 HTML / CSS
CSS实现单选折叠菜单功能
Nov 01 HTML / CSS
css样式important规则的正确使用方式
Jun 10 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
Syphon 使用方法
2021/03/03 冲泡冲煮
destoon在360浏览器下出现用户被强行注销的解决方法
2014/06/26 PHP
php+ajax实时刷新简单实例
2015/02/25 PHP
基于JQuery+PHP编写砸金蛋中奖程序
2015/09/08 PHP
thinkPHP下ueditor的使用方法详解
2015/12/26 PHP
PHP里面把16进制的图片数据显示在html的img标签上(实现方法)
2017/05/02 PHP
JavaScript 节点操作 以及DOMDocument属性和方法
2007/12/06 Javascript
Javascript 网页黑白效果实现代码(兼容IE/FF等)
2010/04/23 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
2014/06/30 Javascript
jquery实现图片按比例缩放示例
2014/07/01 Javascript
使用js画图之正弦曲线
2015/01/12 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
2016/04/01 Javascript
深入理解Vue 的钩子函数
2018/09/05 Javascript
NodeJs实现简单的爬虫功能案例分析
2018/12/05 NodeJs
jQuery AJAX与jQuery事件的分析讲解
2019/02/18 jQuery
vue3 源码解读之 time slicing的使用方法
2019/10/31 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
2020/03/14 Javascript
[02:16]DOTA2英雄基础教程 干扰者
2014/01/15 DOTA
[01:08]2014DOTA2展望TI 剑指西雅图LGD战队专访
2014/06/30 DOTA
[01:06:26]全国守擂赛第二周 Team Coach vs DeMonsTer
2020/04/28 DOTA
python socket网络编程之粘包问题详解
2018/04/28 Python
python 统计列表中不同元素的数量方法
2018/06/29 Python
Python基于多线程实现ping扫描功能示例
2018/07/23 Python
ML神器:sklearn的快速使用及入门
2019/07/11 Python
python pygame实现滚动横版射击游戏城市之战
2019/11/25 Python
Python任务调度模块APScheduler使用
2020/04/15 Python
PyQt中使用QtSql连接MySql数据库的方法
2020/07/28 Python
微软开源最强Python自动化神器Playwright(不用写一行代码)
2021/01/05 Python
JAKO-O德国野酷台湾站:德国首屈一指的婴幼童用品品牌
2019/01/14 全球购物
Dr. Martens马汀博士法国官网:马丁靴鼻祖
2020/01/15 全球购物
迟到检讨书500字
2014/02/05 职场文书
元旦促销方案
2014/03/15 职场文书
工作作风建设心得体会
2014/10/22 职场文书
公司庆典欢迎词
2015/01/26 职场文书
限期整改通知书
2015/04/22 职场文书
win10如何快速切换窗口 win10切换窗口快捷键分享
2022/07/23 数码科技