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

【问题标题】：save canvas as image only visible area将画布保存为仅图像可见区域
【发布时间】：2012-01-22 13:36:24
【问题描述】：

我试图在调整图像大小或在其上添加一些效果后从画布中保存图像，但我无法保存画布的可见区域它一直保存完整图像有什么方法可以只保存可见部分用 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/

【问题讨论】：

使用canvas.viewport(0, 0, canvas.width, canvas.height)。
您始终可以在保存之前使用 PHP 在服务器端裁剪图像。发送 Div "Box" 的高度和宽度，并使用它使用 GD 裁剪图像。 ` // 创建具有新宽度和高度的新图像。 $dest = imagecreatetruecolor($boxWidth, $boxHeight); `

标签： php javascript jquery html canvas

【解决方案1】：

仅客户端解决方案：

创建第二个大小合适的画布（或者您可以调整页面中隐藏的画布的大小）
使用第二个画布的画布上下文函数 ctx.drawImage(canvas1, sx, sy, sw, sh, dx, dy, dw, dh)
在第二个画布上使用您的 .toDataURL("image/png") 代码

【讨论】：