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. libstdc++.so.5: cannot open shared object file: No such file or directory

    中文分词一般会选择ICTCLAS的模块,虽然不能说很完美,但也算是一个不错的选择.它提供了windows版本和linux版本,并支持C/C#/JNI接口.这本来是一个不错的事情,但版本一多,官方似乎就 ...

  2. WINDOWS下简单操作SQLITE3

    有测试操作的时候,还是很好的说~~~ 找个sqlite3.txt下载 sqlite3.exe db.sqlite3 SQLite version 3.7.13 2012-06-11 02:05:22 ...

  3. 【POJ2778】AC自动机+矩阵乘法

    DNA Sequence Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 14758 Accepted: 5716 Descrip ...

  4. 【POJ1113】Wall（凸包）

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

  5. 两次fopen不同的文件返回相同的FILE* 地址

    最近接触一个垃圾程序,出现一个奇怪的bug,现象是两次fopen不同的文件返回相同的FILE*地址,第二次返回的FILE*有时候无端端的就被关闭了.以下代码是对这个bug的概括: auto fp1 = ...

  6. 程序员欢呼：微软Bing开始支持搜索源码、可直接运行！

    日常生活中,程序员们经常会遇见这样那样的问题,比如忘记了代码该怎么写,又或者需要实现一些特殊的算法和功能.这时候,你就可以去找微软 Bing 帮忙啦! 微软最近联合 HackerRank 一起研发了一 ...

  7. IOS引用的静态库里包含category文件出现“unrecognized selector”的解决办法

    来自链接:http://blog.csdn.net/ccf0703/article/details/8279187 针对静态库工程中的Category,在被其他工程引入的时候,会出现selector ...

  8. 20个 Unix/Linux 命令技巧

    让我们用这些Unix/Linux命令技巧开启新的一年,提高在终端下的生产力.我已经找了很久了,现在就与你们分享. 删除一个大文件 我在生产服务器上有一个很大的200GB的日志文件需要删除.我的rm和l ...

  9. hdoj 1072 Nightmare

    Nightmare Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total S ...

  10. winform 子窗体数据改变刷新父窗体 分类： WinForm 2014-05-06 18:30 246人阅读 评论(0) 收藏

    两种方法实现: 第一种,传时间变量,主窗体要不停的刷新数据,占用资源比较大. 第二种,用this,感觉比较好用,建议用这种方法. 举例: 主窗体命名:FormA; 子窗体命名:FormB; 数据绑定方 ...