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屋！