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

Question

我试图在调整大小或添加一些效果后从画布保存图像，但我无法保存画布的可见区域，它始终保存完整的图像是否有任何方式我只能保存可见部分使用php或javascript或其他任何内容绘制任何内容

我正在使用jquery和php来保存图像，但同样的事情

    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');

这就是我现在要做的事情

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

Answer 1

仅限客户解决方案：

1. 创建大小合适的第二个画布（或者您可以从页面调整hiddon大小）
2. 使用第二个画布的画布上下文功能ctx.drawImage（canvas1，sx，sy，sw，sh，dx，dy，dw，dh）
3. 在第二个画布上使用.toDataURL（“image / png”）代码