Question

这个问题有2个部分，实际上 - 使用画布获取缩略图是直截了当的。 K Scott Allen发表了这篇here

的帖子

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

$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 Media Services提供服务，因此对canvas.getDataUrl（）的调用是一个跨域请求并失败。

设置CORS标头/标志应该有效但不能。这个StackOverflow问题here的答案中包含的图像有一个解决方法。

这个解决方案具有以下代码示例函数，该函数在body load上运行：

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映像支持here进行了测试。获取缩略图的方法确实有效。有一个页面使用它here（tho，没有跨域的东西）

为HTML5 CORS <video> </video>生成缩略图

0 个答案: