如何修改capture函数，将Canvas以WebP图片格式返回？

现有如下用于捕获视频画面的capture函数，当前返回的是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 ;
}

要让函数返回WebP格式的图片，核心是利用Canvas的API指定输出格式为image/webp，以下提供两种常用实现方式：

方式1：返回WebP格式的Base64字符串 #

直接通过canvas.toDataURL()方法生成WebP格式的Base64编码字符串，第二个参数可指定图片质量（范围0-1，默认0.92）：

function capture(video) {
    let scaleFactor = scaleFactor ?? 1; // 修正未声明变量问题，更严谨的空值判断
    //var w = video.videoWidth * scaleFactor;
    //var h = video.videoHeight * scaleFactor;
    const w = 700;
    const h = 400;
    const canvas = document.createElement('canvas');
    canvas.width = w;
    canvas.height = h;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(video, 0, 0, w, h);
    
    // 生成WebP格式的Base64字符串，质量设为0.9
    return canvas.toDataURL('image/webp', 0.9);
}

方式2：返回WebP格式的Blob对象（适合上传场景） #

如果需要二进制格式的图片（比如直接上传至服务器），可以使用canvas.toBlob()方法，该方法为异步操作，因此需将函数改为异步函数：

async function capture(video) {
    let scaleFactor = scaleFactor ?? 1;
    const w = 700;
    const h = 400;
    const canvas = document.createElement('canvas');
    canvas.width = w;
    canvas.height = h;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(video, 0, 0, w, h);

    return new Promise((resolve) => {
        // 生成WebP格式的Blob对象，质量设为0.9
        canvas.toBlob((blob) => {
            resolve(blob);
        }, 'image/webp', 0.9);
    });
}

// 使用示例
// capture(videoElement).then(webpBlob => {
//     const imageUrl = URL.createObjectURL(webpBlob);
//     const img = new Image();
//     img.src = imageUrl;
//     // 也可将Blob用于FormData上传
// });

注意事项 #

• 部分旧浏览器可能不支持WebP格式，可通过判断canvas.toDataURL('image/webp')的返回值验证：若返回data:image/png;base64,...则说明浏览器不支持WebP。
• 原函数中scaleFactor未声明，建议添加let或const避免全局变量污染，示例已修正。
• 原代码中给Canvas设置id的逻辑可按需保留或移除，因为返回值不再是Canvas元素。

内容的提问来源于stack exchange，提问作者btgen