javascript - Blank image after resizing in canvas -

i'm trying resize image using canvas method. getting arraybuffer , using upload new image. here's resize method.

function resizeimage(img) {   var perferedwidth = 160;   var ratio = perferedwidth / img.width;   var $canvas = $("#canvastest");   var canvas = $("#canvastest")[0];   canvas.width = img.width * ratio;   canvas.height = img.height * ratio;   var ctx = canvas.getcontext("2d");   ctx.drawimage(img, 0,0,canvas.width, canvas.height);   var imagedata = ctx.getimagedata(0, 0, canvas.width, canvas.height).data.buffer;   return imagedata; } 

the problem once image gets uploaded, it's blank image. not doing correct imagedata not giving me valid buffer. know it's not valid because when convert imagedata base64 string, it's not valid base64 encoded image (image doesn't show when set src it).

i know drawimage method working, have temporarily created canvas in dom , correctly drawing image canvas.

what doing wrong? thanks!