JPEG file not opening after creating it with Writefile Api


#1

I am creating a JPEG image with writeFile.

It is giving me success on this and creating an jpeg image in the directory.

But when I open that file manually by going into that directory it gives me error that

“Oops! Couldn’t load this image”

this.file.writeFile(cordova.file.externalDataDirectory,"image.jpg",blob,true).then(succ=>{
               console.log("File Write : ",succ)
},err=>{
             console.log("File Write Error : ",err)
})

How can I solve this problem or any one can guide me what is the other method to create an jpeg image in ionic.


#2

What is this?

What is this?

Are you using Ionic Native? If not, why not?


#3

Yes I am using ionic native
File Api
link: https://ionicframework.com/docs/native/file/

cordova.file.externalDataDirectory is the directory where I want to store the file

link: https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-file/


#4

Then you post was in the wrong category.

The code posted above gives you what exactly in the console?
What is blob? Log it to console and paste here.


#5

console of blob :


#6

How do you create that blob?
Try writing a simple txt file with a string in it and see if that works.


#7

writeFile Api creates .txt file and .docx file.

but when we create .pdf file and .jpeg file it gives success. But when we try to open it it gives error on pdf that “Invalid Format " and on jpeg image it gives " Oops! Couldn’t load this image”.

I tried to open these file manually and by programmatically. but the error was same.


#8
var contentType="image/jpeg";
        var slizeSize=512;
         var URI = succ.URI;
         var block = URI.split(";");

         // var dataType = block[0].split(":")[1];
          // In this case "image/png"
          var realData = block[1].split(",")[1];
          // In this case "iVBORw0KGg...."
        //  console.log("Real Data : ", realData)
          var byteCharacters = decodeURI(realData);

      //  console.log("Byte Character : ",byteCharacters)
        var byteArrays = [];
        for (var offset = 0; offset < byteCharacters.length; offset += slizeSize) {
            var slice = byteCharacters.slice(offset, offset + slizeSize);

            var byteNumbers = new Array(slice.length);
            for (var i = 0; i < slice.length; i++) {
                byteNumbers[i] = slice.charCodeAt(i);
            }

            var byteArray = new Uint8Array(byteNumbers);

            byteArrays.push(byteArray);
        }
        var blob = new Blob(byteArrays, {type: contentType});
         console.log("Blob : ",blob);

This is how I am creating a blob
"succ.URI" is the base64 image data


#9

Download the files and look at them in a text editor. Something is broken, but I would say it is probably with the blob you are writing, not the plugin. Can you maybe read in a working image and write it into a new file?