将画布保存为仅可见区域的图像

Question

i am trying to save an image from canvas after resizing it or adding some effects on it but i am unable to save the visible area of canvas it save full image all the time is there any way i can save only visible part of canvas whatever is in it with php or javascript or anything else

i am using jquery and php to save image from but same thing

    var canvasData = canvas.toDataURL("image/png");
var postData = 'canvasData='+canvasData;
var ajax = new XMLHttpRequest();
ajax.open('POST','http://localhost/canvas/imagesaver.php',true);
ajax.setRequestHeader('Content-Type', 'canvas/upload');

here is what i am trying to do right now

http://jsfiddle.net/BPmb5/1/

Answer 1

only client solution:

1. create second canvas of the right size (or you might resize a hiddon one from your page)
2. use the canvas context function of second canvas ctx.drawImage(canvas1, sx, sy, sw, sh, dx, dy, dw, dh)
3. use your .toDataURL("image/png") code on second canvas