将画布返回为WebP图像

Question

如何将此函数中的canvas返回为webp图像？

function capture(video) {
    if(scaleFactor == null){
        scaleFactor = 1;
    }
    //var w = video.videoWidth * scaleFactor;
    //var h = video.videoHeight * scaleFactor;
    var w = 700;
    var h = 400;
    var canvas = document.createElement('canvas');
        canvas.width  = w;
        canvas.height = h;
    var ctx = canvas.getContext('2d');
        ctx.drawImage(video, 0, 0, w, h);
        var uniq = 'img_' + (new Date()).getTime();
        canvas.setAttribute('id', uniq);
    return canvas ;
}

- btgen

Answer 1

Canvas有一个名为.toDataURL(type, encoderOptions)的方法。

在这种情况下，以下代码片段应该足够：

canvas.toDataURL('image/webp');

这将给你一个数据URL，它是图像的base64编码，并且看起来像这样。

data:image/webp;base64,UklGRqgCAABXRUJQVlA4WAoAAAAwAAAAxwAAYwAASUNDUBgCAAAAAAIYAAAAAAQwAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAAHRyWFlaAAABZAAAABRnWFlaAAABeAAAABRiWFlaAAABjAAAABRyVFJDAAABoAAAAChnVFJDAAABoAAAAChiVFJDAAABoAAAACh3dHB0AAAByAAAABRjcHJ0AAAB3AAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAFgAAAAcAHMAUgBHAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFhZWiAAAAAAAABvogAAOPUAAAOQWFlaIAAAAAAAAGKZAAC3hQAAGNpYWVogAAAAAAAAJKAAAA+EAAC2z3BhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABYWVogAAAAAAAA9tYAAQAAAADTLW1sdWMAAAAAAAAAAQAAAAxlblVTAAAAIAAAABwARwBvAG8AZwBsAGUAIABJAG4AYwAuACAAMgAwADEANkFMUEgPAAAAAQcQEREAUKT//yWi/6lwAFZQOCBSAAAA8AcAnQEqyABkAD5tNplJpCMioSBoAIANiWlu4XXwADuh1VJsmIdVSbJiHVUmyYh1VJsmIdVSbJiHVUmyYh1VJsmIdVSbJhYAAP7/wbAAAAAAAA==

关于此内容的更多信息可以在https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL找到。

- Salim

---

你能根据我的代码举例说明实现吗？ - btgen

这个回答已经被点赞，因为它适用于现代浏览器，但请查看我的答案以了解此设计可能存在的问题。 - Yogi

@btgen，你只需要返回canvas.toDataUrl而不是canvas本身。这个数据URL可以在现代浏览器中作为图像标签的src参数使用。 - Salim