基于canvas.toDataURL实现video和webGl的截图功能

一、背景

开发视频截图功能

其中H264格式使用的是H5的video进行播放

H265格式使用的是WebAssembly解帧，然后通过webGl绘制

二、技术方案

使用canvas.toDataURL(type, encoderOptions);转换成base64，然后放到a标签中，使用浏览器的特性，讲图片下载下来。

type 图片类型，默认值image/png，支持image/jpeg，image/webp

encoderOptions 清晰度 默认值为0.92，超过1则使用默认值。（image/jpeg 或 image/webp下可设置）

三、注意事项

1、video标签，需要另提供一个canvas标签绘制video图像

2、webGl getContext需要配置preserveDrawingBuffer，否则截的图为空

四、实现（关键函数）

/**
 * 图片下载
 */
const downloadImg = ()=> {
    download({url: canvasToUrl({canvas: getCanvas()}),name: 'test' });
}
/**
 * 图片转换
 * @param canvas
 * @param type
 * @returns {string | *}
 */
const canvasToUrl = ({canvas, type})=> {
    return canvas.toDataURL(type || 'image/png');
}
/**
 * 获取canvas
 * @returns {*}
 */
const getCanvas = ()=> {
    const video = document.getElementById('videoId');
    let canvas;
    if (video.tagName === 'VIDEO') {
        canvas = document.createElement('canvas');
        canvas.width = video.offsetWidth;
        canvas.height = video.offsetHeight;
        canvas.style.height = `${video.offsetWidth}px`;
        canvas.style.height = `${video.offsetHeight}px`;
    } else {
        canvas = video;
    }
    return canvas;
}

/**
 * a标签下载
 * @param url
 * @param name
 * @param blob
 * @param parmas
 * @returns {Error}
 */
const download = ({url, name, blob, parmas}) => {
    if (!url && !blob) return new Error('url不合法');
    const href = blob ? URL.createObjectURL(blob) : url + this.urlJointParmas(parmas); // 此处用不到
    const elt = document.createElement('a');
    elt.setAttribute('href', href);
    elt.setAttribute('download', name || 'default');
    elt.style.display = 'none';
    document.body.appendChild(elt);
    elt.click();
    document.body.removeChild(elt);
    if (blob) URL.revokeObjectURL(blob);
};