canvas.toDataURL()在IE 11中出现“安全错误”

Question

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

我有一个从另一个域加载视频的HTML5视频播放器(例如：http://video.com)。Domain返回以下视频头部(使用*和特定域名尝试...-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上试过了。

我知道在这种情况下，画布会被污染，而它不应该被污染。

有没有人知道怎么让它工作？我看到了一些图像的变通方法，但它在我使用video的情况下不起作用。

PS:我见过答案Canvas.toDataURL() working in all browsers except IE10，但它太旧了，而且与图片有关。我希望事情从那以后有所改变。

Answer 1

我试图导出pdf的页面，其中包括highcharts。当我试图在画布上加载svg数据时，IE也遇到了同样的问题，同样的安全错误。

我使用canvg.js修复了这个问题

仅包含canvg库文件，

在html页面上添加画布，

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

使用下面的方法，

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

它适用于我所有的浏览器，包括IE。

Answer 2

通过使用fabric js，IE 11中的“安全错误”将会消失。

    var
        imgData,
        width = media.videoWidth,
        height = media.videoHeight,
        canvas = document.createElement("canvas"),
        fabCanvas  = new fabric.Canvas('c'),
        context = fabCanvas.getContext('2d');

    canvas.width = width;
    canvas.height = height;

    fabCanvas.fillRect(0, 0, width, height);
    fabCanvas.drawImage(media, 0, 0, width, height);

    imgData = fabCanvas.toDataURL({format: "png"});