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. [Quote]Creating basic Excel workbook with Open XML

    Creating basic Excel workbook with Open XML [Quote from]http://www.codeproject.com/Articles/371203/C ...

  2. jsp分页技术

    1.以下为分页类: import java.io.Serializable;  import java.util.List;    import org.apache.commons.lang.bui ...

  3. Spring MVC 解读——@Autowired（转）

    转自:http://my.oschina.net/HeliosFly/blog/203902 Spring MVC 解读——@Autowired 一.@Autowired 作为一个Spring开发者对 ...

  4. 误导人的接口（interface）

    接口,interface,这个词语有误导之嫌.窃以为,这也是其名称与实际开发不符,造成难于直观理解和使用过程中产生困惑的根源.所谓名不正则言不顺:不怕生错命,最怕改坏名. 在现实生活中,接口通常是指将 ...

  5. OA请假流程 -- 编码

    OA请假流程 -- 编码 凡是内容不会发生变化的,都要写在xml配置文件中.需要定义如下内容: <process>标签 id英文命名 和 name 中文命名,然后只要与该流程相关的资源均以 ...

  6. js键盘控制DIV移动

    <style type="text/css"> html,body{overflow:hidden;}body{margin:0;padding:0;}pre{colo ...

  7. OpenStack Havana 部署在Ubuntu 12.04 Server 【OVS+GRE】（一）——控制节点的安装

      序:OpenStack Havana 部署在Ubuntu 12.04 Server [OVS+GRE] 控制节点: 1.准备Ubuntu 安装好Ubuntu12.04 server 64bits后 ...

  8. 初学scala1——Option

    Scala的Option[T]是容器对于给定的类型的零个或一个元件.Option[T]可完美替代Java中的null,可以是Some[T]或者None. 例如,Scala Map的get方法输出即为O ...

  9. String的成员方法的使用

    <%@ page language="java" contentType="text/html; charset=gbk"%> <html&g ...

  10. java传递json数据到前台jsp

    在数据传输流程中,json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键.例如: JSON字符串: var str1 = '{ &q ...