Use fleximage to upload images

Flexmage is now the preferred choice for uploading and processing images in rails, even paperclip. It provides a user-friendly encapsulation for rmagick, making it easier for us to process images. Compared with paperclip, paperclip supports uploading images from remote URLs and deleting attachments on hard disks.

If I have read another blog post "upload images using paperclip", the process is the same. So we can expand on that application!

 
Ruby script/generate scaffold picture User: belongs_to is_avatar: Boolean
 

This is no different from the previous photo module. In this way, we can compare it to the point where flexmage can simplify the upload!

Install flexmage

 
Ruby script/plugin install git: // github.com/moser/fleximage_i18n.git
 

From the name, we can see that it supports internationalization. It's so powerful!

Modify View

New _form.html. ERB

<% Form_for @ picture,: HTML =>{: multipart => true} Do | f |%> <% = f. error_messages %> <% if logged_in? %> <% = F. hidden_field: user_id,: value => current_user.id %> <% end %> <% if action_name = "new" %> <p> <% = f. label: is_avatar, "whether to be an avatar" %> <% = f. check_box: is_avatar %> </P> <% end %> <p> <% = f. file_field: image_file %> <br/> or use URL <% = f. text_field: image_file_url %> </P> <p> <% = f. hidden_field: image_file_temp %> <B> uploaded image: </B> <br/> <% = embedded_image_tag (@ picture. operate {| IMG. re Size 100}) If @ picture. has_image? %> </P> <p> <button type = "Submit"> <% = button_name %> </button> </P> <% end %>
 

Modify new.html. ERB

<% Title "Upload image" %> <% = render: Partial => 'form',: locals => {: button_name => "Upload" }%> <% = link_to 'back', pictures_path,: class => "button" %>
 

Modify edit.html. ERB

 
<% Title "Edit image" %> <% = render: Partial => 'form',: locals => {: button_name => "Update" }%> <% = link_to 'enlarge ', @ picture,: class => "button" %> <% = link_to' Return ', pictures_path ,: class => "button" %>
 

Modify show.html. ERB

<Div class = "figure"> <% = embedded_image_tag (@ picture) If @ picture. has_image? %> <Div class = "legend"> everyone: <% = H @ picture. user. login rescue nil %>; whether it is an Avatar: <% = @ picture. is_avatar %> </div> <% = debug @ picture %> <% = link_to 'edit', [: Edit, @ picture],: class => "button" %> <% = link_to 'Return', pictures_path,: class => "button" %>
 

Modify index.html. ERB

<H1> image list  
 
Finally, let's modify the picture model to complete the upload function without touching the controller.
 

Class Picture 'public/images/uploaded_photos' end
 
 
After the model declares acts_as_fleximage, the plug-in adds three virtual attributes: image_file, image_file_url, and image_file_temp to our picture instance. Image_file is used for local upload, image_file_url is used for remote URL upload, and image_file_temp is used to save a copy. What is the use of this copy? When submitting a form, we sometimes fail to submit due to network problems. This forces us to re-enter all fields and re-upload the file. Image_file_temp is developed to cope with this situation. When we upload files, rails will upload the files to a directory, but it will not immediately transfer them to the target directory, just like a donkey, It will be placed in a temporary directory and copied to the target directory only after completion. Therefore, after the submission fails, rails does not need to upload the file again, but takes the file from the temporary directory, which is much faster! This is a very considerate feature.
 

 
Let's take a look at the embedded_image_tag method, which is more powerful than image_tag. It can display images of unsaved models and edit images in real time. However, you should note that it will generate a large number of base64 encoding in the page, which not only increases the page size in a geometric manner, but also is rendered by the javascript interpreter to generate images, this efficiency is of course a word slow, especially in IE. Therefore, the rendering of the image should be handed over to the ruby parser, so that we have to move the controller. Modify show action of pictures_controller:
 

