Forum | Appery.io

I used below code to reduce image size before uploading by using "canvas". This code works fine when I test app using chrome browser however, it doesn't works when I test App in IOS App tester. I think canvas is not supported in IOS browser.
is there any solution to fix this problem or different way to reduce image size?

function el(id){return document.getElementById(id);} // Get elem by ID

function readImage() {

var fileInput = this.files[0];

if (fileInput.type.match('image/jpeg') || fileInput.type.match('image/png'))
{

 if ( this.files && this.files[0] ) { 
     var FR= new FileReader(); 
     FR.onload = function(e) { 
          var img3=el("img3") ; 
         // var img3 = document.createElement("img6"); 

          img3.src = e.target.result; 

       // alert(img); 

         //  alert(img3.src.length/(1.333*1024)); 

           var canvas = document.createElement("canvas"); 

          var ctx = canvas.getContext("2d"); 

ctx.drawImage(img3, 0, 0);

          var MAX_WIDTH = 400; 

var MAX_HEIGHT = 370;
var width = img3.width;
var height = img3.height;

if (width height) {
if (width MAX_WIDTH) {
height *= MAX_WIDTH / width;
width = MAX_WIDTH;
}
} else {
if (height MAX_HEIGHT) {
width *= MAX_HEIGHT / height;
height = MAX_HEIGHT;
}
}
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img3, 0, 0, width, height);

var dataurl3 = canvas.toDataURL("image/png");

// var datax = 'image=' + dataurl;
var datax3 = dataurl3;

         //  alert(datax3.length/(1.333*1024)); 

//e.target.result=dataurl;

//alert(dataurl.src);

        // document.getElementById('image_preview').src = dataUrl;     

//alert(img.src.length);

var fd = new FormData();
fd.append("image", dataurl3);

//alert(fd);

       //   alert(img.src); 
         //   el("base").innerHTML = e.target.result; 

       var imageSize3= (datax3.length)/(1.333*1024); 

      zzero = 0; 
                                                                             localStorage.setItem("elength3", zzero);  

                                                                 localStorage.setItem("htmlvar3", datax3);  

                                                                             localStorage.setItem("elength3", imageSize3);  

img3.src ='';

     };        
      FR.readAsDataURL( this.files[0] ); 

 } 

 } 
 else 
 { 

 } 

}

el("asd3").addEventListener("change", readImage, false);

Hello -

Have you tested this code running on actual iOS device?

If you on Mac you can debug your app in the Safari browser running your app on the device as a web app.

I have tested the App in Mac Safari browser and in Xcode and I installed the App (.APK) android Device it did not work as expected.

It Just works fine in chrome browser.

The below pic is the screenshot of the output "empty" of "Canvas" in Safari, Xcode

"var dataurl3 = canvas.toDataURL("image/png"); "

However, there is Data output in Chrome browser.

I think the issue because of not supporting the bind() method. However, i couldn't fix it.

Chrome output

Hello,

Please use this sollution how to reduce image's size before uploading it to the server: http://stackoverflow.com/questions/20...

same issue it didn't work

It is a custom logic, which we need to debug on your app. Unfortunately this is something outside the scope of standard Appery.io platform support. You may consider purchasing Advisory Pack to get more in-depth help on this question. Here is more information about Advisory Pack (http://appery.io/services/#Advisory_Pack).