如何上传图像并存储在本地存储(angularjs)中

Question

我想做什么…

1. 用户点击"上传图像"按钮
2. 用户从本地机器中选择图像
3. 图像已上载到页面
4. 图像存储在本地存储器中
5. 用户可以导航离开视图，然后返回视图并查看以前上传的图像
6. 重复步骤1-5

我认为我可以如何实现…

1. ng流插件管理用户上传
2. 将图像转换为base64并将图像作为字符串存储在本地存储器中
3. 获取base64字符串并将其转换为图像进行预览

我为什么要这样做…

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

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

到目前为止的代码…

我的看法

<!-- Upload multiple images with the extensions of png,jpg, jpeg & gif -->
<div flow-init="{target: '/upload', singleFile: false}" flow-file-added="!!{png:1,gif:1,jpg:1,jpeg:1}[$file.getExtension()]" flow-files-submitted="$flow.upload()">

    <div class="jumbotron">
        <div class="container">
            <div><span class="btn btn-default btn-selectimage" flow-btn flow-attrs="{accept:'image/*'}" onchange="previewFile()">Select image</span></div>
            <br><p>Only PNG,GIF,JPG files allowed.</p>
        </div>
    </div>

<div>
    <div class="thumbnail" ng-hide="$flow.files.length">
        <img src="images/no-images-placeholder.jpg" />
    </div>
    <div class="thumbnail col-md-3" ng-show="$flow.files.length" ng-repeat="image in $flow.files">
        <img id="image-handle" class="preview-blob" flow-img="image" /><br>
        <img class="preview" ng-src="{{imageStrings[$index]}}"/>
    <div class="image_option_controls">
        <span class="btn glyphicon glyphicon-trash" ng-show="$flow.files.length" ng-click="image.cancel()"></span>
        <span class="btn glyphicon glyphicon-heart pull-right" ng-click="image.like()"></span>
    </div>
    </div>
</div>

</div>   

我的控制器-到目前为止。。。

angular.module ( 'myApp' )
.controller (
'ProtectedCtrl', function ($localStorage, $scope)
{
    var myImage = [];
    $localStorage.myImage = document.getElementById('image-handle');
    console.log($localStorage.myImage);
});

我可以选择图像并在页面上预览，当我检查页面时，图像src已转换为base64。从这一点开始，我被困在如何获得基本64字符串并存储它上

很抱歉收到新手帖子，如有任何提示或建议，我们将不胜感激。

提前感谢！

Answer 1

我最近出于同样的目的读了一篇文章，对图像执行此操作的一种方法是加载到画布元素中。然后，使用画布，您可以将画布中的当前视觉表示读取为数据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中存储图像并不常见。也许我错了。然而，这里有一个链接将进一步帮助您https://hacks.mozilla.org/2012/02/saving-images-and-files-in-localstorage/