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. 20165319 《JAVA程序设计》第一周学习总结

    教材内容学习总结 1.了解了基础的JAVA历史 2.学会了JDK的安装 3.学会了JAVA的基本应用 git的学习以及代码相关 1.学会了git在Windows系统上的安装以及linux系统的安装 2 ...

  2. bind注意事项(传引用参数的时候)

    默认情况下,bind的那些不是占位符的参数被拷贝到bind返回的可调用对象中. 当需要把对象传到bind中的参数中时,需要使用ref或者cref. 例如: #include<iostream&g ...

  3. mybatis提示Invalid bound statement (not found)错误的可能原因

    https://www.cnblogs.com/liaojie970/p/8034525.html

  4. BeanFactory和FactoryBean的区别

    转自:http://blog.csdn.net/wangbiao007/article/details/53183764 1.BeanFactory BeanFactory是IOC最基本的容器,负责生 ...

  5. Unable to load configuration. - action - file:/F:/apache-tomcat-8.0.30/webapps/test1Struts2/WEB-INF/classes/struts.xml:11:71

    Unable to load configuration. - action - file:/F:/apache-tomcat-8.0.30/webapps/test1Struts2/WEB-INF/ ...

  6. 完全背包-hdu1114

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1114 题目描述: 代码实现: #include<cstdio> #include<i ...

  7. Springboot定时任务原理及如何动态创建定时任务

    一.前言 上周工作遇到了一个需求,同步多个省份销号数据,解绑微信粉丝.分省定时将销号数据放到SFTP服务器上,我需要开发定时任务去解析文件.因为是多省份,服务器.文件名规则.数据规则都不一定,所以要做 ...

  8. LR逻辑回归文章

    http://blog.csdn.net/suipingsp/article/details/41822313

  9. AE 模板 素材 视频 科技 公安

    3d立体现代城市模型背景视频素材视频素材下载__熊猫办公 1080p 科技高速公路汽车奔驰背景视频视频素材下载__熊猫办公 高科技hud全息元素素材ae视频素材下载__熊猫办公 渲染输出,Adobe ...

  10. 在UnrealEngine中用Custom节点实现描边效果

    在<Real Time Rendering, third edition>一书中,作者把描边算法分成了5种类型.1.基于观察角度与表面法线的轮廓渲染.缺点很明显.2.过程式几何轮廓渲染.即 ...