Для простой обработки картинок пытаюсь сделать загрузку в страничку без работы с сервером. При ээтом через readAsDataURL получается, но телефон не тянет, да и на компе полноразмерные фотки сильно тормозят, а через readAsArrayBuffer просто не получается, его как-то иначе нужно использовать, а как - не могу найти инфу.
<!DOCTYPE html>
<html><head>
<meta charset="windows-1251">
<script>
function Load(FN) {
if (!FN.type.startsWith('image/')){alert('Sorry, '+FN.name+' not an image file!');return;}
let File=new FileReader();
File.onload=function(e){document.getElementById("sImg").src=this.result;};
File.onerror=function(e){alert("Error Loading File: "+e.target.error.code);};
// Так работает, но валится на полноразмерных фотках
*!*File.readAsDataURL(FN);*/!*alert('Пауза, через readAsDataURL работает:');alert(document.getElementById("sImg").src+' /r/n');
// А так НЕ работает, содержимое img.src явно некоректное! Н: "file:///D:/FileProbe/[object%20ArrayBuffer]"
*!*File.readAsArrayBuffer(FN);*/!*alert('Пауза, через readAsArrayBuffer Не работает:');alert(document.getElementById("sImg").src+' /r/n');
}
</script>
</head>
<body>
<img id="sImg">
<button onclick="document.getElementById('RepeatTxt').style.display='inline';document.getElementById('SrcFN').click();">Load <span id="RepeatTxt" style="display:none">another</span> picture... </button><input id="SrcFN" type="file" style="display: none;" onchange="Load(this.files[0]);">
</body></html>