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' 解决方案的更多相关文章

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

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

  2. 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 ...

  3. Failed to execute 'toDataURL' on 'HTMLCanvasElement,在canvas.toDataURL()执行时候报错解决方案

    添加跨域条件   crossorigin="anonymous" [Redirect at origin 'http://xxx.xx.com' has been blocked ...

  4. 解决 canvas 将图片转为base64报错: Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasEleme...

    问题描述 当用户点击分享按钮时,生成一张海报,可以保存图片分享到朋友圈,用户的图片是存储在阿里云的OSS,当海报完成后,执行.canvas.toDataURL("image/png" ...

  5. three.js:Failed to execute 'texImage2D' on 'WebGLRenderingContext解决方案

    three.js加载图片时,出现Failed to execute 'texImage2D' on 'WebGLRenderingContext .Tainted canvases may not b ...

  6. 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 ...

  7. xhprof查看性能测试图一直报错:failed to execute cmd: " dot -Tpng"多种因素解决方案

    xhprof查看性能测试图一直报错:failed to execute cmd: ” dot -Tpng”多种因素解决方案最近在新环境进行php代码性能测试,用了xhprof这个工具,搭建好以后,点击 ...

  8. 使用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 ...

  9. 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错误. 原因分析: 打 ...

随机推荐

  1. 给定两个字符串 s 和 t,它们只包含小写字母。 字符串 t 由字符串 s 随机重排,然后在随机位置添加一个字母。 请找出在 t 中被添加的字母。

    给定两个字符串 s 和 t,它们只包含小写字母.字符串 t 由字符串 s 随机重排,然后在随机位置添加一个字母.请找出在 t 中被添加的字母. 示例: 输入: s = "abcd" ...

  2. TFTP Server的搭建和使用(Fedora)

    一.tftp服务的安装 yum install xinetd tftp tftp-server 表示我安装的已经是最新版本的tftp服务了,不用更新了. 二.配置tftp服务的相关参数(没有就创建新的 ...

  3. 使用 PySide2 开发 Maya 插件系列一:QT Designer 设计GUI, pyside-uic 把 .ui 文件转为 .py 文件

    使用 PySide2 开发 Maya 插件系列一:QT Designer 设计GUI, pyside-uic 把 .ui 文件转为 .py 文件 前期准备: 安装 python:https://www ...

  4. linux同步Internet时间

    输入ntpdate time.nist.gov同步网络时间 如果未安装:yum install ntpdate 结果:3 Jun 15:42:39 ntpdate[4721]: adjust time ...

  5. thinkphp5 model 模型

    新增更新都是save.saveAll  怎么识别他们 实例化模型后调用save方法表示新增: 查询数据后调用save方法表示更新: save方法传入更新条件后表示更新: isUpdate(true): ...

  6. Sunscreen POJ - 3614(贪心)

    To avoid unsightly burns while tanning, each of the C (1 ≤ C ≤ 2500) cows must cover her hide with s ...

  7. Get与Post方法的区别

    Http协议定义了很多与服务器交互的方法,最基本的有4种,分别是GET,POST,PUT,DELETE. 一个URL地址用于描述一个网络上的资源,而HTTP中的GET, POST, PUT, DELE ...

  8. HDU 4553 约会安排 (区间合并)【线段树】

    <题目链接> 寒假来了,又到了小明和女神们约会的季节.  小明虽为屌丝级码农,但非常活跃,女神们常常在小明网上的大段发言后热情回复“呵呵”,所以,小明的最爱就是和女神们约会.与此同时,也有 ...

  9. config-toolkit之config-face

    config-toolkit是当当网开发的开源项目,使用起来非常的方便.对于很多配置都可以写在配置中心中,进行配置数据的获取,这样我们可以不用把很多信息写在了代码里面,例如数据库账号密码等信息. co ...

  10. AspectJ 切面注解中五种通知注解:@Before、@After、@AfterRunning、@AfterThrowing、@Around

    https://blog.csdn.net/u010502101/article/details/78823056