我可以将图像作为 blob 存储到本地存储或某个地方以便它可以在另一个页面中使用吗？

Question

我正在使用 Cordova 的相机插件获取图片（getPicture() 方法）。它 returns 以 blob url 格式拍摄的照片。我将图像的 blob url 保存在我保存在 LocalStorage 中的对象的键中。但是，问题是当我从本地存储中检索 blob url 并将图像的 src 设置到另一个页面时，图像不显示。如下图所示

我在某处读到这是因为 blob urls 仅对生成它们的页面有效。有什么方法可以使生成的图像在另一个页面上可用？

Answer 1

我所做的是，将图像转换为 Base64 字符串，然后将该 Base64 字符串存储到本地存储。

前任

通过id获取图片并存储到本地

image = document.getElementById('myImage');
imgData = getBase64Image(image);
localStorage.setItem("imgData", imgData);

Base64 转换

function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    var dataURL = canvas.toDataURL("image/png");

    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

然后在任何下一页或同一页上，您可以从本地存储中检索 Base64 图像并显示到页面

var dataImage = localStorage.getItem('imgData');
imageTag = document.getElementById('myImage');
imageTag.src = "data:image/png;base64," + dataImage;

我可以将图像作为 blob 存储到本地存储或某个地方以便它可以在另一个页面中使用吗？

Can I store image as blob to localstorage or somewhere so it can used in another page?

javascript

cordova

cordova-plugins