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

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

解决方案1.

如果想使用toDataURL()生成图片文件的话，在canvas绘图过程中使用的图片应该是当前域下的。

解决方案2.

访问的服务器允许，资源跨域使用，也就是说设置了CORS跨域配置，Access-Control-Allow-Origin

然后在客户端访问图片资源的时候

var img = new Image();

img.setAttribute('crossOrigin', 'anonymous');

img.src = url;

实例说明：

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <meta charset="utf-8" />

    <link href="../scripts/Bootstrap-3.3.6/css/bootstrap.min.css" rel="stylesheet" />

    <script src="../scripts/jquery-1.11.3.min.js"></script>

    <script src="../scripts/Bootstrap-3.3.6/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

    <img src="http://www.gongjuji.net/favicon.ico"  crossorigin="anonymous"/>

    <canvas id="canvasOne" width="200" height="200"></canvas>

</div>

<script>

    /*

    * 将canvas图片转换成图片，上传到服务器

    */

    var canvas = document.getElementById('canvasOne');

    var ctx = canvas.getContext('2d');

    ctx.fillStyle = 'red';

    ctx.fillRect(0, 0, canvas.width, canvas.height);

    //添加外网图片

    var img = new Image();

    //设置图片跨域访问

    //img.setAttribute('crossOrigin', 'anonymous');

    img.onload = function () {

        //画图

        ctx.drawImage(img, 0, 0, img.width, img.height);

        var data = canvas.toDataURL('image/jpeg');

        alert(data);

    }

    //使用外网图片

    img.src = 'http://www.gongjuji.net/favicon.ico';

</script>

</body>

</html>

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.的更多相关文章

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

  2. exception:Failed to execute 'toDataURL' on 'HTMLCanvasElement' 解决方案

      1.情景展示 当使用canvas 将图片转为base64报错信息如下: Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLC ...

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

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

  4. 谷歌 Uncaught SecurityError: Failed to execute 'replaceState' on 'History 错误

    今天在用sui mobil做一个内联页面的时候遇到了这个问题. 然而这个问题只出现在chrome浏览器中,在火狐中没有一点问题. 他说明的是一个安全问题,chrome中有了新的安全机制

  5. Uncaught SecurityError: Failed to execute 'replaceState' on 'History': A history state object with

    stackoverflow上的的解决方法:Install a web server and load your HTML document from there.

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

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

  7. three.js_ "Failed to execute 'texImage2D' on 'WebGLRenderingContext': tainted canvases may not be loded."

    这个报错是请求图片跨域了. 1.当我们使用thee.js的时候肯定会碰到利用各种请求去向服务器请求贴图. 2.假设我们获取的是图片在服务器上的路径然后我们用 加载贴图到这里都是没有问题当我们在贴图加载 ...

  8. wordpress 点击文章图片 不能编辑（chrome下面） wordpress Uncaught DOMException: Failed to execute 'setBaseAndExtent' on 'Selection': There is no child at offset 1.

    说明:在chrome下面,编辑文章插入的图片,点击到图片上面,没有菜单显示. 报错: tinymce.min.js:10 Uncaught DOMException: Failed to execut ...

  9. 使用wpaint绘图软件时：Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.

    使用wpaint绘图软件时:Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': Th ...

随机推荐

  1. 【转载】利用jetty+Eclipse实现超轻量级web开发

    之前一直使用maven的jetty插件.今天换种方式. 使用下面介绍的方式你只有一个java project就行. 开发环境更简单,debug也更方便,不需要remote debug的方式,jetty ...

  2. Tomcat架构（四）

    8标准覆盖机制J2SE 1.4 and 1.5 都包含了一个XML处理解析器的Java API .Bootstrap 类加载器加载这个解析器的类文件,所以这个解析器会优先于任何一个安装在CLASSPA ...

  3. java 伪共享

    MESI协议及RFO请求典型的CPU微架构有3级缓存, 每个核都有自己私有的L1, L2缓存. 那么多线程编程时, 另外一个核的线程想要访问当前核内L1, L2 缓存行的数据, 该怎么办呢?有人说可以 ...

  4. touchend与click顺序

    http://www.w3cmm.com/javascript/touch.html click 在 touchend之前 去除超链接的虚线框 http://www.cnblogs.com/kingw ...

  5. 如何使用 Laravel Facades ？

    Facade 布局是在面向对象编程中经常使用的一种软件设计布局方式.Facade 实际上是一种包括复杂函数库的类,提供了更加简洁易读的接口.Facade 布局还能为一组结构复杂.设计简陋的 API 提 ...

  6. git reset到之前的某一个commit或者恢复之前删除的某一个分支

    一.使用了git reset之后,想要找回某一个commit 1.git log -g  这个命令只能显示少部分的commit 推荐使用git reflog 找到想要恢复的那个commit的hash, ...

  7. 【转】patch命令

    原文网址:http://bbs.chinaunix.net/thread-1945698-1-1.html patch给文件1应用补丁文件变成另外一个文件2(需要先用"diff 文件1 文件 ...

  8. scanf从文件中读入，printf写入到文件

    重定向方式读写文件 #include <stdio.h> #define LOCAL int main() { #ifdef LOCAL freopen("input.txt&q ...

  9. ubuntu 桌面

    u盘虚拟光驱打开.ios,读写到u盘 goagent:wine goagent.exe的路径:右键在终端中运行proxy.py. 终端中wine exe文件 ubuntu安装镜像文件: 下载压缩包解压 ...

  10. awk替换第几行第几列的值

    代码如下: awk '{if(2==NR){gsub(/.*/, 300, $5)}print}' list.txt 将文件list.txt的第2行第5列的值替换为300