使用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. echarts的使用

    ECharts是一个图形展示控件,基于javascript开发出来的,挺好用的,研究了下. 主页地址:http://echarts.baidu.com/index.html API地址:http:// ...

  2. scrapy1.1入门用例简介

    今天将scrapy安装成功,测试了下,倒腾了好长时间,才倒腾成功,特此分享. 其实最好的老师就是scrapy的帮助文档,只要把文档看懂,照着做,也就啥都会儿了! 帮助文档下载见http://downl ...

  3. matplotlib curve.py

    import matplotlib.pyplot as plt import numpy as np x = np.linspace(0, 2*np.pi, 100) sinX = np.sin(x) ...

  4. C++学习笔记6——类的多态

    简介: 同一操作作用于不同的对象,可以有不同的解释,产生不同的执行结果.在运行时,可以通过指向基类的指针,来调用实现派生类中的方法. 虚函数: 在某基类中声明为virtual并在一个或多个派生类中被重 ...

  5. 实验五:分析system_call中断处理过程

    原创作品转载请注明出处<Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 如果我写的不好或者有误的地方请留言 ...

  6. UML类图标识

    矩形框:类 第一层:类名(抽象类用斜体). 第二层:属性(‘+’ 表示 public.‘-’ 表示 private.‘#’ 表示 protected). 第三层:方法. <<interfa ...

  7. PIL Image 转成 wx.Image、wx.Bitmap

    import wx from PIL import Image def ConvertToWxImage(): pilImage = Image.open('1.png') image = wx.Em ...

  8. android 休眠唤醒机制分析(一) — wake_lock

    本文转自:http://blog.csdn.net/g_salamander/article/details/7978772 Android的休眠唤醒主要基于wake_lock机制,只要系统中存在任一 ...

  9. cloudstack的ZONE删除不掉?来这招吧

    老是提示什么物理网络被使用之类的, 可以进数据库去直接删除. I want to delete a zone,by this way:(1)delete all VMs in zone.(2)dele ...

  10. VS中的预先生成事件和后期生成事件

    原文:VS中的预先生成事件和后期生成事件 在C#开发中,有时候需要在程序编译之前或之后做一些操作. 要达到这个目的,可以使用Visual Studio中的预先生成事件和后期生成事件. 下图是一个简单例 ...