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. sql 的一些总结

    如果用到“每”  就要用到group  by   例:每个部门有多少人,就要用到分组技术 聚合函数一般作用在多条记录上 having 是分组厚的筛选条件,分组厚的数据组内再筛选,where 则是在分组 ...

  2. Python 枚举 enum

    Python 枚举 enum enum 标准模块在 3.4 版本才可以使用,3.3 以下版本需要独立安装:https://pypi.python.org/pypi/enum34#downloads,官 ...

  3. mysql group by组内排序

    mysql group by组内排序:     首先是组外排序:     SELECT z.create_time,z.invoice_id from qf_invoice_log z where z ...

  4. Ajax技术使用补充

    Ajax技术使用补充 一.Ajax发送数据的几种形式 发送字符串或数字 $.ajax({ url:"/ajax_test.html/", type:'POST', data:{'v ...

  5. Rabbit的机器人-二分答案

    Rabbit的机器人 思路 : 可以 推知 挡板的位置与最后 一步的方向有关 .如果是 R 根据题目要求那么最终结果一定是在>0的位置, 因为按照题意要求的最终不能回到重复走过的位置.所以如果有 ...

  6. pandas 基本操作

    1.     一维数据结构Series a.   概念:Series 是pandas 的一维数据结构,有重要的两个属性 index 和values b.  初始化: 可以通过 python 的 Lis ...

  7. GPIOLED配置、key、中断NVIC配置

    #include "stm32f10x.h" #include "stm32f10x_gpio.h" //内核,(NVIC) #include "mi ...

  8. [CC-INVENTRY]Arranging the Inventory

    [CC-INVENTRY]Arranging the Inventory 题目大意: 有一排长度为\(n(\sum n\le10^6)\)的格子,有些格子是空的,有些格子上有一个箱子. 现在你要用最小 ...

  9. CY7C68013 USB接口相机开发记录 - 第一天:资料下载

    一直觉得从头开发一套东西出来会极大的提升自己的自信心,能够最大化的开发自己的潜能.所以在犹豫很久之后决定学习下CY7C68013 USB接口相机的开发. 通过在网上查找多份资料后,觉得工欲善其事必先利 ...

  10. [P2058][NOIP2015]海港 (模拟)

    %%%ADMAN #include<cstdio> using namespace std; int n,tot,now,ans,h; ],k[],a[],sum[]; int main( ...