canvas.toDataURL()给出“安全错误”在IE 11 [英] canvas.toDataURL() gives "Security Error" in IE 11
问题描述
我正在使用基于浏览器的媒体发布商工具,需要对视频进行一些操作。
I'm working on the browser-based tool for media distributors that require some manipulation with video.
我有HTML5视频播放器,例如 http://video.com )。 Domain返回视频的以下标题(尝试 ...- Origin
与*和特定的域名):
I have HTML5 video player with video loaded from another domain (ex. http://video.com). Domain returns the following headers for the video (tries ...-Origin
with * and with specific domain name):
Access-Control-Allow-Methods: GET
Access-Control-Allow-Origin: *
视频
标签如下:
<video crossorigin="anonymous" src="http://video.com/video.mp4"></video>
JS我运行如下:
// meida is a reference to <video> tag
var
imgData,
width = media.videoWidth,
height = media.videoHeight,
canvas = document.createElement("canvas"),
context = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;
context.fillRect(0, 0, width, height);
context.drawImage(media, 0, 0, width, height);
imgData = canvas.toDataURL('image/png'); // line where IE throws DOMException named 'Security error'
该代码适用于所有浏览器。我已经在IE 11上尝试过了。
The code works in all browsers except IE family. I've tried it on IE 11.
我知道在这种情况下画布变得污染,而不应该。
I understand that in this case canvas becomes tainted while it should not.
有人知道任何方式让它工作吗?我看到了一些图像的解决方法,但它不适用于我的情况与视频
。
Does anybody know any way to make it work? I saw some workarounds for images but it doesn't work in my case with video
.
PS:已看到答案 Canvas.toDataURL()在所有浏览器中工作,除了IE10 但它是相当老,并与图像相关。
PS: I've seen the answer Canvas.toDataURL() working in all browsers except IE10 but it is quite old and is related to images. I hope things changed since then.
推荐答案
我试图导出PDF的页面,其中包括highcharts。
我试图在画布上加载svg数据时遇到同样的问题,同样的安全错误。
I was trying to export pdf of page which includes highcharts. I was getting same problem with IE when trying to load svg data on canvas, same security error.
我修复了这个问题使用 canvg.js
I fixed this issue using canvg.js
只包括canvg库文件,
just include canvg library files,
在html页面上添加画布,
Add canvas on html page,
<canvas id="canvas" width="1000px" height="600px"></canvas>
使用以下方法,
canvg(document.getElementById('canvas'), xml);
它适用于所有浏览器,包括IE。
It worked for me in all browsers including IE.
这篇关于canvas.toDataURL()给出“安全错误”在IE 11的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!