Question

I have created an image in my Canvas with HTML5 and I saved it. My code looks like the one here, in this example:
http://www.worldofwebcraft.com/page.php?id=101&t=HTML5_use_php_and_ajax_to_save_canvas_as_png_on_your_server

My problem is that when I save my image, the whole canvas it is saved and not only the part of it that has a draw on it. So I get an image with a big, transparent background, behind my image, and the image instead of be 50×50 for example, becomes 100×100.

Is there a way to trim this transparent background, either in the JavaScript site, before send the data to the php file, or in the PHP file, after save the image?

Thanks in advance

Answer 1

If you know what part of the canvas you want. You can create a new canvas element and make it the right size for you and then draw bit of the image you want onto the new canvas and then just do the same thing you are doing but for the second smaller canvas.

var smallCanvas = document.createElement('canvas');
smallCanvas.width = somewidth
smallCanvas.height = someheight
var smCtx = smallCanvas.getContext('2d');
smCtxdrawImage(oldCanvas, sx, sy, sw, sh, dx, dy, dw, dh)

takes an oldCanvas, clips it to the rectangle(sx, sy, sw, sh), scales it to dimensions (dw, dh), and draws it on the smallCanvas at coordinates (dx, dy).

EDIT:
As per my comment here is a Jquery plugin that does what I have been suggesting.
Here