Javascript 如何上传图像并存储在本地存储（angularjs）

我想做什么…

用户单击“上载图像”按钮

用户从本地计算机选择图像

图像已上载到页面

图像存储在本地存储器中

用户可以导航离开视图，然后返回视图并查看以前上载的图像

重复步骤1-5

我认为我能如何实现它…

ng flow插件用于管理用户上传

将图像转换为base64并将图像作为字符串存储在本地存储器中

获取base64字符串并将其转换为图像进行预览

我为什么要这样做…

对于第1阶段，我需要向我的导师展示我的应用程序将如何工作，所以我只需要模拟存储在数据库中的图像，这就是我使用本地存储的原因-我知道这是一种不好的做法，但我还需要展示本地存储的使用

我的导师鼓励我使用堆栈溢出，并且知道我发布了这个

到目前为止的代码…

我的看法

我可以选择图像并在页面上预览它们，当我检查页面时，图像src已转换为base 64。从这一点开始，我一直在研究如何获取base 64字符串并存储它

很抱歉这篇新秀文章，任何提示或建议都将不胜感激

---

提前谢谢

我最近读了一篇文章，也是出于同样的目的，其中一种方法是将图像加载到画布元素中。然后，使用画布，可以将画布中的当前视觉表示作为数据URL读取。下面是代码片段

// Get a reference to the image element
   var elephant = document.getElementById("elephant");

// Take action when the image has loaded
 elephant.addEventListener("load", function () {
var imgCanvas = document.createElement("canvas"),
    imgContext = imgCanvas.getContext("2d");

// Make sure canvas is as big as the picture
imgCanvas.width = elephant.width;
imgCanvas.height = elephant.height;

// Draw image into canvas element
imgContext.drawImage(elephant, 0, 0, elephant.width, elephant.height);

// Get canvas contents as a data URL
var imgAsDataURL = imgCanvas.toDataURL("image/png");

// Save image into localStorage
try {
    localStorage.setItem("elephant", imgAsDataURL);
}
catch (e) {
    console.log("Storage failed: " + e);
}
}, false); 

---

DataURL是base64字符串，因为localstorage无法直接存储图像，并且在localstorage中存储图像并不常见。但我可能错了。但是，这里有一个链接将进一步帮助您

在询问之前，显示您自己尝试这样做的JavaScript代码片段在哪里？

localStorage

只允许存储5mb的文本数据。您确定要在那个里存储图像吗？以前也有人问过这个问题，看一看，它可能会对您有所帮助@StephanBijzitter我真的不知道从哪里开始。。。我得到了这个

code.module（'myApp'）.controller（'ProtectedCtrl'，function（$scope，$localStorage）{$scope.$storage=$localStorage；}）@c-smile不，不是真的，我只是想看看本地存储是如何工作的，然后用它来测试第一阶段@ShubhamAggarwal谢谢！
angular.module ( 'myApp' )
.controller (
'ProtectedCtrl', function ($localStorage, $scope)
{
    var myImage = [];

    $localStorage.myImage = document.getElementById('image-handle');
    console.log($localStorage.myImage);
});

// Get a reference to the image element
   var elephant = document.getElementById("elephant");

// Take action when the image has loaded
 elephant.addEventListener("load", function () {
var imgCanvas = document.createElement("canvas"),
    imgContext = imgCanvas.getContext("2d");

// Make sure canvas is as big as the picture
imgCanvas.width = elephant.width;
imgCanvas.height = elephant.height;

// Draw image into canvas element
imgContext.drawImage(elephant, 0, 0, elephant.width, elephant.height);

// Get canvas contents as a data URL
var imgAsDataURL = imgCanvas.toDataURL("image/png");

// Save image into localStorage
try {
    localStorage.setItem("elephant", imgAsDataURL);
}
catch (e) {
    console.log("Storage failed: " + e);
}
}, false);