Def show @ picture = picture. find (Params [: Id]) respond_to do | format | format.html # show.html. ERB format.png {render: inline => "@ picture. operate {} ",: TYPE =>: Flexi} format.gif {render: inline =>" @ picture. operate {} ",: TYPE =>: Flexi} format.jpg {render: inline =>" @ picture. operate {} ",: TYPE =>: Flexi} format. XML {render: XML =>@ picture} end
 
 
Modify View
 

 
<Div class = "figure"> <% = image_tag picture_path (@ picture,: format =>: JPG) %> <Div class = "legend"> All Users: <% = H @ picture. user. login rescue nil %>; whether it is an Avatar: <% = @ picture. is_avatar %> </div> <% = debug @ picture %> <% = link_to 'edit', [: Edit, @ picture],: class => "button" %> <% = link_to 'Return', pictures_path,: class => "button" %>
 
Add page Cache
There is nothing to say, it is to reduce repeated page rendering and shorten the time for sound speculation. Because a static page is directly sent to the client, you can skip this step.
 

Class picturescontroller adds a new field to store the attributes of the original image.
 
Flexmage has a bad point. It does not copy the original image by 100%. The default image format is PNG. If it is not PNG, it is converted to PNG and its image quality is reduced. The default value is 85%. We need to modify these default attributes to avoid this problem.
 
 
Acts_as_fleximage do image_directory 'public/images/uploaded_photos' image_storage_format: JPG output_image_jpg_quality 100 end
 
 
We can also set the default image storage format to gif, but it also changes the fate of dynamic GIF to static GIF ......
 
 
However, we can still do some things, such as the word (with its extension), length and width of the original image. These attributes are fixed and must be named like that (image_filename, image_width and image_height). flexmage will extract the information and store it in the database. So let's add fields with the same name as these attributes for the model.
 
Class addcolumnstopictures
 
Then we can display them in the view, for example:
 
 
Original Name: <% = @ picture. image_filename %> width: <% = @ picture. image_width %> PX length: <% = @ picture. image_height %> PX
 
Set default image
To prevent image invalidation, we can set a default image like paperclip if the directory is changed, for example:
 
 
Acts_as_fleximage do image_directory 'public/images/uploaded_photos 'image_storage_format: JPG output_image_jpg_quality 100 default_image_path 'public/images/rails.png' End
 
 
Add other parameters
 
 
Acts_as_fleximage do image_directory 'public/images/uploaded_photos' image_storage_format: JPG output_image_jpg_quality 100 default_image_path 'public/images/rails.png 'defaults true require_image true missing_image_message' is required 'invalid_image_message 'was not a readable image' end
 
 

Thumbnail
 
Fleximage images are generated in real time. Unlike the paperclip guide, after uploading images, we set several styles to generate several sets of images on the hard disk. This makes sense for each of them. fleximage is space-saving, paperclip is time-saving. In terms of user experience, fleximage is a disadvantage, so it creates a page cache. Reflection. flexi, but I only use the "inline" method. Like RJS, there is also an inline RJS alternative. Therefore, we can simulate the @ picture. image. URL (: thumb) effect of paperclop.
 
 
Create two actions and modify the cache.
 
Class picturescontroller [: Show,: Edit,: Update,: Destroy,: thumb ,: avatar] #=========================== other actions ========================== = def thumb render: inline => "@ picture. operate {| p | P. resize '100x100'} ",: TYPE =>: Flexi end def Avatar render: inline =>" @ picture. operate {| p | P. resize '200x200'} ",: TYPE =>: Flexi end protected def find_picture @ picture = picture. find (Params [: Id]) end def expire_picture (picture) expire_page picture_path (picture,: format =>: JPG) expire_page thumb_picture_path (picture,: format =>: JPG) expire_page avatar_picture_path (picture,: format =>: JPG) endend
 
 
Modify routing rules:
 
 
Map. Resources: photos,: Member =>{: thumb =>: get,: Avatar =>: get}
 
 
Then we can use thumbnails on the page.
 
<% = Image_tag thumb_picture_path (@ picture,: format =>: JPG) %> <equivalent to image_tag @ picture. image. URL (: thumb) %> <% = image_tag avatar_picture_path (@ picture,: format =>: JPG) %> <equivalent to image_tag @ picture. image. URL (: Avatar) %>
 
Some useful link http://www.railslodge.com/plugins/93-flex-imagehttp://www.railslodge.com/plugins/93-flex-image/documentations/2-editing-images