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. 深入了解一下PYTHON中关于SOCKETSERVER的模块-D

    在LINUX上以FORK的方式使用SIMPLEHTTPSERVER. 记得哟,THREADING能在WIN和LINUX上实现,但FORK,不支持WIN的. 除了SIMPLE之外,还有CGI,就不示例啦 ...

  2. 【UVA11324】The Largest Clique （SCC）

    题意: 给一张有向图G,求一个结点数最大的结点集,使得该结点中任意两个结点 u 和 v满足:要么 u 可以到达 v, 要么 v 可以到达 u(u 和 v 相互可达也可以). 分析: Tarjan求SC ...

  3. [topcoder]CoinReversing

    http://community.topcoder.com/stat?c=problem_statement&pm=11473&rd=14543 简单的概率题.那道题想了想就出来了.每 ...

  4. Reverse Linked List 递归非递归实现

    单链表反转--递归非递归实现 Java接口: ListNode reverseList(ListNode head) 非递归的实现 有2种,参考 头结点插入法 就地反转 递归的实现 1) Divide ...

  5. c++复习基础要点02 虚函数与模板 与static inline是否共存

    1.      虚函数能否定义为模板函数 当一个类有虚函数时,它一定有一个虚表,用来纪录每个虚函数的实际地址.这也就是说这个虚表的大小是在编译期就确定了的.有多少个虚函数,虚表就纪录几个.       ...

  6. 利用rowid更新单表

    SQL> create table test1(id int,name char(10)); Table created. begin for i in 1 .. 1000000 loop in ...

  7. （转载）mysql书籍

    (转载)http://blog.csdn.net/symdfbb/article/details/7636332 MySQL技术内幕 mysql使用大全,可以说方方面面都包括了.认真研读大概一本就差不 ...

  8. 前端程序员：月薪 5K 到 5 万，我干了啥

    高贵的前端程序猿们: 如何在前端开发这种高精尖的技术领域找到心仪的工作?实现在咖啡馆喝喝咖啡敲敲代码就能升职加薪.买房买车.迎娶白富美走上人生巅峰的职业梦想?这篇<进化论:从 0 到 100,前 ...

  9. HTML5 Canvas JavaScript库 Fabric.js 使用经验

    首先,表明我的态度:采用 Flash 才是最优方案,不建议使用 HTML 5 的 Canvas 做一些生产/工业级的网页应用. Flash的优势一是浏览器支持好,二是代码成熟稳定.而HTML5 的 C ...

  10. 这几天阅读的shadowgun的几个shader

    直接从阅读时记录的笔记摘抄过来,写的比较随意. 1. MADFINGER-blinking-god-rays 除了可以用于实现太阳光线效果,还能调整参数让颜色随时间淡入淡出闪烁,能做出想灯光之类的效果 ...