canvas导出base64时可否自定义图片的宽高呢 about cheetah-capture

[newives]

比如将捕获的帧的图片渲染到canvas上 当使用drawImage渲染图片并指定宽高时图片就会模糊
因为指定宽高与捕获的base64宽高不同，如果可以指定导出的base64宽高，画面就不会模糊了

[newives]

或者将imageDataBuffer 暴露给用户自行处理也可以

[newives]

又发现了个新疑问
imageDataBuffer在转Blob后，再用new FileReader()的readAsDataURL读取Blob，返回的base64是损毁了或者是无效的
new Blob([imageDataBuffer], { type: "image/png" })
如这里的代码 https://github.com/wanwu/cheetah-capture/blob/main/src/index.ts#L142 导出的blob似乎也是无效的，无法转base64

[newives]

我注意到了 imageDataBuffer 是一个 Uint8ClampedArray 那么想通过 new ImageData(imageDataBuffer, 200, 200) 去设置图像的宽高基本是不可能了 因为图像的宽高在 imageDataBuffer 已经规定好了 强行设置会报下面错误

[hixuanxuan]

hello~
几个问题

1. 产出的图片宽高是读取的视频宽高，业务方拿到图片后可以自己做缩放以及裁切。
2. 针对你需要的blob的问题，下面是eg

function createImageBlob(imageDataBuffer, width, height) {
    return new Promise((resolve, reject) => {
        const imageData = new ImageData(imageDataBuffer, width, height);
        const canvas = document.createElement('canvas');
        canvas.width = width;
        canvas.height = height;
        const ctx = canvas.getContext('2d');
        ctx.putImageData(imageData, 0, 0);
        canvas.toBlob(resolve, 'image/png');
    });
}

3. imageDataBuffer是无法重新设置图片宽高的，如有需要你可以通过canvas drawImage解决。

[newives]

非常感谢您的回复
imageDataBuffer正是所需的，不过目前cheetah-capture并没有把它暴露给用户😊

[newives]

我注意到了 imageDataBuffer 是一个 Uint8ClampedArray 那么想通过 new ImageData(imageDataBuffer, 200, 200) 去设置图像的宽高基本是不可能了 因为图像的宽高在 imageDataBuffer 已经规定好了 强行设置会报下面错误

对了 imageDataBuffer暴露出来貌似用户也无法设置宽高 正如上面内容所说

[hixuanxuan]

哈喽，问下你需要imageDataBuffer的目的是什么呢，设置尺寸你可以通过在业务中使用css等方式进行样式编辑，抽帧的目的是产出与视频尺寸一致的帧图片，你说的支持修改宽高这种不会在lib层面去做~

[newives]

img设置宽高图片不会进行压缩
但canvas是不行的 会压缩图片

[newives]

使用场景是：在canvas中渲染图片，对图片进行宽高设置

[hixuanxuan]

哈喽 你拿到的抽帧后的图片尺寸是和原始视频一致的，你可以采取和图片一致的大小绘制到canvas再进行缩放

[newives]

但是对于大部分视频来说 尺寸都很大 绘制出来的效果可想而知😂