javascript - canvas.toDataURL() 在 IE 11 中给出 "Security Error"

Question

我正在为需要对视频进行一些操作的媒体分发者开发基于浏览器的工具。

我有 HTML5 视频播放器，其中的视频是从另一个域加载的(例如 http://video.com)。域返回视频的以下 header (尝试使用 * 和特定域名的 ...-Origin):

Access-Control-Allow-Methods: GET
Access-Control-Allow-Origin: *

video标签是这样的:

<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 系列之外的所有浏览器。我已经在 IE 11 上试过了。

我知道在这种情况下 Canvas 会被污染，但它不应该被污染。

有没有人知道有什么方法可以让它工作？我看到了一些针对图像的解决方法，但在我使用 video 的情况下它不起作用。

PS:我看到了答案Canvas.toDataURL() working in all browsers except IE10但它很旧并且与图像有关。我希望事情从那时起有所改变。

Answer 1

我试图导出包含高图表的页面的 pdf。尝试在 Canvas 上加载 svg 数据时，我遇到了与 IE 相同的问题，同样的安全错误。

我使用 canvg.js 解决了这个问题

只包含canvg库文件，

在html页面上添加 Canvas ，

<canvas id="canvas" width="1000px" height="600px"></canvas> 

使用下面的方法，

canvg(document.getElementById('canvas'), xml);

它适用于包括 IE 在内的所有浏览器。