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. 065 updateStateByKey的函数API

    一:使用场景 1.应用场景 数据的累加 一段时间内的数据的累加 2.说明 每个批次都输出自己批次的数据, 这个时候,可以使用这个API,使得他们之间产生联系. 3.说明2 在累加器的时候,起到的效果和 ...

  2. SpringMVC-1-(简介及HelloWord)

    首先我们来看一下servlet的处理请求的方式: 一:SpringMVC简介: 一)SpringMVC中的几个重要组件 1.DispatchServlet: 前端控制器,mvc模式中的c,是整个流程的 ...

  3. scrapy 命令行创建 启动 跟踪

    不是python文件中的,而是在虚拟机中运行的命令行,先要workon进入虚拟环境 2.scrapy 框架的使用 -1.新建项目 命令:scrapy startproject <project_ ...

  4. Idea中快捷键与小技巧的总结-->持续更新

    1.Scala类或单例对象中快速声明实例对象: eg. new SparkContext(conf).var 系统会自动提示,可以自动补全,如图: 2.ctrl+i与ctrl+o的区别: ctrl + ...

  5. NSL:CPK_NN神经网络实现预测哪个样本与哪个样本处在同一层,从而科学规避我国煤矿突水灾难—Jason niu

    load water_data.mat attributes = mapminmax(attributes); P_train = attributes(:,1:35); T_train = clas ...

  6. BroadcastReceiver工作原理

    --摘自<android插件化开发指南> 1.动态注册过程是注册Receiver并通知AMS,发送内容包括IntentFilter.一个实现了IIntentReceiver接口的Binde ...

  7. POJ 3122 Pie【二分答案】

    <题目链接> 题目大意: 将n个半径不一但是高度为1的蛋糕分给 F+1个人,每个人分得蛋糕的体积应当相同,并且需要注意的是,每个人分得的整块蛋糕都只能从一个蛋糕上切下来,而不是从几个蛋糕上 ...

  8. mybatis查询语句的背后之参数解析

    转载请注明出处... 一.前言 通过前面我们也知道,通过getMapper方式来进行查询,最后会通过mapperMehod类,对接口中传来的参数也会在这个类里面进行一个解析,随后就传到对应位置,与sq ...

  9. XamarinSQLite教程添加索引

    XamarinSQLite教程添加索引 索引可以提升数据库表的查询速度.下面为已存在的表添加索引,操作步骤如下: (1)右击Students,选择Add index…(beta)命令,弹出Add In ...

  10. Spark 常见问题集合

    一.Spark 为什么比 MapReduce 要高效? 举一个例子: select a.state,count(*),AVERAGE(c.price) from a join b on (a.id=b ...