Question

我希望从html5视频标记中捕获并上传缩略图

这是我的代码

    var w = 135;//video.videoWidth * scaleFactor;
    var h = 101;//video.videoHeight * scaleFactor;
    var canvas = document.createElement('canvas');

    canvas.width = w;
    canvas.height = h;
    var ctx = canvas.getContext('2d');
    ctx.drawImage(_video, 0, 0, w, h);
    canvas.toDataURL("image/jpg"); 
    var blob =  canvas.msToBlob();

我在Chrome浏览器中遇到了这个例外“对象＃没有方法'msToBlob'”。任何人都可以帮忙，这里有什么不对？

Answer 1

这是因为chrome还不支持toBlob方法。我检查了夜间版本，看不到它。

有人讨论here一段时间但没有任何结果，firefox仍在等待更好地定义案例。

所以简而言之，Chrome还不支持这一点，我认为它只支持ie9及以上，所以最好不要在生产网站上使用它。

如果您尝试将画布抓取到画布上，其他建议是使用canvas.toDataURL（）进行maby探索;然后将其存储为base64。

对不起，这不是一个更好的结果

要查看Chrome中的更新，请检查：

http://code.google.com/p/chromium/issues/detail?id=67587

Answer 2

ms代表Microsoft，因此msToBlob只能在IE中使用。其他浏览器（一旦支持）也可能为它添加前缀（webkitToBlob）并最终切换到无前缀版本（toBlob）

即使您检查了各种前缀的支持，目前支持仍然有限。相反，您可以使用toDataURL返回base64编码的URI，您可以将其用作img元素的src属性：

var b64 = canvas.toDataURL("image/jpg");
//later... 
thumbnailImg.src = b64;

我想从html5视频标签捕获并上传缩略图

2 个答案: