mozmorris / react-webcam

Webcam component
https://codepen.io/mozmorris/pen/JLZdoP
MIT License
1.63k stars 281 forks source link

Unble to save screenshot as blob #400

Open meilleureVie opened 4 months ago

meilleureVie commented 4 months ago

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

alvesvaren commented 4 weeks ago

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)