修剪用帆布用PHP或javascript绘制的图像的透明背景

Question

我在我的Canvas中使用HTML5创建了一个图像并保存了它。在这个例子中，我的代码看起来像这里的代码： http://www.worldofwebcraft.com/page.php?id=101&t=HTML5_use_php_and_ajax_to_save_canvas_as_png_on_your_server

我的问题是，当我保存我的图像时，整个画布都会被保存，而不仅仅是它上面有一个绘图的部分。因此，我在图像后面获得了一个背景大而透明的图像，而不是50x50的图像变为100x100。

在保存图像之后，有没有办法在JavaScript站点中，在将数据发送到php文件之前或在PHP文件中修剪这个透明背景？

提前致谢

Answer 1

如果你知道你想要的画布的哪个部分。您可以创建一个新的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)

获取oldCanvas，将其剪辑为矩形（sx，sy，sw，sh），将其缩放为尺寸（dw，dh），并将其绘制在坐标（dx，dy）处的smallCanvas上。

修改 根据我的评论，这里是一个Jquery插件，可以完成我一直在做的建议。 Here