使用 PHP 或 javascript 修剪在 Canvas 中绘制的图像的透明背景

发布于 2024-12-19 03:34:53 字数 511 浏览 0 评论 0原文

我已经使用 HTML5 在 Canvas 中创建了一个图像并保存了它。我的代码看起来像这里的代码，在本例中： 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 文件中，保存图像之后？

提前致谢

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

花桑 2024-12-26 03:34:53

如果你知道你想要画布的哪一部分。您可以创建一个新的画布元素并使其尺寸适合您，然后将您想要的图像的一部分绘制到新画布上，然后对第二个较小的画布执行与您所做的相同的操作。

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），然后将其绘制在smallCanvas上的坐标（dx，dy）处。

编辑：
根据我的评论，这里有一个 Jquery 插件，它可以完成我一直建议的操作。
这里

If you know what part of the canvas you want. You can create a new canvas element and make it the right size for you and then draw bit of the image you want onto the new canvas and then just do the same thing you are doing but for the second smaller 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)

takes an oldCanvas, clips it to the rectangle(sx, sy, sw, sh), scales it to dimensions (dw, dh), and draws it on the smallCanvas at coordinates (dx, dy).

EDIT:
As per my comment here is a Jquery plugin that does what I have been suggesting.
Here

回复收藏 0 原文

~没有更多了~