Phonegap - Source image larger on canvas than on html page

I'm using Phonegap to allow a user to select a photo from their library, and then edit it.

When I retrieve the photo using Phonegap, I store the image in an html img element that is already on my page:

  sourceImage = document.getElementById('smallImage');  
  sourceImage.style.display = 'block';  
  sourceImage.src = "data:image/jpeg;base64," + imageData;

Of course, when the photo loads in, it could be larger than the phone screen, so I shrink it down in my img element. I modify the actual img element width and height, not the css properties, and the image is properly displaying on screen (around 288 x 200, rather than the original 1024 x 768). So, my img element is now displaying a picture (as a preview) and when the user advances to the next screen, the image is drawn on a canvas so it can be modified:

sourceImage.onload = function(){  
    myCanvas.drawImage(sourceImage, 0, 0);  
}

开发者_Go百科

The image draws correctly, however, it draws the original 1024 x 768 image retrieved from the library and not the modified, smaller image in the actual img element I am displaying on the page. I'm assuming this is due to the fact that the actual image.src is referencing an image that is 1024 x 768, even though I shrink it down.

I have not found any support for re-sizing images before storing them in phonegap. Does anyone know of way I could modify this image src size so that when I am able to shrink it before drawing it to a canvas? (Please keep in mind the user is loading in pictures on-the-fly from their library. I'd prefer to have a client-side solution, but I've not been able to find one).

---

when you draw the image on canvas you can specify the destination coords on the canvas an the part of the image your like to draw like this:

context.drawImage(image, source_x1, source_y1, source_x2, source_y2, dest_x1, dest_y1, dest_x2, dest_y2);

So you can draw the image in any size you like...