使用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. 激活office 2013

    1.下载office 2013激活工具:microsoft toolkit 2.解压文件,运行Microsoft Toolkit.exe,选择office,即箭头标识处

  2. Python标准库--os模块

    这个模块包含普遍的操作系统功能.如果你希望你的程序能够与平台无关的话,这个模块是尤为重要的.即它允许一个程序在编写后不需要任何改动,也不会发生任何问题,就可以在Linux和Windows下运行.一个例 ...

  3. 利用路由修改thinkphp框架开发的后台地址

    一般我们写前台是home 后台是 admin那么我们的后台是 域名/admin 那我们要随时修改这个地址是非常麻烦的事情开始可能会想到,就是把模块名称改掉,或者分组(3.1版)这样的话不但要改配置,连 ...

  4. Math.round()、Math.ceil()、Math.floor()与Math.random()的区别?

    Math.round(x) 四舍五入 加上0.5向下取整 Math.round(1.5) 2 Math.round(-11.5) -11 Math.round(-11.2) -10 Math.ceil ...

  5. C# Ini文件操作

    在开源中国看到的操作ini文件的,写的还不看,留着以后用 using System; using System.IO; using System.Runtime.InteropServices; us ...

  6. int string convert

    C++ int与string的转化 int本身也要用一串字符表示,前后没有双引号,告诉编译器把它当作一个数解释.缺省 情况下,是当成10进制(dec)来解释,如果想用8进制,16进制,怎么办?加上前缀 ...

  7. 01:Hello, World!

    描述 对于大部分编程语言来说,编写一个能够输出“Hello, World!”的程序往往是最基本.最简单的.因此,这个程序常常作为一个初学者接触一门新的编程语言所写的第一个程序,也经常用来测试开发.编译 ...

  8. MCU助推居家移动医疗微型化

    随着行动装置的快速普及,近几年行动医疗成为热门话题,市场成长迅速,也引发了不少新的商业模式.根据美通社一份市场调查报告指出,行动医疗市场在2018年将达到234.9亿美元的规模,2013至2018年期 ...

  9. win7 清理系统

    1. 先用CCleaner等第三方软件清理一下.2. 将用户文件.我的文档.我的音乐.我的视频.桌面等路径更改到非系统分区(文件也会一并移动过去)3. 将系统盘的系统还原占用空间比减小,将大部分虚拟内 ...

  10. Generate Parentheses——LeetCode

    Given n pairs of parentheses, write a function to generate all combinations of well-formed parenthes ...