从代码中提取图像

我可以看到两种方法。在这两种方法中,您都准备了透明的PNG图像,即“羽毛”效果。然后你将把这个图像和原始图像结合起来,你就会得到所要求的结果。

CSS方式

在这种情况下,您可以在客户端进行操作。只需准备一个透明的PNG面具,使“羽毛”的效果-使用Photoshop/Gimp来创建它。

<div style="width: 200px;height: 200px; background: url(/images/source.jpeg)">
  <img width="200" height="200" src="/images/feather.png" />
</div>

服务器端

在这种情况下,我肯定会使用回形针宝石。它使用魔法 imagemagick 图书馆。你可能会认为它是命令行上的Photoshop(有点夸张,但不太夸张)

在您的模型中:

class Avatar < ActiveRecord::Base
  has_attached_file :image, :styles => {
    :feather => {
      :geometry => "200x200",
      :format => :jpg
    },
    :normal => {
      :geometry => "200x200",
      :format => :jpg
    }
  },
  :convert_options => {
    :feather => "#{Rails.root.join('public/images/feather-200x200.png')} -composite"
  }

end

就这样。然后在您的代码中,当您想使用“羽化”图像时,您应该使用:

<%= image_tag avatar.image.url(:feather) %>

所有的转换和转换都只是作为一个赋值:

avatar = Avatar.new
# from file...
avatar.image = open(....)
# or maybe from form...
avatar.image = params[:...]
# it not only saves the avatar to db but runs the image transformations
avatar.save!

回形针支持使用ImageMagick应用程序进行图像操作,该应用程序允许您在上载时以编程方式操作图像。请看下面链接中标题为“后处理”的小节

http://github.com/thoughtbot/paperclip

您必须稍微熟悉ImageMagick的CLI,才能弄清楚您想要的是什么,但它肯定是可以做到的。

据我所知,rmagick是最好的: http://rmagick.rubyforge.org/portfolio2.html

你也可以让用户上传他们的照片,然后使用一些CSS技巧(例如,在图片顶部的一个透明png)显示它

免责声明:我在Atalasoft工作。

我们的免费图像SDK, DotImage Photo ,可以用来做。最简单的方法是在原稿上覆盖半透明图像。您可以在运行时将它们创建为正确的大小。