时间戳

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

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

问题描述

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

我在某处读到这是因为 blob url 仅对生成它们的页面有效。有没有办法让生成的图像在另一个页面上可用？

在此处输入图像描述

标签： javascriptcordovacordova-plugins

解决方案

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

对于前

通过id获取图像并将图像存储到localstorage

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;

推荐阅读