如何解决我可以将图像作为 blob 存储到 localstorage 或其他地方以便它可以在另一个页面中使用吗?
我正在使用 Cordova 的相机插件来获取图片(getPicture() 方法)。它返回以 blob url 格式拍摄的图片。我将图像的 blob url 保存在我保存在 LocalStorage 中的对象的键中。但是,问题是当我从本地存储中检索 blob url 并在另一个页面上设置图像的 src 时,图像没有显示。如下图所示。
我在某处读到这是因为 blob url 仅对生成它们的页面有效。有没有办法让生成的图像在另一个页面上可用?
解决方法
我所做的是将图像转换为 Base64 字符串,然后将该 Base64 字符串存储到 localstorage。
对于前
通过 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);
var dataURL = canvas.toDataURL("image/png");
return dataURL.replace(/^data:image\/(png|jpg);base64,/,"");
}
然后在任何下一页或同一页上,您可以从 localstorage 检索 Base64 图像并显示到页面
var dataImage = localStorage.getItem('imgData');
imageTag = document.getElementById('myImage');
imageTag.src = "data:image/png;base64," + dataImage;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。