How to resize the image before base64 conversion

Question

In my sencha based application i want to convert the image into base64,Before that i want to resize the original one.Here the code which i have used to convert base64

function getBase64FromImageUrl(URL)
{
var img = new Image();
img.style.width = '5%',
img.style.height = '5%',
img.src = URL;
img.onload = function ()
{
    var canvas = document.createElement("canvas");
    canvas.width =this.width;
    canvas.height =this.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(this, 10, 10);
    var dataURL = canvas.toDataURL("image/jpg");
    if(App.gvars.userpic=='1')
    {
    cdd=dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
    }
    if(App.gvars.userpic=='2')
    {
    c=dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
    }
   }
}

How to resize or redimension the image before conversion?I have tried with changing img.style.width and hieght but there is no change at all.Please help me

Answer 1

Per devnull69's suggestion, simply use drawImage() to resize the image when you add it into the canvas.

See the API at either W3Schools or MSDN .

You can even play with the values in a live-coding example at Html5CanvasTutorials