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. C/C++中的内存对齐 C/C++中的内存对齐

    一.什么是内存对齐.为什么需要内存对齐? 现代计算机中内存空间都是按照byte划分的,从理论上讲似乎对任何类型的变量的访问可以从任何地址开始,但实际情况是在访问特定类型变量的时候经常在特 定的内存地址 ...

  2. onchange事件

    一.onchange 一般input type text的onchange事件的触发需要两个条件:1.输入框的值发生了改变:2.该文本框失去了焦点,而真正的事件的触发却是发生在该文本框失去焦点的时候, ...

  3. Technology Trader

    zoj2071:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=2071 题意:题意一些零件,每一个零件会有一个花费,然后用这 ...

  4. 当用DJANGO的migrate不成功时。。。。

    URL:http://my.oschina.net/u/862582/blog/355421 因为操作SQL数据库时不规范,或是多人开发时产生了同步问题,就可能导致正规的MIGRATE时不能完成. 已 ...

  5. 【POJ1113】Wall（凸包）

    [题目] Description Once upon a time there was a greedy King who ordered his chief Architect to build a ...

  6. Delphi实现HTMLWebBrowser实现HTML界面

    HTML的界面有以下特点:图文混排,格式灵活,可以包含Flash.声音和视频等,实现图文声像的多媒体界面,而且易于建立和维护.另外,HTML的显示环境一般机器上都具备,通常不需要安装额外的软件.当然, ...

  7. To enable integrated Windows authentication in Windows Vista/IIS 7

    https://msdn.microsoft.com/en-us/library/x8a5axew.aspx Log on to the Web server by using an administ ...

  8. 支付宝APP支付Java回调具体步骤

    /** * 支付宝异步请求通知 * * @param request * @return */@RequestMapping(value = "async", method = R ...

  9. 窥探Unity5渲染内部之解析UnityShaderVariables.cginc

    unity5的UnityShaderVariables.cginc比unity4大了1kb这里装着unity shader 大部分内部参数,写这个方便以后自己查询 Camera参数 uniform f ...

  10. 【转】VS 代码行数统计

    [转自]http://www.cnblogs.com/JuneZhang/archive/2013/01/10/2854572.html VS用正则表达式统计代码行数 利用VS2010的查找功能和正则 ...