javascript - 데이터 - 이미지 URL을 Base64로 변환하십시오.
javascript image to base64 (4)
이미지 파일을 사용하여 이미지의 URL을 가져 오는 중입니다. 웹 서비스로 보내야합니다. 거기에서 이미지가 내 시스템에 로컬로 저장되어야합니다.
내가 사용하고있는 코드 :
var imagepath = $("#imageid").val();// from this getting the path of the selected image
that var st = imagepath.replace(data:image/png or jpg; base64"/"");
이미지 URL을 BASE64로 변환하는 방법은 무엇입니까?
https://src-bin.com
Answer #1
이 답변보기 : https://.com/a/20285053/5065874 by @HaNdTriX
기본적으로 그는 다음과 같은 기능을 구현했습니다.
function toDataUrl(url, callback) {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
var reader = new FileReader();
reader.onloadend = function() {
callback(reader.result);
}
reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.send();
}
그리고 귀하의 경우에는 다음과 같이 사용할 수 있습니다.
toDataUrl(imagepath, function(myBase64) {
console.log(myBase64); // myBase64 is the base64 string
});
Answer #2
이것은 귀하의 html-
<img id="imageid" src="">
<canvas id="imgCanvas" />
자바 스크립트는 -
var can = document.getElementById("imgCanvas");
var img = document.getElementById("imageid");
var ctx = can.getContext("2d");
ctx.drawImage(img, 10, 10);
var encodedBase = can.toDataURL();
'encodedBase'는 이미지의 Base64 인코딩을 포함합니다.
Answer #3
<input id="inputFileToLoad" type="file" onchange="encodeImageFileAsURL();" />
<div id="imgTest"></div>
<script type='text/javascript'>
function encodeImageFileAsURL() {
var filesSelected = document.getElementById("inputFileToLoad").files;
if (filesSelected.length > 0) {
var fileToLoad = filesSelected[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent) {
var srcData = fileLoadedEvent.target.result; // <--- data: base64
var newImage = document.createElement('img');
newImage.src = srcData;
document.getElementById("imgTest").innerHTML = newImage.outerHTML;
alert("Converted Base64 version is " + document.getElementById("imgTest").innerHTML);
console.log("Converted Base64 version is " + document.getElementById("imgTest").innerHTML);
}
fileReader.readAsDataURL(fileToLoad);
}
}
</script>
Answer #4
let baseImage = new Image;
baseImage.setAttribute('crossOrigin', 'anonymous');
baseImage.src = your image url
var canvas = document.createElement("canvas");
canvas.width = baseImage.width;
canvas.height = baseImage.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(baseImage, 0, 0);
var dataURL = canvas.toDataURL("image/png");
"CORS 사용 가능 이미지"에 대한 추가 정보 : MDN 문서