HTML5 canvas, save jpeg blob and restore to canvas from blob

Question

I have a canvas #mycanvas which contains an image. I want to create a blob out of that image, preferably as a jpeg. Here is how i create the blob

document.getElementById('mycanvas').toDataURL("image/jpeg").replace(/^data:image\/(png|jpeg);base64,/, "")

How do i recreate the image from this blob, and show it in #mycanvas again?

Check out the answer here http://stackoverflow.com/questions/4773966/drawing-an-image-from-a-data-url-to-a-canvas — Sergiu Paraschiv, Aug 24 '13 at 14:08
May I suggest that the word "blob" is probably a little misleading ? As shown on [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob) the right way to convert a ` — danidemi, Aug 03 '16 at 16:51
A data URL is a base64 representation of the image not a Blob. As danidemi pointed out. See: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob and https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL — Björn, Feb 22 '17 at 14:09

score 4 · Accepted Answer · answered Aug 24 '13 at 14:19

4

Here's how i solved my problem

function blob2canvas(canvas,blob){
    var img = new Img;
    var ctx = canvas.getContext('2d');
    img.onload = function () {
        ctx.drawImage(img,0,0);
    }
    img.src = blob;
}

The blob was received when calling canvas.toDataURL("image/jpeg")

answered Aug 24 '13 at 14:19

Anton Gildebrand

3,641
12
50
86

How can I do the opposite? Get the blob from canvas? – EnriMR Apr 12 '15 at 15:25
1

@EnriMR `document.getElementById('mycanvas').toDataURL("image/jpeg")` – Anton Gildebrand Apr 12 '15 at 17:31
3

@AntonGildebrand, isn't the right way to convert a canvas into a proper `Blob` the [toBlob()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob) method ? – danidemi Aug 03 '16 at 17:01
1

This is no longer accurate, you have to create a url from the blob `img.src = URL.createObjectURL(blob);` – Vincent Le Dec 31 '17 at 18:17

score 2 · Answer 2 · answered Jan 24 '17 at 18:33

Anton's answer no longer works as it is. You need this syntax now.

function blob2canvas(canvas,blob){
    var img = new window.Image();
    img.addEventListener("load", function () {
        canvas.getContext("2d").drawImage(img, 0, 0);
    });
    img.setAttribute("src", blob);
}

score 0 · Answer 3 · answered Sep 24 '20 at 15:04

Restore to Canvas from Blob sample taken from: https://googlechrome.github.io/samples/image-capture/grab-frame-take-photo.html

// ms is a MediaStreamPointer
let imageCapture = new ImageCapture(ms.getVideoTracks()[0]);

                imageCapture.takePhoto()
                    .then(blob => createImageBitmap(blob))
                    .then(imageBitmap => {
                        const canvas = document.getElementById('canvas')
                        drawCanvas(canvas, imageBitmap);
                    })

function drawCanvas(canvas, img) {
    canvas.width = getComputedStyle(canvas).width.split('px')[0];
    canvas.height = getComputedStyle(canvas).height.split('px')[0];
    let ratio = Math.min(canvas.width / img.width, canvas.height / img.height);
    let x = (canvas.width - img.width * ratio) / 2;
    let y = (canvas.height - img.height * ratio) / 2;
    canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
    canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height,
        x, y, img.width * ratio, img.height * ratio);
}

HTML5 canvas, save jpeg blob and restore to canvas from blob

3 Answers3

Linked