项目里使用到用canvas生成海报,在toDataURL报了这个错误Tainted canvases may not be exported。

原因就在于使用了跨域的图片,所以说是被污染的画布。
解决方案如下
1】为image请求添加跨域

var image = new Image()
image.setAttribute("crossOrigin",'Anonymous')
image.src = src

但也许有可能服务器不让你跨域请求图片(也不知道为啥),那么用到方案2
2】通过把请求的图片转化成base64再进行使用
代码如下

function getURLBase64(url) {
return new Promise((resolve, reject) => {
var xhr = new XMLHttpRequest()
xhr.open('get', url, true)
xhr.responseType = 'blob'
xhr.onload = function() {
if (this.status === 200) {
var blob = this.response
var fileReader = new FileReader()
fileReader.onloadend = function(e) {
var result = e.target.result
resolve(result)
}
fileReader.readAsDataURL(blob)
}
}
xhr.onerror = function() {
reject()
}
xhr.send()
})
}

Tainted canvases may not be exported的问题解决的更多相关文章

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

    canvas绘制图片,由于浏览器的安全考虑,如果在使用canvas绘图的过程中,使用到了外域的图片资源,那么在toDataURL()时会抛出安全异常: Uncaught SecurityError: ...

  2. he canvas has been tainted by cross-origin data and tainted canvases may not be exported

    来自: https://ourcodeworld.com/articles/read/182/the-canvas-has-been-tainted-by-cross-origin-data-and- ...

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

    Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may no ...

  4. three.js_ "Failed to execute 'texImage2D' on 'WebGLRenderingContext': tainted canvases may not be loded."

    这个报错是请求图片跨域了. 1.当我们使用thee.js的时候肯定会碰到利用各种请求去向服务器请求贴图. 2.假设我们获取的是图片在服务器上的路径然后我们用 加载贴图到这里都是没有问题当我们在贴图加载 ...

  5. js/jQuery使用过程中常见问题

    目录 一.jQuery选择器选择选中的或者disabled的选择框时attr函数无效 二.jQuery each函数的break/continue 三.jQuery 获取元素的left会值/left数 ...

  6. canvas toDataUrl 跨域问题

    使用canvas 的 toDataUrl方法会遇到跨域问题 chrome 会报下面的错误: Uncaught SecurityError: Failed to execute 'toDataURL' ...

  7. js实现html转pdf+html2canvas.js截图不全的问题

    最近做项目中遇到要把整个页面保存为PDF文件,网上找了一下实现的方法都是 html2canvas.js+jsPdf.js 来实现.实现的过程是 先用html2canvas.js把html页面转成图片, ...

  8. Canvas引入跨域的图片导致toDataURL()报错的问题的解决

    本文介绍了Canvas引入跨域的图片导致toDataURL()报错的问题的解决,分享给大家,具体如下: [场景] 用户打开网页,则请求腾讯COS(图片服务器)上的图片js代码.使用canvas绘图. ...

  9. js/jQuery使用过程中常见问题/已踩过的坑大杂烩

    目录 一.jQuery选择器选择选中的或者disabled的选择框时attr函数无效 二.jQuery each函数的break/continue 三.jQuery 获取元素的left会值/left数 ...

随机推荐

  1. 利用ajax 引入静态页公共的头部与底部

    利用ajax引入公共的头部与底部或者多个页面需要用到的重复的组件,对于新入门的前端来说是很实用的方法,自己也是新手菜鸟一枚,折腾了好久,实现的方法有很多种,这是我个人觉得比较简单方便的 首先得把公用的 ...

  2. chorme浏览器记住密码后input黄色背景处理方法总结(三种)

    问题分析 正常情况: 记住密码后访问: 解决方法 方法1:阴影覆盖input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px white ins ...

  3. 网络流媒体协议的联系与区别(RTP RTCP RTSP RTMP HLS)

    目录 网络流媒体协议的联系与区别(RTP RTCP RTSP RTMP HLS) 简结 RTP RTCP RTSP 区别与联系 RTSP.RTMP.HLS 区别与联系 关于直播 流媒体各协议层次图 基 ...

  4. C/C++ 手动开O2

    手动O2比赛不能用,平时玩玩就好 #pragma GCC optimize (2) #pragma G++ optimize (2)

  5. 广告行业中那些趣事系列6:BERT线上化ALBERT优化原理及项目实践(附github)

    摘要:BERT因为效果好和适用范围广两大优点,所以在NLP领域具有里程碑意义.实际项目中主要使用BERT来做文本分类任务,其实就是给文本打标签.因为原生态BERT预训练模型动辄几百兆甚至上千兆的大小, ...

  6. python之嵌套 闭包 装饰器 global、nonlocal关键字

    嵌套: 在函数的内部定义函数闭包: 符合开放封闭原则:在不修改源代码与调用方式的情况下为函数添加新功能  # global 将局部变量变成全局变量 num = 100 def fn1(): globa ...

  7. 如何优雅的把后台数据(通常是JSON)轻松渲染到html页面

    如何优雅的把后台数据(通常是JSON)轻松渲染到html页面 在我们做前后端分离的时候,都有遇到过一些看起卡很简答,确无从下手的问题把.比方说后台给了前端一个list集合,集合里面有很多学生,我们现在 ...

  8. url参数格式化

    getQueryBbj = (url)=>{ let urlData = url.split("?")[1]; let queryArr = urlData.split('& ...

  9. js数组方法全

    js数组方法大全 一:前言          转载   作者:九夏       出处:https://www.cnblogs.com/jiuxia/ 我们在学到js中数组的时候,我们会接触到js中数组 ...

  10. Java中将文件夹复制到另一个文件夹

    文件夹的拷贝*** public static void copyDir(String sourcePath, String newPath) { File start = new File(sour ...