자바 스크립트를 통해 이미지를 파일로 저장하기 위해 블롭 사용

Question

저는이 프로젝트를 진행 중이며 AWS S3를 사용하여 이미지를 호스팅하는 데 어려움을 겪고 있습니다. 그래서 이미지를 Blob로 저장하고 Blob로 파일을 변환하는 작업을 Javascript가하도록하기 위해 AJAX와 API를 사용하여 DB에 저장할 수있게되었습니다. 이것이 이상적이지는 않지만, 나는 여전히 자바 스크립트를 배우고 있고, 많은 것들을 다루지 않았기 때문에, 왜 배우지 못한지 알게되었습니다.

내 문제는 DataURI를 사용하여 페이지의 이미지를 표시하려고 할 때 DataURI가 아닌 문자열로 나타나므로 깨진 이미지로로드된다는 것입니다. 아직 아약스에서 일한 적이 없다. 이미지를 가져 와서 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 %} 

내 자바 스크립트

//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'속성으로 추가). 그러면 image.src = 'data : image/*; base64, + value attr. 그리고 너는 가야한다.