0

我想从 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'” 。谁能帮忙，这里有什么问题？

4

2 回答 2

0

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

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

var b64 = canvas.toDataURL("image/jpg");
//later... 
thumbnailImg.src = b64;
于 2013-12-12T03:06:57.370 回答
0

这是因为 chrome 还不支持 toBlob 方法。我检查了每晚的构建，但看不到它。

在这里讨论了一段时间，但没有任何结果，Firefox 仍在等待更好地定义此案。

所以简而言之，chrome 还不支持这个，我认为它只在 ie9 及更高版本中真正支持，所以最好不要在生产站点上使用它。

如果您尝试从画布上存储屏幕抓取，其他建议是使用 canvas.toDataURL() 进行探索；然后将其存储为base64。

抱歉，这对您来说不是更好的结果

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

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

于 2012-11-09T12:58:33.407 回答