0

这个问题有两个部分，真的 - 使用画布获取缩略图是直截了当的。K Scott Allen 在这里发了一个帖子

基本上，这是代码，我已经尝试过了：

$output = $("#output");
var video = $("#video").get(0);
var canvas = document.createElement("canvas");
    canvas.width = $video.videoWidth * scale;
    canvas.height = $video.videoHeight * scale;
    canvas.getContext('2d')
          .drawImage($video, 0, 0, canvas.width, canvas.height);

    var img = document.createElement("img");
    img.src = canvas.toDataURL();
    $output.prepend(img);

第二部分比较复杂。由于我的 .mpg 视频由 Azure 媒体服务提供，因此对 canvas.getDataUrl() 的调用是跨域请求并且失败。

设置 CORS 标头/标志应该可以工作，但不能。此处StackOverflow 问题的答案中包含图像的解决方法。

此解决方法具有以下代码示例函数，该函数在体负载上运行：

function initialize() {

    //will fail here if no canvas support
    try {
        var can = document.getElementById('mycanvas');
        var ctx = can.getContext('2d');
        var img = new Image();
        img.crossOrigin = '';
        //domain needs to be different from html page domain to test cross origin security
        img.src = 'http://lobbydata.com/Content/images/bg_price2.gif';
    } catch (ex) {
        document.getElementById("results").innerHTML = "<span style='color:Red;'>Failed: " + ex.Message + "</span>";
    }

    //will fail here if security error
    img.onload = function () {
        try {
            var start = new Date().getTime();
            can.width = img.width;
            can.height = img.height;
            ctx.drawImage(img, 0, 0, img.width, img.height);
            var url = can.toDataURL(); // if read succeeds, canvas isn't dirty.
            //get pixels
            var imgd = ctx.getImageData(0, 0, img.width, img.width);
            var pix = imgd.data;
            var len = pix.length;
            var argb = []; //pixels as int
            for (var i = 0; i < len; i += 4) {
                argb.push((pix[i + 3] << 24) + (pix[i] << 16) + (pix[i + 1] << 8) + pix[i + 2]);
            }
            var end = new Date().getTime();
            var time = end - start;
            document.getElementById("results").innerHTML = "<span style='color:Green;'>" +
            "Success: Your browser supports CORS for cross domain images in Canvas <br>"+
            "Read " + argb.length+ " pixels in "+ time+"ms</span>";
        } catch (ex) {
            document.getElementById("results").innerHTML = "<span style='color:Red;'>Failed: " + ex + "</span>";
        }

    }

}

所以我的问题是如何修改 K. Scott Allens 的代码以正确设置 CORS 标头并从视频而不是示例中的 img 生成缩略图？

我尝试在视频元素和画布上设置 crossOrigin ="" 和 crossOrigin="Anonymous" ，但没有成功。

任何帮助，将不胜感激。

罗伯托

PS。这里有一个对浏览器 CORS 图像支持的测试。这种获取缩略图的方法确实有效。有一个页面在这里使用它（虽然，没有跨域的东西）

4

0 回答 0