exception:Failed to execute 'toDataURL' on 'HTMLCanvasElement' 解决方案
1.情景展示
当使用canvas 将图片转为base64报错信息如下:
Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported

2.解决方案
第一种情况:本地测试&图片引自本地
通过file协议打开的html文件进行的本地测试


解决方案:放在服务器上就可以正常转换了!
第二种情况:被转换的图片,引自网络或者服务器

解决方案:
第一步:被引的图片需添加属性"crossOrigin",值为"Anonymous"。

第二步:存放图片地址的服务器也要开启跨域允许权限。
不然会报错:No 'Access-Control-Allow-Origin' header is present on the requested resource.
如Apache设置:
打开LoadModule headers_module modules/mod_headers.so
在虚拟主机<Directory></Directory>内加上 Header set Access-Control-Allow-Origin *
exception:Failed to execute 'toDataURL' on 'HTMLCanvasElement' 解决方案的更多相关文章
- Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
canvas绘制图片,由于浏览器的安全考虑,如果在使用canvas绘图的过程中,使用到了外域的图片资源,那么在toDataURL()时会抛出安全异常: Uncaught SecurityError: ...
- 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 ...
- Failed to execute 'toDataURL' on 'HTMLCanvasElement,在canvas.toDataURL()执行时候报错解决方案
添加跨域条件 crossorigin="anonymous" [Redirect at origin 'http://xxx.xx.com' has been blocked ...
- 解决 canvas 将图片转为base64报错: Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasEleme...
问题描述 当用户点击分享按钮时,生成一张海报,可以保存图片分享到朋友圈,用户的图片是存储在阿里云的OSS,当海报完成后,执行.canvas.toDataURL("image/png" ...
- three.js:Failed to execute 'texImage2D' on 'WebGLRenderingContext解决方案
three.js加载图片时,出现Failed to execute 'texImage2D' on 'WebGLRenderingContext .Tainted canvases may not b ...
- Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.1:compile (default-compile) 解决方案
1.命令行用maven编译项目失败,提示 Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.1:compi ...
- xhprof查看性能测试图一直报错:failed to execute cmd: " dot -Tpng"多种因素解决方案
xhprof查看性能测试图一直报错:failed to execute cmd: ” dot -Tpng”多种因素解决方案最近在新环境进行php代码性能测试,用了xhprof这个工具,搭建好以后,点击 ...
- 使用Selenium时解决方案: Exception: Failed to find firefox binary. You can set it by specifying the ······
问题描述: Firefox在自动升级之后,在使用selenium的时候出现了如下错误: Exception: Failed to find firefox binary. You can set it ...
- Maven打包时报Failed to execute goal org.apache.maven.plugins:maven-war-plugin:解决方案
问题现象: 用Maven打包时,报Failed to execute goal org.apache.maven.plugins:maven-war-plugin:2.2:war错误. 原因分析: 打 ...
随机推荐
- 000 Security的计划
可重用的,企业级的,认证和授权模块 1.主要涉及的模块 2.最终的目标 3.开发的项目模块结构
- instance of的java用法
http://blog.csdn.net/liranke/article/details/5574791
- Java中菜单的实现以及画实线与画虚线之间的自由转化
1.Java画线 1 import java.awt.Color; import java.awt.Container; import java.awt.Graphics; import java.a ...
- css3流动布局
-webkit-box-ordinal-group: 2;1...布局优先显示 display: -webkit-box;盒子 -webkit-box-orient:horizontal;显示方式 - ...
- 使用Chrome浏览器设置XX-net的方法
以下介绍使用Chrome浏览器设置XX-net的方法 1.下载并安装谷歌浏览器. 2.打开https://github.com/XX-net/XX-Net/blob/master/code/d ...
- codeforces 1058D.Vasya and Triangle (gcd)
<题目链接> <转载于 >>> > 题目大意: 给出n.m.k.求一个三角形使它的面积等于n*m/k 并且这个三角形的三个顶点所在的坐标为整数点,且顶点满 ...
- 【CRM】Microsoft CRM-QueryExpression 成员
名称 ColumnSet 获取或设置要包含的列. Criteria 获取或设置过滤查询结果的复杂条件和逻辑过滤器表达式. Distinct 获取或设置查询的结果是否包含重复的实体实例. Entit ...
- SpringBoot使用缓存
前言 我们都知道,一个程序的瓶颈通常都在数据库,很多场景需要获取相同的数据.比如网站页面数据等,需要一次次的请求数据库,导致大部分时间都浪费在数据库查询和方法调用上,这时就可以利用到缓存来缓解这个问题 ...
- 实现左边div固定宽度,右边div自适应撑满剩下的宽度的布局方式:
html: <div class="container"> <div class="left"> left固定宽度200px </ ...
- [Win] Win8权限机制导致R安装包失败
在Rstudio安装tidyselect的时候,提示 ERROR: compilation failed for package ‘tidyselect’ 搜了一下,在github上找到tidysel ...