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

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

解决方案1.

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

解决方案2.

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

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

  1. var img = new Image();
  2. img.setAttribute('crossOrigin', 'anonymous');
  3. img.src = url;

实例说明：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title></title>
  6.     <meta charset="utf-8" />
  7.     <link href="../scripts/Bootstrap-3.3.6/css/bootstrap.min.css" rel="stylesheet" />
  8.     <script src="../scripts/jquery-1.11.3.min.js"></script>
  9.     <script src="../scripts/Bootstrap-3.3.6/js/bootstrap.min.js"></script>
  10. </head>
  11. <body>
  12. <div class="container">
  13.     <img src="http://www.gongjuji.net/favicon.ico"  crossorigin="anonymous"/>
  14.     <canvas id="canvasOne" width="200" height="200"></canvas>
  15. </div>
  16. <script>
  17.     /*
  18.     * 将canvas图片转换成图片，上传到服务器
  19.     */
  20.     var canvas = document.getElementById('canvasOne');
  21.     var ctx = canvas.getContext('2d');
  22.     ctx.fillStyle = 'red';
  23.     ctx.fillRect(0, 0, canvas.width, canvas.height);
  24.     //添加外网图片
  25.     var img = new Image();
  26.     //设置图片跨域访问
  27.     //img.setAttribute('crossOrigin', 'anonymous');
  28.     img.onload = function () {
  29.         //画图
  30.         ctx.drawImage(img, 0, 0, img.width, img.height);
  31.         var data = canvas.toDataURL('image/jpeg');
  32.         alert(data);
  33.     }
  34.     //使用外网图片
  35.     img.src = 'http://www.gongjuji.net/favicon.ico';
  36. </script>
  37. </body>
  38. </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. xcode 环境，多工程联编设置【转】

    http://blog.csdn.net/vienna_zj/article/details/8467522 一.xcode4中的环境变量 $(BUILT_PRODUCTS_DIR) build成功后 ...

  2. RedHat 6.5 离线安装 apache2.4.23

    第一部分:安装gcc等 rpm -ivh mpfr-2.4.1-6.el6.x86_64.rpm rpm -ivh ppl-0.10.2-11.el6.x86_64.rpm rpm -ivh cpp- ...

  3. 【 UVALive - 2197】Paint the Roads（上下界费用流）

    Description In a country there are n cities connected by m one way roads. You can paint any of these ...

  4. 同样版本的jstl,都是jstl1.2版本，有个有问题，另一个没有问题

    问题是这样的,最近部署一个项目,发现每次访问首页的时候老是报如下的错误: org.springframework.web.util.NestedServletException: Handler pr ...

  5. 使用javascript获取网址的各个参数

    有时也挺无奈的,为了实现一个功能,不得不用到前台获取参数.幸亏,有javascript,不然真的是坑大发了,感谢javascript的创造者.开始show大图: 属性    值href:完整的 URL ...

  6. hadoop-2.0.0-cdh4.2.1源码编译总结

    经过一个星期多的努力,这两个包的编译工作总算告一段落. 首先看一下这一篇文章: 在eclipse下编译hadoop2.0源码 http://www.cnblogs.com/meibenjin/arch ...

  7. Linux下USB烧写uImage kernel

    Linux下USB烧写uImage kernel   1.启动开发板,进入u-boot:(如果开发板中没有系统,可以通过用SD卡方式启动开发板进入)   U-Boot 2011.06 (Mar 19 ...

  8. 这次GDC China 2015的总结与关卡设计教程的梳理

    去年关卡教程总结链接:听了GDC2014关于关卡设计的讲座的总结与自己的理解 24 号去了GDC china听了讲座,没有听unity没有听VR,听了一天关卡教程,和上次的关卡教程还是有区别的,这次的 ...

  9. leetcode72. Edit Distance

    Given two words word1 and word2, find the minimum number of steps required to convert word1 to word2 ...

  10. kickstartInstalls