我想从HTML5视频标签中捕获和上传缩略图

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方法。我检查了夜间构建，看不到它。

在这里讨论了一段时间，但是什么都没有，Firefox仍在等待案件的定义。

因此，简而

其他建议，如果您要存储屏幕，请抓取画布是使用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;