Сохранение Canvas в формате JPG и чтение его обратно: Cordova-file-plugin - PullRequest
Новая
       35

Сохранение Canvas в формате JPG и чтение его обратно: Cordova-file-plugin

0 голосов
/ 06 октября 2019

***** РЕШЕНО ******

Я создаю прототип приложения, используя Cordova. У меня проблемы с сохранением BLOB-объекта CANVAS в jpg и его чтением для отображения в теге изображения. Я использую Cordova-file-plugin и следую примеру, приведенному на сайте Apache.

Следуя примеру, приведенному на cordova.apache.org/docs/en/latest/reference/cordova-plugin-file, написали некоторый код, и я просто не могу заставить изображение отображаться. Более того, когда я console.log читаю заднюю часть (функция readFile ниже), я просто получаю размер BLOB как 2. 

    //ACTUAL WRITE FUNCTION 
   function writeToFile(fileName, data) {

    window.resolveLocalFileSystemURL(
      cordova.file.dataDirectory,
      function(directoryEntry) {
        directoryEntry.getFile(
          fileName,
          { create: true },
          function(fileEntry) {
            fileEntry.createWriter(function(fileWriter) {
                console.log(fileEntry);
              fileWriter.onwriteend = function(e) {
                // for real-world usage, you might consider passing a success callback
                console.log('Write of file "' + fileName + '"" completed.')
              }

              fileWriter.onerror = function(e) {
                // you could hook this up with our global error handler, or pass in an error callback
                console.log('Write failed: ' + e.toString())
              }

              //var blob = new Blob([data], { type: 'text/plain' })
              fileWriter.write(data)
            }, errorHandler.bind(null, fileName))
          },

          errorHandler.bind(null, fileName)
        )
      },
      errorHandler.bind(null, fileName)
    )
  }

////READ BACK function and set the src of an Image TAG..
function readFile(path) {
    window.resolveLocalFileSystemURL(path,

    function readBinaryFile(fileEntry) {

            fileEntry.file(function (file) {
                var reader = new FileReader();

                reader.onloadend = function() {

                   // console.log("Successful file write: " + this.result);

                    var blob = new Blob([new Uint8Array(this.result)], { type: "image/jpeg" });
                    console.log( blob);

                    displayImage(blob);
                };

                reader.readAsArrayBuffer(file);

            }, errorHandler);
            }
    );
}
    ........
    .......
    //CANVAS to BLOB and call WriteFile function..
    // 'OutPutCanvas' displays image properly on the page ..
    document.getElementById('OutPutCanvas').toBlob(function(blob){
                          writeToFile(filename, blob);
    },"image/jpeg")

Я ожидаю, что сохраненный файл будет прочитан обратно и отобразит изображение должным образом. Можеткто-нибудь, помогите указать на ошибку, которую я могу совершить?

...