可缩放剪贴蒙版
我需要将可变大小的图像剪辑成像这样的拼图形状的图片(不是正方形): http:// www.fernando.com.ar/jquery-puzzle/
我考虑过使用像 Cairo 或 GD 这样的 php 库来完成此操作的可能性,但是对这些库几乎没有经验,并且没有立即看到用于创建可动态缩放不同尺寸图像的剪贴蒙版的解决方案。
我正在寻找有关使用哪种服务器端编程语言来完成此任务的指南/提示,以及最好是解决此问题的方法。
I need to to clip variablesized images into puzzle shaped pices like this(not squares): http://www.fernando.com.ar/jquery-puzzle/
I have considered the posibility of doing this with a php library like Cairo or GD, but have little to no experience with these librays, and see no immidiate soulution for creating a clipping mask dynamicaly scalable for different sized images.
I'm looking for guidance/tips on which serverside programing language to use to accomplish this task, and preferably an approach to this problem.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
您可以使用 GD 创建具有拼图大小的图像。然后将完整图像复制到该图像上并进行正确的裁剪,以获得图像的正确部分。
然后,您可以使用不同的颜色(例如#0f0)动态地为要删除的部分的每个部分着色,然后使用 imagecolorallocatealpha 使该颜色透明。对每个部分执行此操作,您就拥有了服务器端图像部分。
但是,如果我在你那里,我会提前以不同的颜色创建每个拼图和平的剪贴蒙版。这将为每个连接生成两个图像(一张带有“圆形”连接器伸出的图像,另一张带有该圆形连接器插入的图像)。这样,您只需将这些蒙版复制到图像上即可快速创建漂亮的边缘。
You can create an image using GD with the size of the puzzle piece. and then copy the full image on that image with the right cropping to get the right part of the image.
Then you can just dynamically color in every part of the piece you want to remove with a distinct color (eg #0f0) and then use imagecolorallocatealpha to make that color transparent. Do it for each piece and you have your server side image pieces.
However, if I where you I would create the clipping mask of each puzzle peace in advance in the distinct color. That would make two images per connection (one with the "circle" connecter sticking out and one where this circle connector fits into). That way you can just copy these masks onto the image to create nice edges quickly.
GD 相当复杂,我听说过有关 Image Magick 的好消息,它有一个 PHP 版本,并且在 php.net 上有很多文档。然而,并不是所有的网络服务器都会默认安装这个。
http://www.php.net/manual/en/book.imagick.php
GD is quite complicated, I've heard very good things about Image Magick for which there is a PHP version and lots of documentation on php.net. However, not all web servers would have this installed by default.
http://www.php.net/manual/en/book.imagick.php
如果您选择使用 PHP 和 GD 来完成此操作,那么此处的代码可能会有所帮助:
http://php.amnuts.com/index.php?do=view&id=15&file=class.imagemask.php
本质上你需要对 GD 做的是开始使用特定尺寸的蒙版,然后使用 imagecopyresampled 函数将蒙版图像资源复制到更大或更小的尺寸。要明白我的意思,请查看上面网址中显示的
_getMaskImage
方法类。输出的工作示例可以在以下位置查看:http://php.amnuts.com/demos /image-mask/
据我所知,通过 GD 执行此操作的问题是,如果您想实现不同的不透明度级别,则需要一次执行一个像素,因此处理大图像可能需要几秒钟。对于 ImageMagick 来说情况可能并非如此。
If you choose to do it using PHP with GD then the code here may help:
http://php.amnuts.com/index.php?do=view&id=15&file=class.imagemask.php
Essentially what you need to do with GD is to start with a mask at a particular size and then use the
imagecopyresampled
function to copy the mask image resource to a larger or smaller size. To see what I mean, check out the_getMaskImage
method class shown at the url above. A working example of the output can be seen at:http://php.amnuts.com/demos/image-mask/
The problem with doing it via GD, as far as I can tell, is that you need to do it a pixel at a time if you want to achieve varying opacity levels, so processing a large image could take a few seconds. With ImageMagick this may not be the case.