將圖像裁剪爲矢量或覆蓋圖形的形狀

我想這是在黑暗中拍攝的，但有可能具有形狀的矢量文件（本例中爲帶圓角的六角形），以及通過一些代碼傳遞一張圖片，然後將它剪出來呈現出該矢量的形狀？將圖像裁剪爲矢量或覆蓋圖形的形狀

我試圖在我的設計中使用六邊形，並且已經瀏覽了每一頁我可能都可以。我見過很多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

將圖像裁剪爲矢量或覆蓋圖形的形狀

回答

相關問題