Blob을 base64로 변환
이것은 내가 원하는 코드의 조각이다 Blob
에 Base64
문자열 :
이 주석 처리 된 부분은 작동하며 이것에 의해 생성 된 URL이 img src로 설정되면 이미지가 표시됩니다.
var blob = items[i].getAsFile();
//var URLObj = window.URL || window.webkitURL;
//var source = URLObj.createObjectURL(blob);
//console.log("image source=" + source);
var reader = new FileReader();
reader.onload = function(event){
console.log(event.target.result)
}; // data url!
var source = reader.readAsBinaryString(blob);
문제는 하위 코드에 있으며 생성 된 소스 변수가 null입니다.
최신 정보:
위의 코드에서와 같이 Blob 파일에서 Base64 String을 만들 수 있도록 JQuery로이 작업을 수행하는 더 쉬운 방법이 있습니까?
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function() {
var base64data = reader.result;
console.log(base64data);
}
양식 문서의 readAsDataURL
베이스 64로 인코딩을
이것은 나를 위해 일했습니다.
var blobToBase64 = function(blob, callback) {
var reader = new FileReader();
reader.onload = function() {
var dataUrl = reader.result;
var base64 = dataUrl.split(',')[1];
callback(base64);
};
reader.readAsDataURL(blob);
};
따라서 문제는 기본 64 이미지를 업로드하고 blob URL이 있다는 것입니다. 이제 모든 html 5 브라우저에서 작동하는 대답은 다음과 같습니다.
var fileInput = document.getElementById('myFileInputTag');
var preview = document.getElementById('myImgTag');
fileInput.addEventListener('change', function (e) {
var url = URL.createObjectURL(e.target.files[0]);
preview.setAttribute('src', url);
});
function Upload()
{
// preview can be image object or image element
var myCanvas = document.getElementById('MyCanvas');
var ctx = myCanvas.getContext('2d');
ctx.drawImage(preview, 0,0);
var base64Str = myCanvas.toDataURL();
$.ajax({
url: '/PathToServer',
method: 'POST',
data: {
imageString: base64Str
},
success: function(data) { if(data && data.Success) {}},
error: function(a,b,c){alert(c);}
});
}
var audioURL = window.URL.createObjectURL(blob);
audio.src = audioURL;
var reader = new window.FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function () {
base64data = reader.result;
console.log(base64data);
}
다음과 같이 문제를 해결할 수 있습니다.
var canvas = $('#canvas');
var b64Text = canvas.toDataURL();
b64Text = b64Text.replace('data:image/png;base64,','');
var base64Data = b64Text;
도움이 되었기를 바랍니다.
한 줄의 코드로 가장 쉬운 방법
var base64Image = new Buffer (blob, 'binary') .toString ( 'base64');
(async () => console.log(btoa(await new Response(blob).text())))();
또는
new Response(blob).text().then(t => console.log(btoa(t)))
see Response's constructor, you can turn [blob, buffer source form data, readable stream, etc.]
into Response, which can then be turned into [json, text, array buffer, blob]
which async method/callbacks.
참고URL : https://stackoverflow.com/questions/18650168/convert-blob-to-base64
'Programing' 카테고리의 다른 글
GoogleTest : 테스트를 건너 뛰는 방법? (0) | 2020.08.16 |
---|---|
Rails 애플리케이션의 쿠키 오버플로? (0) | 2020.08.16 |
오이 단계 재사용 (0) | 2020.08.16 |
Authenticode를위한 대체 타임 스탬프 서비스 (0) | 2020.08.14 |
CDN이 실패 할 경우 로컬 스타일 시트 (스크립트 아님)로 대체하는 방법 (0) | 2020.08.14 |