reduce image size before uploading by using "canvas"

Sat Apr 16, 2016 2:10 pm

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'))
{

Code: Select all

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

Code: Select all

          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;

Code: Select all

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

//e.target.result=dataurl;

//alert(dataurl.src);

Code: Select all

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

//alert(img.src.length);

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

//alert(fd);

Code: Select all

       //   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 ='';

Code: Select all

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

 } 

 } 
 else 
 { 

 }

}

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

Sun Apr 17, 2016 4:26 am

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.

Sun Apr 17, 2016 5:51 am

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

Mon Apr 18, 2016 4:18 pm

Hello,

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

Mon Apr 18, 2016 5:35 pm

same issue it didn't work

Tue Apr 19, 2016 7:27 pm

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