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

Question

我想做的事...

1. 用户点击“上传图片”按钮
2. 用户从本地计算机选择图像
3. 图片已上传至页面
4. 图像存储在本地存储
5. 用户可以离开 View ，然后返回到 View 并查看之前上传的图像。
6. 重复步骤 1 - 5

我认为我如何才能实现它......

1. 用于管理用户上传的 ng-flow 插件
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>   

我的 Controller - 到目前为止...

angular.module ( 'myApp' )
.controller (
'ProtectedCtrl', function ($localStorage, $scope)
{
    var myImage = [];

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

我可以选择图像并在页面上预览它们，当我检查页面时，图像 src 已转换为 Base 64。从这一点开始，我就陷入了如何获取 Base 64 字符串并存储它的困境。

对于新手帖子感到抱歉，任何提示或指示将不胜感激。

提前致谢!

Answer 1

我最近读了一篇出于同样目的的文章，对图像执行此操作的一种方法是加载到 Canvas 元素中。然后，使用 Canvas ，您可以将 Canvas 中的当前视觉表示形式读出为数据 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/