javascript - 使用 blob 通过 Javascript 将图像存储为文件

Question

我正在处理这个项目，在使用 AWS S3 托管图像时遇到了一些问题。所以我转而决定将图像存储为 Blob，让 Javascript 完成将文件转换成 Blob 和从 Blob 转换出来的工作，这样我就可以使用 AJAX 和 API 将它存储在我们的数据库中。虽然这可能不太理想，但我仍在学习 Javascript 并且没有经常使用 blob，所以我想为什么不呢，是时候学习了。

我的问题是，当我尝试使用 DataURI 在页面上显示图像时，它显示为字符串而不是 DataURI，因此加载为损坏的图像。我还没有在 ajax 中工作，因为我认为最好拍摄图像，将其转换为 ascii 字符串，将其放入 blob 中，然后在涉及 API/服务器之前将其取回。这是我的 html:

{% extends 'mp_app/base.html' %}
{% load staticfiles %}
{% block content %}
<div id="page-wrapper">
    <pre id="fileDisplayArea"></pre>
     <form  id="picForm" method='post'>
       {% csrf_token %}
       <input type="file" id='imgFile' name="pic" accept="image/*">
       <input type="submit" id='submitBtn'>
      <input type="submit" id="showBtn">
    </form>
 <div id="imageDisplay"></div>
 </div>
{% endblock %}
{% block javascript %}
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script type="text/javascript" src="{% static 'js/blob.js' %}"></script>
{% endblock %}

和我的 Javascript

//js file to turn an image into a blob, then store the blob in our API.
// next: retrive the blob and put it on the page

function textToImg(text) {
//get ascii string into binary then into an array then into a blob.
//had some strange issues using ArrayBuffer()
var file = new 
Array(atob(document.getElementById('fileDisplayArea').innerText));
file = new Blob(file, {type:'image/*'});
let displayArea = document.getElementById('imageDisplay')

//currently doesn't seem to be loading as a DataURL. It's type is string and 
//shows up as a broken image.
var reader = new FileReader();
reader.onload = function(event) {
var content = event.target.result;
img = new Image();
img.src = content;
displayArea.append(img)
console.log(img);
}
reader.onerror = function(event) {
   console.error('error, file could not be read: ' + 
   event.target.error.code);;
}
reader.readAsDataURL(file);
// TODO get data via ajax to our DB our restful API
}

//turns an image into a blob
function imgToText() {
// get file elem and get image
let file = document.getElementById('imgFile');
let img = document.getElementById('imgFile').files[0];
let displayArea = document.getElementById('fileDisplayArea');

//open a file reader and read in file, then turn it from binary to ascii
var reader = new FileReader();

reader.onload = function(event) {
    let contents = event.target.result;

    //turn to ascii string
    let asciiContents = btoa(contents);

    //add ascii string to form
    let form = {
        'file': asciiContents,
    }
    displayArea.append(form.file);
};

reader.onerror = function(event) {
    console.error('error, file could not be read');
}

//read file as a bit string
reader.readAsBinaryString(img);

// TODO send data via ajax to our DB our restful API
};

//add click event so that image is processed upon submit
$('#submitBtn').click(function(event) {
    event.preventDefault();
    imgToText();
 });

$('#showBtn').click(function(event) {
    event.preventDefault();
    textToImg();
})

img src 读取为 blob 字符串让我觉得 DataURI 有问题，也许它没有以正确的格式获取文件。我无法发布屏幕截图，因为我需要更好的声誉。抱歉，这太冗长了，但我想尝试发表一篇高质量的文章。谢谢!

Answer 1

我解决了这个问题。将在此处发布，供 future 可能需要此选项的学习者使用。

textToImg() 已经有了它需要的字符串，所以你需要做的就是获取字符串，将它添加到文件输入元素中，(我将它添加为“值”属性)，然后让 image.src = 'data:image/*;base64, + 值属性。你可以开始了。