使用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. 安装 mysql

    1.安装mysql客户端 yum install mysql 2.安装mysql 服务器端 yum install mysql-server 3.配置 mysql字符集 /etc/my.cnf 加入 ...

  2. Python正则表达式+自创口诀

    重新学习了Python正则表达式,看了一些很好的学习博客,向大家推荐这个. 感谢作者@AstralWind 博客地址:http://www.cnblogs.com/huxi/archive/2010/ ...

  3. getUrlParam,jQuery中的URL参数获取

    大家经常会需要在一段URL中截取到自己所需参数的值,下面的方法也许能帮到您: $.getUrlParam = function(name){ var reg = new RegExp("(^ ...

  4. javascript权威指南学习笔记1

    打开这本书,进入到javascript的世界.以前都是看各种视频,感觉什么收获也没有,反而弄得脑袋混乱,希望能够按照这本书的节奏掌握javascript这门语言,为我的前端学习打下基础. 学习前准备: ...

  5. php网站判断用户是否是手机访问的方法

    PHP网站判断用户是否用手机访问,如果是手机的话,就跳转到指定的手机友好页面.随着移动设备的普及,网站也会迎来越来越多移动设备的访问.用适应PC的页面,很多时候对手机用户不友好,那么有些时候,我们需要 ...

  6. 去除win8.1这台电脑中的6个库文件夹

    HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\MyComputer\NameSpace,备份之后删除 wi ...

  7. Bloom Filter(布隆过滤器)

    布隆过滤器用于测试某一元素是否存在于给定的集合中,是一种空间利用率很高的随机数据结构(probabilistic data structure),存在一定的误识别率(false positive),即 ...

  8. jsoup web scraping

    jsoup简介 jsoup是一款HTML解析器,可用与解析URL地址.HTML文本内同等,操作类似于jQuery,可通过DOM查找数据,操作数据, 使用时需引入jsoup jar jsoup可以从包含 ...

  9. HDU5039--Hilarity DFS序+线段树区间更新 14年北京网络赛

    题意:n个点的树,每个条边权值为0或者1, q次操作 Q 路径边权抑或和为1的点对数, (u, v)(v, u)算2个. M i修改第i条边的权值 如果是0则变成1, 否则变成0 作法: 我们可以求出 ...

  10. 找第k大数,最坏时间复杂度O(n)

    (转载请注明出处,http://www.cnblogs.com/fangpei/p/3538331.html ) 以前写过的一篇,搬过来. 上算法课的时候听到老师讲这个问题,觉得还是蛮有意思的.已知数 ...