Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.06.2019, 16:42
Интересующийся
Отправить личное сообщение для NiOl Посмотреть профиль Найти все сообщения от NiOl
 
Регистрация: 11.06.2017
Сообщений: 15

Как загружать изображения через .readAsArrayBuffer
Для простой обработки картинок пытаюсь сделать загрузку в страничку без работы с сервером. При ээтом через 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>
Ответить с цитированием
  #2 (permalink)  
Старый 17.06.2019, 17:37
Аватар для Alexandroppolus
Профессор
Отправить личное сообщение для Alexandroppolus Посмотреть профиль Найти все сообщения от Alexandroppolus
 
Регистрация: 25.10.2016
Сообщений: 690

Забудь про FileReader, кури до посинения URL.createObjectURL / URL.revokeObjectURL

Последний раз редактировалось Alexandroppolus, 17.06.2019 в 19:54.
Ответить с цитированием
  #3 (permalink)  
Старый 18.06.2019, 23:17
Интересующийся
Отправить личное сообщение для NiOl Посмотреть профиль Найти все сообщения от NiOl
 
Регистрация: 11.06.2017
Сообщений: 15

Спасибо за правильную подсказку, все очень просто и даже на телефоне работает, правда с оговорками, файл-манагер при выборе файла лагает, загрузить удалось только через Галерею.
<!DOCTYPE html>
<html><head><meta charset="windows-1251"></head>

<body style="text-align:center;">
<canvas id="Src"></canvas>
<div id="SrcImgProp"></div>
<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]);"> <!-- multiple -->

<script>
function Load(FN) {
  if (!FN.type.startsWith('image/')){alert('Sorry, "+FN.name+" not an image file!');return;}
  let cL=document.getElementById("Src");cL.innerHTML="";
  const sImg=document.createElement("img");sImg.src=window.URL.createObjectURL(FN);
  sImg.onload=function() {
    let w=sImg.width;
    let h=sImg.height;
    cL.width=w;cL.height=h;
    let ctx=cL.getContext('2d');ctx.drawImage(sImg,0,0);
    document.getElementById("SrcImgProp").innerHTML=FN.name+": "+sImg.width+"x"+sImg.height+" "+FN.size+" bytes.";
    const sData=ctx.getImageData(0,0,w,h).data;
    console.log(sData);
    window.URL.revokeObjectURL(this.src);
    };
  };
</script>

</body></html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как передать php массивы через ajax Evsik AJAX и COMET 11 11.07.2015 06:32
Как загружать zip в ie8? mr_virtus Angular.js 3 08.05.2015 14:19
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 11:29
Как заставить Оперу не кэшировать изображения? frutality Серверные языки и технологии 0 14.08.2013 17:30
Как правильно загрузить через framework Mateus jQuery 5 11.01.2013 18:08