Загрузка изображения javascript с локального жесткого диска с использованием blob

Следующий код должен иметь возможность сохранять и загружать .png изображение на локальный жесткий диск.Загрузка изображения javascript с локального жесткого диска с использованием blob

Saving отлично работает (по крайней мере, в хроме), но загрузка производит неправильный URL и не показывать ничего ..

Немного помощь будет очень признателен!

<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>

источник

2014-01-09 31415926

После вызова 'toDataURL', вы должны уже иметь изображение с кодировкой base64. Вам не нужно будет снова закодировать его с помощью 'atob' * * *. – Pointy

@ Понятия не согласны. без этой строки возникает ошибка: ** «atob» не удалось: строка, подлежащая декодированию, неправильно закодирована. ** – 31415926

Вам не нужно кодировать * или * декодировать - просто сохраните байты, а затем перестройте их в качестве кода делается. Однако это ничего не должно повредить; это просто не нужно. – Pointy

Ваш «нагрузки» обработчик для FileReader объявляется без event параметра. В результате у него не будет доступа к содержимому файла.

 fileReader.onload = function (event) { 
      var ab = event.target.result;

Без этого параметра, символ «событие» будет относиться к параметру функции ограждающей, и что один не будет иметь содержимое файла.

Кроме того, я думаю, что вам не нужно делать кодировку/декодирование base64 через atob и btoa, потому что результаты преобразования содержимого холста в URL-адрес данных в любом случае будут основой base64.

источник

2014-01-09 15:29:38 Pointy

Я добавил параметр параметра, но он не загружает изображение, так что это не единственная проблема. Не могли бы вы привести пример, как использовать его без atob и btoa? – 31415926

@ Qvatra хорошо 'atob' /' btoa' вещь * может быть проблемой, но первое, что нужно сделать, это убедиться, что вы вообще ничего не получаете от читателя. Вы пытались вставить некоторые вызовы 'console.log()' или использовать отладчик и установить контрольные точки? Можете ли вы сказать, правильно ли вы возвращаете данные изображения? – Pointy

В случае, если кто-то интересно, есть более простой способ чтения файла:

FileReader.readAsDataURL

Проверить рабочий пример на https://developer.mozilla.org/en-US/docs/Web/API/FileReader.readAsDataURL.

источник

2014-11-20 13:28:27 qur2

Загрузка изображения javascript с локального жесткого диска с использованием blob

ответ

Смежные вопросы