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

【问题标题】：Using blobs to store images as files via Javascript通过 Javascript 使用 blob 将图像存储为文件
【发布时间】：2017-10-02 17:48:51
【问题描述】：

我正在处理这个项目，但在使用 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 有问题，也许它没有以正确的格式获取文件。我无法发布屏幕截图，因为我需要更好的声誉。抱歉，这太冗长了，但我想尝试发表高质量的帖子。谢谢！

【问题讨论】：

TLDR;当我尝试通过 reader.readAsDataURL 在页面上显示我的 img blob 时，长 byte64 字符串由 src 属性读取，而不是显示文件的元数据。

标签： javascript ajax image base64 blob

【解决方案1】：

我解决了这个问题。将在此处为可能需要此选项的未来学习者发布。

textToImg() 已经有了它需要的字符串，所以你需要做的就是获取字符串，将它添加到文件输入元素中，（我将它添加为“值”属性），然后让 image.src = '数据：图像/*；base64，+值属性。你可以走了。

【讨论】：