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

Question

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

我的问题是，当我尝试使用 DataURI 在页面上显示图像时，它显示为字符串而不是 DataURI，因此加载为损坏的图像。我还没有在 ajax 中工作，因为我认为最好拍摄图像，将其转换为 ascii 字符串，将其放入 blob 中，然后在涉及 API/server 之前将其取出。这是我的 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 有问题，也许它没有以正确的格式获取文件。我无法 post 截图，因为我需要更好的声誉。抱歉，这太冗长了，但我想尝试制作一个质量 post。谢谢！

Answer 1

我解决了这个问题。将 post 提供给未来可能需要此选项的学习者。

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

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

Using blobs to store images as files via Javascript

javascript

ajax

base64

blob

image