Question

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

我有HTML5视频播放器，其中包含从其他域加载的视频（例如http://video.com）。域返回视频的以下标头（尝试...-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

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

我使用canvg.js

解决了这个问题

只包括canvg库文件，

在html页面上添加画布，

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

使用以下方法，

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

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

Answer 2

使用fabric js＆＃34;安全错误＆＃34;在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"});

canvas.toDataURL（）给出＆＃34;安全错误＆＃34;在IE 11中

2 个答案: