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).域返回视频的以下标题(尝试 ...-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 标签是这样的:

<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 上试过了.

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.

有人知道有什么办法让它工作吗?我看到了一些图像的解决方法，但它不适用于 video.

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.

推荐答案

通过使用 fabric js，IE 11 中的安全错误"将消失.

By using fabric js "Security Error" in IE 11 will be gone.

    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() 给出“安全错误"；在 IE 11的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！