将图像裁剪为矢量或覆盖图形的形状

我想这是在黑暗中拍摄的，但有可能具有形状的矢量文件（本例中为带圆角的六角形），以及通过一些代码传递一张图片，然后将它剪出来呈现出该矢量的形状？将图像裁剪为矢量或覆盖图形的形状

我试图在我的设计中使用六边形，并且已经浏览了每一页我可能都可以。我见过很多HTML和CSS解决方案，但是他们没有一个能够完美无缺地实现我所需要的。

我的另一个想法可能是用imagemagick覆盖现有图像顶部的透明六角形形状，然后通过并使任何白色透明。思考？

我没有在一个矢量文件的形状裁剪任何代码，但这里是我有重叠的形状的轮廓我想在其他画面的顶部：

imgfile = "public/" + SecureRandom.uuid + ".png" 
SmartCropper.from_file(art.url(:original)).smart_square.resize(225,225).write(imgfile) 

overlay = Magick::Image.read("app/assets/images/overlay.png") 
img = Magick::Image.read(imgfile)   
img.composite(overlay,0,0, Magick::OverCompositeOp)

权现在它给了我一个未定义的方法错误的复合，这很奇怪，因为我已经在他们的模型中使用相同的东西，一些其他堆栈溢出问题。

任何帮助表示赞赏！

来源

2014-03-27 div

是的，这是可能的。你能否就目前的问题添加最好的尝试，所以任何答案都可以从你需要的地方开始，并使用相同的术语？这节省了编写答案的时间 - 即使只是剪切和粘贴变量名也是一个节省时间的工具。 –

啊，是的，抱歉。添加了一些用于添加叠加层的代码。 – div

好吧，我学到了SmartCropper - 看起来很有趣。我认为“overlay.png”是你的六角形图像？ –

对于一个常见的ImageMagick陷阱 - 您从.read方法得到的对象不是Magick::Image对象，而是对于大多数图像类型，您希望列表中的第一项。

不知道如何设置overlay.png文件，很难说出最佳的复合选项是什么。但是，在类似的情况下，我发现CopyOpacityCompositeOp非常有用，并使覆盖层的透明度控制最终图像的透明度。

我测试下面的代码，它看起来像它会做你想要什么，如果overlay.png设置了这种方式：

require 'smartcropper' 

imgfile = "test_square.png" 
SmartCropper.from_file('test_input.png'). 
    smart_square.resize(225, 225).write(imgfile) 

overlay = Magick::Image.read('overlay.png').first 

img = Magick::Image.read(imgfile).first 

img.composite(overlay, 0, 0, Magick::CopyOpacityCompositeOp). 
    write("test_result.png")

而不是从文件中读取overlay，你可以创建使用Magick::Draw这样的：

overlay = Magick::Image.new(225, 225) do |i| 
    i.background_color= "Transparent" 
end 

gc = Magick::Draw.new 
gc.stroke('white').stroke_width(10) 
gc.fill('white') 
gc.polygon(97.5, 26.25, 178.5, 73.125, 178.5, 167, 
    97.5, 213.75, 16.5, 167, 16.5, 73.125) 
gc.draw(overlay)

NB这是一个六边形，但我没有打扰它为中心。

来源

2014-03-27 20:53:50

工作绝对完美！非常感谢！ – div

将图像裁剪为矢量或覆盖图形的形状

回答

相关问题