ввод файла в блоб с использованием canvas - PullRequest
Новая
       10

ввод файла в блоб с использованием canvas

2 голосов
/ 12 января 2020

невозможно вставить BLOB-объект в indexedDB, пожалуйста, укажите при вставке BLOB-объекта из файла в indexedDB:)

CODE 

    <html>
      <head>
        <title>file to BLOB</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      </head>
    <body>
      <div id="test">
        <input id="File" type="file" accept="image/*" capture="user">
      </div>
    </body>
    </html>
<script src="js/idbConn.js"></script>

Javascript

<script>
    $(document).ready(function(){
      $("#File").change(function(){
      const File = this.files[0];
      const cvs = document.createElement("canvas");
      const optBlob = cvs.toBlob(function(cvsBlob){
        let fileURL = URL.createObjectURL(File);
        let imgFile = new Image();
        let imgFile.src = fileURL;
        imgFile.onload = function(){
          cvs.width = imgFile.naturalWidth;
          cvs.height = imgFile.naturalHeight;
          let ctx = cvs.getContext("2d").drawImage(imgFile,0,0);
          URL.revokeObjectURL(fileURL);
        }
      },File.type,0.3);
      const data = new Object();
      data.blob = optBlob;
      let trx = db.transaction(["imgBlobs"],"readwrite").objectStore("imgBlobs").put(data,"test.jpeg");
      });
    });
</script>

пытается напрямую вставить файл в indexedDB, но BLOB-объект как неопределенный

, если cvsBlob хранится в data.blob, пустое изображение сохраняется в indexedDB

1 Ответ

0 голосов
/ 13 января 2020

Есть несколько проблем.

  • HTMLCanvasElement.toBlob ничего не возвращает. Вы получаете блоб в функции обратного вызова.
  • JavaScript блокирует, события из поставленных в очередь задач (например, обратный вызов toBlob) (например, onload) не будут выполняться, пока не вернется текущее выполнение. Это означает, что строка const data = new Object(); запускается до вызова обратного вызова toBlob.
  • Вы вызываете toBlob до того, как создали, загрузили и нарисовали изображение на холсте.
  • let imgFile.src = fileURL; Эта строка выдаст синтаксическую ошибку ??

Исправление

  • Сначала загрузите изображение.
  • При загрузке изображения создайте холст и нарисуйте на нем изображение.
  • Отмените URL-адрес изображения.
  • Преобразуйте холст в BLOB-объект.
  • В обратный вызов toBlob добавляет большой двоичный объект в БД.

Пример

Вызов функции с файлом, полученным из файла ввода. Например $("#File").change(function() { saveImageToDB(this.files[0]) });

function saveImageToDB(file) {
    const fileURL = URL.createObjectURL(file);
    const img = new Image();
    img.src = fileURL;
    img.addEventListener("load", () => {
        URL.revokeObjectURL(fileURL);
        const cvs = document.createElement("canvas");
        cvs.width = img.naturalWidth;
        cvs.height = img.naturalHeight;
        cvs.getContext("2d").drawImage(img, 0, 0);
        cvs.toBlob(blob => {
            // Code to add blob to database. Put your db code in here
            db.transaction(["img"], "write").objectStore("imgs").put({blob}, file.name);
        }, File.type, 0.3);
    }, {once: true});
}
...