jquery mobile - Image resize with HTML5 Canvas - Distortion -


i'm working on webworks app need resize image upload server. i'm using jquery mobile, app needs run on os6 , up. user can either use camera or select image off device. relevant code follows:

function handleopenedfile(fullpath, blobdata) {             var image = new image();             image.src = fullpath; //path image             image.onload = function () {                 var resized = resizeme(image); // send canvas                 //do stuff dataurl returned resizeme()             };     }  function resizeme(img) {          var canvas = document.createelement('canvas');         var width = math.round(img.width / 2);         var height = math.round(img.height / 2);         canvas.width = width;         canvas.height = height;         var ctx = canvas.getcontext("2d");         ctx.drawimage(img, 0, 0, width, height);         return canvas.todataurl("image/jpeg", 0.8);     } 

i use base64 in dataurl uploading server. images scaled come out garbled. parts of image shifted around , colours come out strange. it's not scaling per se messes image comes out garbled if draw on canvas without scaling.

i've searched both , bb dev forums extensively no luck.

does have idea how fix or have alternative suggestion resizing image upload?

cannot jquery mobile, apps running on os6 or using base64 in dataurl uploading server code function resizeme not place canvas in html document anywhere.

required line added below.

function resizeme(img) {

    var canvas = document.createelement('canvas');     var width = math.round(img.width / 2);     var height = math.round(img.height / 2);     canvas.width = width;     canvas.height = height;     var ctx = canvas.getcontext("2d");     document.body.appendchild(canvas);   //append canvas child body <<<<-----------     ctx.drawimage(img, 0, 0, width, height);     return canvas.todataurl("image/jpeg", 0.8); } 

if line missed out in jsfiddle below no image @ all, scaled image formed. fiddle works on andriod smart phone.

http://jsfiddle.net/fealq/


Comments