react-webcam icon indicating copy to clipboard operation
react-webcam copied to clipboard

Unble to save screenshot as blob

Open meilleureVie opened this issue 11 months ago • 1 comments

Features:

So far the only way to get the screenshot is using this.webcam.getScreenshot() which return base64 image. But it IS also important to get the result as blob. I would like to add also blob support

meilleureVie avatar Mar 21 '24 15:03 meilleureVie

You can pretty easily create a blob from a base64 image using something like this:

    const [, imageSrcB64] = image.split(",", 2);
    const bstr = atob(imageSrcB64);
    const u8arr = new Uint8Array(bstr.length);
    for (let i = 0; i < bstr.length; i++) {
      u8arr[i] = bstr.charCodeAt(i);
    }
    const imageBlob = new Blob([u8arr], { type: "image/jpeg" });

This assumes the image is of type jpeg, but you can use the same type as when you create the camera. (By default image/webp)

alvesvaren avatar Jun 25 '24 12:06 alvesvaren