canvas toDataUrl 跨域问题
使用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 跨域问题的更多相关文章
- Canvas引入跨域的图片导致toDataURL()报错的问题的解决
本文介绍了Canvas引入跨域的图片导致toDataURL()报错的问题的解决,分享给大家,具体如下: [场景] 用户打开网页,则请求腾讯COS(图片服务器)上的图片js代码.使用canvas绘图. ...
- 解决canvas图片getImageData,toDataURL跨域问题
图片服务器需要配置Access-Control-Allow-Origin 当需要需要对canvas图片进行getImageData()或toDataURL()操作的时候,跨域问题就出来了.图片服务器需 ...
- canvas图片跨域问题
canvas的drawImage使用跨域图片时候,会报错,解决方法如下: 1. 使用base64替换跨域图片 如果图片不大,且只有几张,可以使用base64,来代替跨域引用图片. 2. 设置image ...
- 快速解决Canvas.toDataURL 图片跨域的问题
出现Canvas.toDataURL 图片跨域问题怎么解决呢?下面小编就为大家带来一篇Canvas.toDataURL 图片跨域问题的快速解决方法.一起跟随小编过来看看吧 如题,在将页面的图片地址进行 ...
- canvas.toDataURL 由于跨域报错的解决方法
关于canvas.toDataURL 由于跨域报错的解决方法 用过canvas,都知道toDataURL这个方法真好用,不仅合成图片用到它,压缩图片也用到它.但有一个问题,就是图片源不能跨域,不然会报 ...
- 解决Canvas.toDataURL 图片跨域问题
如题,在将页面的图片地址进行本地输出时(Html2Canvas.js),因不同源存在跨域问题,会出现toDataURL访问权限问题: [Redirect at origin 'http://sub1. ...
- canvas图片的跨域问题
科普文章from MDN 实践证明这篇里的回答对的: .起个服务器再在chrome里试一下,应该会跑通. .右键chrome,属性,在目标后面加上(有个空格) --allow-file-access- ...
- h5标签canvas关于getImageData跨域的问题
h5标签canvas关于getImageData跨域的问题 在学习h5的时候,canvas标签中getImageData()报错:security error! 具体代码如下(chrome浏览器): ...
- js 利用canvas + flv.js实现视频流 截屏 、本地下载功能实现,兼容火狐,谷歌;canvas截屏跨域问题,无音频视频流加载不显示问题
项目:物联网监控项目----后台视频流管理(前端实现视频截屏功能) 本文就不同视频源分情况展示: 1 本地视频(项目同目录视频)截屏(canvas.getContext("2d).drawI ...
随机推荐
- win10开始菜单打不开的解决办法
解决方法: 1.在Win10系统下按Win+R打开运行,输入services.msc回车打开服务: 2.在服务中找到User Manager服务;3.打开usermanager服务属性,将其启动类型设 ...
- 小议window.event || ev
以前做项目时就遇到这个问题,但是太懒没有总结,今天来总结一下 onclick="alert(arguments.callee)"这句随便放在某个元素中,试试不同的浏览器会有弹出什么 ...
- Js仿弹框
收藏一个简单实用的JS弹框,通过隐藏和显示div来实现,代码来自脚本之家! <html> <head> <title> LIGHTBOX EXAMPLE </ ...
- .net发邮件
// 引入命名空间 using System.Net; using System.Net.Mail; SmtpClient smtp = new SmtpClient(); //实例化一个SmtpCl ...
- Primary Expression
Primary expressions are the building blocks of more complex expressions. They are literals, names, a ...
- APP如何设计才能适配iphone6/plus和iphone5
随着苹果发布两种新尺寸的大屏iPhone 6,iOS平台尺寸适配问题终于还是来了,移动设计全面进入"杂屏"时代.看看下面三款iPhone尺寸和分辨率数据就知道屏幕有多杂了. 移动a ...
- CentOS 6.x 下Postfix和dovecot邮件服务安装和基本配置
1 卸载sendmail [root@mail~]# pstree | grep sendmail [root@mail~]# service sendmail stop [root@mail~]# ...
- GNU Make chapter 2 —— Makefile 介绍
Makefile是由一系列的rule规则组成,这些rule都遵循以下形式: target ... : prerequisites ... command ... ... target(目标) 一般来说 ...
- lua学习笔记之-语言基础
一.基本知识 1.第一个程序: print("hello lua"); 在交互模式下直接运行: > print("hello lua") hello lu ...
- BZOJ 1023 [SCOI2009]生日快乐
1024: [SCOI2009]生日快乐 Time Limit: 1 Sec Memory Limit: 162 MBSubmit: 1729 Solved: 1219[Submit][Statu ...