Scale and Crop

Image Editor With Ruby on Rails and Rmagich


This is a demonstration of how you can use Ruby On Rails to create an online image editor. With Rmagich, you do have a very powerful library to transform pictures. If it would make sense you could easy make an online replacement of Photoshop. Take a look at the portfolio of Rmagick

It do make sense to have the same possibilties to edit images as you have to editing text in an online content editor. Well, do You have that?

Most of the time doing this demo I spend on Javascript. The cropping and scaling thing is very simple.
After I have switched to Ruby on Rails I have a lot of time to catch up om my Javascript knowledge, because I got the work on the server done so fast.

The JavaScript i based on a wonderful Javascript library - Drag & Drop for Images and Layers made By Walter Zorn. The library is very useful and the reference is even better. :-)

I was led to the javascript library from this page http://php.amnuts.com/demos/crop-canvas/interactive.php when it was mentioned on Ruby On Rails Weblog

Some rough Rails Code : 


require 'pictures_helper'
require 'Rmagick'

class ScaleCropController < ApplicationController
	include PicturesHelper
	include Magick
	
	$MAX_WIDTH = 1500
	$MAX_HEIGHT = 1200
	$picture_list = [12,18,17,20]
   
 	def edit
		@picture = Picture.find(@params["id"])
		@picture_name = "./pictures/#{@picture.name}" 
		# Open the image-file
		@img = Image.read(@picture_name).first
   	end

	
	def index
		@pictures = Array.new
		$picture_list.each do | id|
			@pictures.push(Picture.find(id))
		end
	end
	
   	def send_list_picture
		picture = Picture.find(@params["id"])
		send_file("./pictures/thumbnails/#{picture.name}"
			, :type => "image/jpeg", :disposition => "inline") 
   	end
	
   	def crop
   		picture = Picture.find(@params['id'])
		@picture_name = "./pictures/#{picture.name}" 
		scale_width 	= @params['w'].to_i
		scale_height 	= @params['h'].to_i
		left_x 		= @params['sx'].to_i
		left_y 		= @params['sy'].to_i
		right_x		= @params['ex'].to_i
		right_y		= @params['ey'].to_i
		
	   	# We want to protect the server from to mutch load
		if (scale_width  > $MAX_WIDTH || right_x - left_x > $MAX_WIDTH) 
			|| (scale_height > $MAX_HEIGHT||  right_y - left_y > $MAX_HEIGHT) then
			render_text "error"		
		else
			# Open the image-file
	   		img = Image.read(@picture_name).first
			scale = img.scale(scale_width,scale_height)
			crop = scale.crop(left_x, left_y, right_x, right_y)
		
			@response.headers["Content-Type"] = "image/jpeg"
			render_text do |response|
            			print crop.to_blob
   			end
		end
   	end 
   
  	def scale
		scale_width 	= @params['w'].to_i
		scale_height 	= @params['h'].to_i
		
		if (scale_width  > $MAX_WIDTH  || scale_height > $MAX_HEIGHT) then
			render_text "error"		
		else
			picture = Picture.find(@params['id'])
			@picture_name = "./pictures/#{picture.name}" 
	
	   		# Open the image-file
	   		@img = Image.read(@picture_name).first
			@img = @img.scale(scale_width,scale_height)
			@response.headers["Content-Type"] = "image/jpeg"
			render_text do |response|
        			print @img.to_blob
        		end
      		end
	end
   
   	def renderpicture
		if @params['id']
			picture = Picture.find(@params['id'])
			@picture_name = "./pictures/#{picture.name}" 

        		# Open the image-file
	    		@img = Image.read(@picture_name).first
			if @img.columns > 300
				@img = @img.scale(300.0 / @img.columns)
			end 
			
			@response.headers["Content-Type"] = "image/jpeg"
			render_text do |response|
            			print @img.to_blob
        		end
		end

   	end
   
 
	  
end

Valid XHTML 1.0!