项目里使用到用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. java快速开发平台可视化开发表单

    XJR java快速开发平台,简单的理解就是:开发人员以某种编程语言或者某几种编程语言(比如:目前流行的多种web技术,包括springboot, JPA,Druid, Activiti,Lombok ...

  2. Apple App签名机制

    概览 数字签名 签名机制与验证过程 操作流程 数字签名 摘要算法 将任意长度文本通过一个算法得到一个固定长度的文本. 源文本不同,计算结果必然不同 无法从结果反推源 例如,MD5和SHA算法 非对称加 ...

  3. 进阶之路 | 奇妙的Handler之旅

    前言 本文已经收录到我的Github个人博客,欢迎大佬们光临寒舍: 我的GIthub博客 需要已经具备的知识: Handler的基本概念及使用 学习导图: 一.为什么要学习Handler? 在Andr ...

  4. 自己查与写的批量比较bash

    前言:互测的时候一个一个输入感觉太麻烦,于是尝试写自己的对拍,又想到os刚学了bash命令行处理,于是想把两者结合一下减轻自己的工作量 分两步: 将所有人的工程导出成jar文件 放到linux下用ba ...

  5. 【OO第三次课下讨论】农场主的饲料分配问题

    需求分析与项目设计   本思考题的设计需求是力图找到一个简单且可行的饲料分配方案,由于不涉及到饲料价格或者是营养均衡之类的优化问题,因此在假设总的饲料量必能满足所有动物的热量需求的前提下,我们只需要采 ...

  6. Feign 注解翻译器 三

    一.自定义注解翻译器 (1)JAXRS 注解翻译器实例 ① 导入JAXRS所需要的jar包 <dependency> <groupId>io.github.openfeign& ...

  7. vue的子组件不能进行router的切换

    在用vue开发过程中,偶然一次使用在子组件中进行router的切换,发现不起作用,后来才反应过来,子组件只是一个组件,vue的路由的切换只能是在父组件(也就是真正的页面)里面进行跳转!

  8. 手机抓包app在python中使用

    使用python+airtesr+无线模式控制手机 官方文档中,在airtest.readthedocs.io/zh_CN/lates…有一段介绍如何连接安卓手机的例子: 但是这个线接模板,无线模式的 ...

  9. Spyder——科学的Python开发环境

    刚开始接触Python的时候,网上找到的资料基本上上来就是介绍Python语言,很少有对开发环境进行讲解的,但如果在学习的过程中不断练习,这样效率会更高,所以特意将一个Python的开发环境Spyde ...

  10. *fetch(_, { call, put }) { --- generator

    effects: { *fetch(_, { call, put }) { const response = yield call(queryUsers); yield put({ type: 'sa ...