如何将图像转换为base64并将其存储在本地存储中

Question

如何将所选图像转换为base64，然后将其保存在本地存储中供以后使用。

var image = document.getElementById("image");
    image.addEventListener('change', function() {
    //How to 
    });

Answer 1

看看这篇文章，他们会准确地解释你的需求： https://hacks.mozilla.org/2012/02/saving-images-and-files-in-localstorage/

但是，他们使用canvas + toDataUrl（）将图像数据从Blob转换为数据URL，而不是base64编码。

小心从外部网站加载的图像，crossOrigin策略可能会引发安全性错误。 （见22710627）

$ vim -q mylog

希望这可以帮助你：）

Answer 2

How to convert image into base64 string using javascript

您可以使用HTML5：

创建一个画布，将图像加载到画布中，然后使用toDataURL（）获取base64表示（实际上，它是一个数据：URL，但它包含base64编码的图像）。

然后将此数据保存到lcoalStorage：

localStorage.setItem('imgBase64', this.yourVariable);