我在我的 Canvas 中使用 HTML5 创建了一个图像并保存了它。我的代码看起来像这里的代码,在这个例子中: http://www.worldofwebcraft.com/page.php?id=101&t=HTML5_use_php_and_ajax_to_save_canvas_as_png_on_your_server
我的问题是,当我保存我的图像时,它会保存整个 Canvas ,而不仅仅是其中有绘图的部分。因此,我在图像后面得到了一个具有大透明背景的图像,并且图像从 50x50 变为 100x100。
有没有办法在将数据发送到 php 文件之前在 JavaScript 站点中或在保存图像后在 PHP 文件中 trim 这个透明背景?
提前致谢
最佳答案
如果你知道你想要 Canvas 的哪一部分。您可以创建一个新的 Canvas 元素并使其大小适合您,然后在新 Canvas 上绘制一些您想要的图像,然后对第二个较小的 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
关于php - 使用 PHP 或 javascript trim 在 Canvas 中绘制的图像的透明背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8358330/