ブロブを使用して画像をファイルとしてファイルに保存する

Question

私はこのプロジェクトに取り組んでおり、AWS S3を使用して画像をホストしています。だから私はピボットし、画像をBlobとして保存し、Blobにファイルを変換する作業をJavascriptに任せることにしたので、AJAXとAPIを使用してDBに格納することができました。これは理想的ではないかもしれませんが、私はまだJavascriptを学んでいて、たくさんのブロブで作業していないので、なぜ、学ばなくてはいけないのか分かりました。

私の問題は、ページ上のイメージを表示するためにDataURIを使用しようとすると、DataURIではなく文字列として出力されるため、壊れたイメージとして読み込まれることです。私はまだ画像を撮って、ASCII文字列に変換し、ブロブに入れてから、API /サーバを使う前にそれを取り戻す方が良いと思ったので、私はまだAJAXで作業していません。ここに私の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(); 
}) 

ブロブ文字列は、おそらくそれは、ファイルを取得していない、私は何かがDataURIと間違っていると思わせるようのimg srcは読み込み適切なフォーマット。私はスクリーンショットを投稿できませんでした。なぜなら、私はより良い評判が必要だからです。申し訳ありませんが、これはとても冗長ですが、私は質の高い投稿をしようとしたかったのです。ありがとうございました！

Answer 1

私はこの問題を解決しました。このオプションが必要な将来の学習者のためにここに投稿します。

textToImg（）はすでに必要な文字列を持っているので、文字列を取得してファイル入力要素に追加するだけです（これを 'value' attrとして追加します）。次にimage.src = 'data：image/*; base64、+ value attr。そして、あなたは行くのが良いです。