Using RMagick to create cool photos
Having something like this
Wouldn't it be cool if you could creating something like this?
All in real-time, in your Ruby on Rails project, using RMagick.
Hold on because I'll show you how.
What we basically will be creating is making a 24-bit PNG image with alpha transparency (so the background on the top picture isn't included ;), which you can then creatively use on your page layouts.
We will be stepping thru the following image iterations while writing the code:
and finally…
Here's the code.
def myimage
imgw, imgh = 140, 140 # width and height of resized image
canvw, canvh = 150, 150 # width and height of canvas
blursize, blurpower = 10, 2 # parameters for blurring
# creating a canvas to draw on
canvas = Magick::Image.new(canvw, canvh) do
self.background_color = 'transparent'
end
#reading in the real image we'll adding shadow to
oneImage = Image.find(params[:id])
image = Magick::Image.from_blob(oneImage.data).first
#resizing image by cropping it to the required size
image.crop_resized!(imgw, imgh, Magick::CenterGravity)
# creating canvas to store our shadow
shadecanvas = Magick::Image.new(canvw, canvh) do
self.background_color = 'black'
end
# creating rectangle we will be blurring in order to create shadow
# the same image will be used to create alpha channel
rect = Magick::Image.new(imgw, imgh) do
self.background_color = 'white'
end
# adding the white rectangle to the black shadow canvas
shadecanvas.composite!(rect, Magick::CenterGravity, Magick::OverCompositeOp)
# blurring the image (so we now have a blurred white rectangle)
shadeimg = shadecanvas.blur_image(blursize,blurpower)
# putting white rectangle over blurred white rectangle
# because we will be using the image for alpha as well, and we want
# the alpha channel to have 100% opaque rect area where we will be displaying
# the main image
shadeimg.composite!(rect, Magick::CenterGravity, Magick::OverCompositeOp)
# now we just painting everything to the main canvas
# 1. draw shade image (blurred white rect on black background)
canvas.composite!(shadeimg, Magick::CenterGravity, Magick::OverCompositeOp)
# 2. draw the image itself
canvas.composite!(image, Magick::CenterGravity, Magick::OverCompositeOp)
# 3. draw shade image again, but now with aplha layering
# (when we applying the image this way, all black areas become completely
# transparent, and all white 100% opaque. Grays become partially transparent)
canvas.composite!(shadeimg, Magick::CenterGravity, Magick::CopyOpacityCompositeOp)
# adding a cool curl effect
canvas.rotate!(90)
canvas = canvas.wave(5, 400)
canvas.rotate!(-90)
# finally rotating the image in place
canvas.rotate!(15)
# setting the format of output image to PNG
canvas.format = 'png'
# and outputting it to the user
send_data canvas.to_blob, :filename => "myimage_#{params[:id]}.png",
:disposition => 'inline',
:type => "image/png"
end
Sorry about the lack of indents. Still can't make my WordPress to work for me, not vice versa :) Hopefully this info was helpful. There are not many tutorials for RMagick online.
BTW, here's the real-world example (the site I created this function for, in the first place :)
