使用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. C盘不能新建文件的问题解决办法

    C盘不能新建文件的问题解决办法 主要症状: 1.C 盘文件不能修改2.C 盘不能新建文件3.总之就是只能读取不能,写入和修改这样对于平时操作造成了极其的不方便~~~复制文件到C 盘会提示:错误0×80 ...

  2. 用批处理来重启IIS的应用程序池

    批处理很简单,先Stop再Start就行,代码如下(apppoolName是应用程序池的实例名):c:\windows\system32\inetsrv\AppCmd.exe stop apppool ...

  3. ext等待提示

    1.Store加载信息等待 ExtJs的Store在加载时候一般是延迟加载的,这时候Grid就会先出现一片空白,等加载完成后才出现数据:因此,我们需要给它添加一个提示信息! 但是Store却没有wai ...

  4. [mysql]MySql数据类型和java类型对照表

    MySQL Type Name Return value ofGetColumnClassName Returned as Java Class BIT(1) (new in MySQL-5.0) B ...

  5. thinkphp的nginx配置

    thinkphp的nginx配置 server { listen 80; server_name www.abc.com; #charset utf-8; access_log /var/www/ww ...

  6. jQuery放大镜插件jqzoom使用

    源码下载,使用指导地址:http://www.mind-projects.it/projects/jqzoom/ 使用教程: 1.导入库文件 <script src="../js/jq ...

  7. Centos 6安装python3.5

    安装python3.5 安装步骤如下 :1 准备编译环境(环境如果不对的话,可能遇到各种问题,比如wget无法下载https链接的文件) yum groupinstall 'Development T ...

  8. struct和typedef struct的用法

    我首先想到的去MSDN上看看sturct到底是什么东西,虽然平时都在用,但是每次用的时候都搞不清楚到底这两个东西有什么区别,既然微软有MSDN,我们为什么不好好利用呢,下面是摘自MSDN中的一段话: ...

  9. C51 库函数(3)

    3.3 STRING.H:串函数 串函数通常将指针串作输入值.一个串就包括2个或多个字符.串结以空字符表示.在函数memcmp,memcpy,memchr,memccpy,memmove和memset ...

  10. PL/SQL 动态SQL

    declare msql varchar2(200); row_id varchar2(200); begin loop row_id := 'AAATGiAAEAAAuLLAAA'; msql := ...