HTML5画布，保存jpeg blob并从blob恢复到画布 [英] HTML5 canvas, save jpeg blob and restore to canvas from blob

问题描述

我有一个包含图片的画布 #mycanvas 。我想从该图像中创建一个blob，最好是作为jpeg。以下是我创建blob的方法

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,/, "")

如何从此blob重新创建图像，并再次在 #mycanvas 中显示？

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

推荐答案

以下是我解决问题的方法

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;
}

调用 canvas.toDataURL时收到blob（ image / jpeg）

这篇关于HTML5画布，保存jpeg blob并从blob恢复到画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！