Tainted canvases may not be exported的问题解决
项目里使用到用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的问题解决的更多相关文章
- Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
canvas绘制图片,由于浏览器的安全考虑,如果在使用canvas绘图的过程中,使用到了外域的图片资源,那么在toDataURL()时会抛出安全异常: Uncaught SecurityError: ...
- 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- ...
- 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 ...
- three.js_ "Failed to execute 'texImage2D' on 'WebGLRenderingContext': tainted canvases may not be loded."
这个报错是请求图片跨域了. 1.当我们使用thee.js的时候肯定会碰到利用各种请求去向服务器请求贴图. 2.假设我们获取的是图片在服务器上的路径然后我们用 加载贴图到这里都是没有问题当我们在贴图加载 ...
- js/jQuery使用过程中常见问题
目录 一.jQuery选择器选择选中的或者disabled的选择框时attr函数无效 二.jQuery each函数的break/continue 三.jQuery 获取元素的left会值/left数 ...
- canvas toDataUrl 跨域问题
使用canvas 的 toDataUrl方法会遇到跨域问题 chrome 会报下面的错误: Uncaught SecurityError: Failed to execute 'toDataURL' ...
- js实现html转pdf+html2canvas.js截图不全的问题
最近做项目中遇到要把整个页面保存为PDF文件,网上找了一下实现的方法都是 html2canvas.js+jsPdf.js 来实现.实现的过程是 先用html2canvas.js把html页面转成图片, ...
- Canvas引入跨域的图片导致toDataURL()报错的问题的解决
本文介绍了Canvas引入跨域的图片导致toDataURL()报错的问题的解决,分享给大家,具体如下: [场景] 用户打开网页,则请求腾讯COS(图片服务器)上的图片js代码.使用canvas绘图. ...
- js/jQuery使用过程中常见问题/已踩过的坑大杂烩
目录 一.jQuery选择器选择选中的或者disabled的选择框时attr函数无效 二.jQuery each函数的break/continue 三.jQuery 获取元素的left会值/left数 ...
随机推荐
- OAuth 流程与发展总结 (1.0 => 1.0a => 2.0)
OAuth 流程与发展 (1.0 => 1.0a => 2.0) 概述 概述: 开放授权协议 作用: 允许第三方应用访问服务提供方中注册的终端用户的部分资源 下面是官方描述: [OAuth ...
- Windows下利用virtualenvwrapper指定python版本创建虚拟环境
默认已安装virtualenvwrapper 一.添加环境变量(可选) 在系统环境变量中添加 WORKON_HOME ,用来指定新建的虚拟环境的存储位置,如过未添加,默认位置为 %USERPROFIL ...
- webpack知识锦集(一)
ebpack是一个javascript应用吃那个程序的静态模块打包器(module bundler).处理时候会递归构建一个依赖关系图,包含每个模块,将模块打包成一个或者多个bundle. 核心概念: ...
- 日常破解--从XCTF的app3题目简单了解安卓备份文件以及sqliteCipher加密数据库
一.题目来源 题目来源:XCTF app3题目 二.解题过程 1.下载好题目,下载完后发现是.ab后缀名的文件,如下图所示: 2.什么是.ab文件?.ab后缀名的文件是Andr ...
- Excel之在单元格中生成随机密码
公式 =CHAR(INT(RAND()*26+97))&INT(RAND()*10)&CHAR(INT(RAND()*26+97))&INT(RAND()*10) 分析 CHA ...
- drf认证组件(介绍)、权限组件(介绍)、jwt认证、签发、jwt框架使用
目录 一.注册接口 urls.py views.py serializers.py 二.登录接口 三.用户中心接口(权限校验) urls.py views.py serializers.py 四.图书 ...
- Spring注解 - 生命周期、属性赋值、自动装配
一.Bean的生命周期 流程 Bean创建 -- 初始化 -- 销毁 创建: 单实例:在容器启动时创建对象 多实例:每次调用时创建对象 初始化: 都是在对象创建完成后,调用初始化方法 销毁: 单实例: ...
- Flask 之分析线程和协程
目录 flask之分析线程和协程 01 思考:每个请求之间的关系 02 threading.local 03 通过字典自定义threading.local 04 通过setattr和getattr实现 ...
- File判断功能(新手)
//导入的一个类.import java.io.File;/* File判断功能*///创建的一个类.public class zylx3 { //公共静态的主方法. public static vo ...
- php 调用curl_init失败
当你在开发微信公众号,微信小程序的时候,往往会遇到困难 进入服务器,输入 tail -f /var/log/apache2/error.log 看看apache2的日志 就因为php 的curl扩展没 ...