使用canvas 的 toDataUrl方法会遇到跨域问题

chrome 会报下面的错误:

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

Firefox 会报下面的错误:

SecurityError: The operation is insecure.

解决方案分两步:

1、在服务端设置响应头部

Access-Control-Allow-Origin: *

2、js设置image crossOrigin 为 Anonymous

    image.crossOrigin = "Anonymous";
image.onload = function(){
context.drawImage(this, 0, 0, 400, 300);
var base64Url = canvas.toDataURL("image/png");
console.log(base64Url);
};
image.src = imageSrc;

canvas toDataUrl 跨域问题的更多相关文章

  1. Canvas引入跨域的图片导致toDataURL()报错的问题的解决

    本文介绍了Canvas引入跨域的图片导致toDataURL()报错的问题的解决,分享给大家,具体如下: [场景] 用户打开网页,则请求腾讯COS(图片服务器)上的图片js代码.使用canvas绘图. ...

  2. 解决canvas图片getImageData,toDataURL跨域问题

    图片服务器需要配置Access-Control-Allow-Origin 当需要需要对canvas图片进行getImageData()或toDataURL()操作的时候,跨域问题就出来了.图片服务器需 ...

  3. canvas图片跨域问题

    canvas的drawImage使用跨域图片时候,会报错,解决方法如下: 1. 使用base64替换跨域图片 如果图片不大,且只有几张,可以使用base64,来代替跨域引用图片. 2. 设置image ...

  4. 快速解决Canvas.toDataURL 图片跨域的问题

    出现Canvas.toDataURL 图片跨域问题怎么解决呢?下面小编就为大家带来一篇Canvas.toDataURL 图片跨域问题的快速解决方法.一起跟随小编过来看看吧 如题,在将页面的图片地址进行 ...

  5. canvas.toDataURL 由于跨域报错的解决方法

    关于canvas.toDataURL 由于跨域报错的解决方法 用过canvas,都知道toDataURL这个方法真好用,不仅合成图片用到它,压缩图片也用到它.但有一个问题,就是图片源不能跨域,不然会报 ...

  6. 解决Canvas.toDataURL 图片跨域问题

    如题,在将页面的图片地址进行本地输出时(Html2Canvas.js),因不同源存在跨域问题,会出现toDataURL访问权限问题: [Redirect at origin 'http://sub1. ...

  7. canvas图片的跨域问题

    科普文章from MDN 实践证明这篇里的回答对的: .起个服务器再在chrome里试一下,应该会跑通. .右键chrome,属性,在目标后面加上(有个空格) --allow-file-access- ...

  8. h5标签canvas关于getImageData跨域的问题

    h5标签canvas关于getImageData跨域的问题 在学习h5的时候,canvas标签中getImageData()报错:security error! 具体代码如下(chrome浏览器): ...

  9. js 利用canvas + flv.js实现视频流 截屏 、本地下载功能实现,兼容火狐,谷歌;canvas截屏跨域问题,无音频视频流加载不显示问题

    项目:物联网监控项目----后台视频流管理(前端实现视频截屏功能) 本文就不同视频源分情况展示: 1 本地视频(项目同目录视频)截屏(canvas.getContext("2d).drawI ...

随机推荐

  1. head First HTML与CSS读书笔记

    调整图片大小 有滚动条的图片可给不了好的用户体验,为了让图片的大小更适合浏览器窗口.这时候就需要对图片的大小进行调整看书之前.我调整图片大小的方式是在<img>元素使用 width 和 h ...

  2. 初涉JavaScript模式 (6) : 原型模式 【二】

    原型与in操作符 有两种方式使用in操作符:单独使用和在for-in循环中使用. 在单独使用时,in操作符会遍历实例公开(可枚举)的属性,如果找到该指定属性则返回true,无论该指定属性是存在与实例中 ...

  3. 【行为型】Iterator模式

    迭代器模式提供一种方法顺序访问聚合对象中的各个元素,而又不需要暴露该聚合对象的内部表示.对于该模式,估计几乎所有的人都使用过,在此直接给出类结构图参考如下: 如前所述,迭代器模式的思想主要是:一能提供 ...

  4. 水仙花 AC 杭电

    水仙花数 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submi ...

  5. 在win8.1 64位环境下有关Oracle的安装和卸载

    1,Oracle安装 3 注意:在win8.1环境下安装64位的oracle客户端,注意配置是1g的 2.Oracle的卸载:http://jingyan.baidu.com/article/f7ff ...

  6. close函数

    int close(int sockfd); close一个TCP套接字的默认行为是把该套接字标记成已关闭,然后立即返回到调用进程, 该套接字描述符不能再由调用进程使用,也就是说它不能再作为read或 ...

  7. PHP简单获取数据库查询结果并返回JSON

    <?php header("Content-type:text/html;charset=utf-8"); //连接数据库 $con = mysql_connect(&quo ...

  8. 倒水问题-->经典面试题目

    题目详细: 有两个容器,容积分别为A升和B升,有无限多的水,现在需要C升水.我们还有一个足够大的水缸,足够容纳C升水.起初它是空的,我们只能往水缸里倒入水,而不能倒出.可以进行的操作是:把一个容器灌满 ...

  9. 测试Flask+PYTHON的WEB框架

    参数URL: http://blog.csdn.net/qwiwuqo/article/details/8970621 安装flask之前,你必须要先安装python和easy_install. 安装 ...

  10. 利用NativeWindow监视WndProc消息(好像是一个字典,没搞明白)

    http://blog.csdn.net/lovefootball/article/details/1784882 在写Windows应用程序的时候,经常会碰到需要修改例如MessageBox或者Fi ...