CODEWITHSUNDEEP
javascripthtml
Shoval
Shoval

Reputation: 51

canvas.toDataUrl returns empty, canvas size is not zero

Im writing app in html5 that needs to be work on cell phones, this app uploads an image from the phone to server of my company. Now its working on android and inthe computer, on Iphone its work only when i picture in the front camera, if i get a pic from the back camera I get empty data.

I create an InputElement type file, and event onChange for the input element, that call the function inputFile_onChange that get an ElementEvent el:

    var file = el.target.files[0];
    var reader = new FileReader();
    reader.onloadend = (function(theFile) {return function(e) {
    $('#uploadImage').attr('src',e.target.result);
    $('#uploadImage').css('display','none');
    $($('#uploadImage')[0]).one('load',function(){
    var cvs = document.createElement('canvas');
    $image = $('#uploadImage')[0];
    var savingCanvas = document.createElement('canvas');
    savingCanvas.width = $image.naturalWidth;
    savingCanvas.height = $image.naturalHeight;
    var savingCanvasCtx = savingCanvas.getContext('2d');
    FileUploadApp._globals.drawImage(savingCanvasCtx, $image, 0, 0,    
    savingCanvas.width,savingCanvas.height);
    var newImageData = savingCanvas.toDataURL('image/jpeg', 0.2);
    }).each(function() {if(this.complete) $(this).load();});
     };
    })(file);
    reader.readAsDataURL(file);

I put an alert after the newImageData create and get "data: ," when i look for answer in the web i see that i get this if canvas sizes are 0, but i also print the size - width and hight and both of them are big >1000

Ill be glad to get some help with it.

Upvotes: 2

Views: 1648

Answers (1)

Shoval
Shoval

Reputation: 51

I found the problem, the function canvas.toDataURL return nothing when the canvas is big, I shrink the canvas to 1000 pix and the problem solved

Upvotes: 3

Related Questions