1
다음 코드는 .png 이미지를 로컬 하드 드라이브에 저장하거나 로컬 하드 드라이브에서로드 할 수 있어야합니다.javascript blob을 사용하여 로컬 하드 드라이브에서 이미지로드
절약은 (적어도 크롬에) 잘 작동하지만 부하는 잘못된 URL을 생성하고 아무것도 표시하지 .. 좀 도와 정말 감사하겠습니다
! 당신의 FileReader에 대한
<html>
<head>
<title></title>
</head>
<body>
<img id="img" /><br>
<input type="button" value="Save" onclick="onSave()" /><br />
<input type="file" onchange="onOpen(event)" /><br />
<script>
onSave = function() {
var canvas = document.createElement("canvas");
canvas.width = 200;
canvas.height = 200;
var ctx = canvas.getContext("2d");
ctx.fillRect(0, 0, 100, 150);
var dataURL = canvas.toDataURL("image/png");
var img64 = dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
var binaryImg = atob(img64);
var length = binaryImg.length;
var ab = new ArrayBuffer(length);
var ua = new Uint8Array(ab);
for (var i = 0; i < length; i++) {
ua[i] = binaryImg.charCodeAt(i);
}
var blob = new Blob([ab]);
var a = document.createElement("a");
a.download = 'Blob_img';
a.innerHTML = "Download File";
a.href = window.webkitURL.createObjectURL(blob);
a.style.display = 'none';
document.body.appendChild(a);
a.click();
};
onOpen = function (event) {
var fileReader = new FileReader();
fileReader.onload = function (event) {
var ab = event.target.result;
var ua = new Uint8Array(ab);
var binaryImg;
for (var i = 0; i < ua.length; i++) {
binaryImg += String.fromCharCode(ua[i]);
}
var img64 = btoa(binaryImg);
var image = new Image();
image.src = 'data:image/png;base64,' + img64;
var img = document.getElementById('img');
img.src = image.src;
}
fileReader.readAsArrayBuffer(event.target.files[0]);
};
</script>
</body>
</html>
'toDataURL'을 호출 한 후에는 base64 인코딩 이미지가 있어야합니다. 'atob' *으로 다시 인코딩 할 필요는 없습니다. – Pointy
@Pointy 의견이 맞지 않습니다. 이 줄이 없으면 오류가 발생합니다. ** 'atob'failed : 디코딩 할 문자열이 올바르게 인코딩되지 않았습니다. ** – 31415926
* 또는 * 디코드 할 필요가 없습니다. 바이트를 저장 한 다음 코드로 다시 작성하십시오. 하고있다. 그러나, 그것은 아무 것도 해치면 안됩니다. 그것은 단지 필요하지 않습니다. – Pointy