[RUBY] Comment implémenter une image de profil circulaire avec CarrierWave et R Magick in Rails

Qu'est-ce que Carrierwave?

C'est un bijou qui vous permet d'ajouter facilement une fonction de téléchargement de fichier image.

Qu'est-ce que RMgick

Vous pouvez modifier la taille du fichier image et recadrer le centre de l'image. Même une image rectangulaire peut être transformée en une belle image carrée. (Parce qu'il peut être extrait du centre avec la taille spécifiée)

• Il existe un autre joyau appelé ** minimagick ** qui vous permet de changer la taille du fichier image, mais cette fois nous ne le traiterons pas.

version

Ruby 2.7.0 Rails 6.0.2.1 carrierwave 2.1.0 rmagick 4.0.0

Étape 1 ・ Présentez Carrierwave

Tout d'abord, installez la gemme suivante

Gemfile.

gem 'carrierwave'

Ensuite, faites l'installation du bundle. Ensuite, créez un uploader avec rails g uploader image.

Terminal.

＄ bundle install

＄ rails g uploader image

app/uploaders/image_uploader.rb //Le fichier sera créé

Si vous n'avez pas de colonne d'image, vous devez en créer une. Puisqu'il s'agit d'une image de profil, je vais la créer dans le modèle utilisateur.

Terminal.

$ rails g migration AddImageToUsers image:string

$ rails db:migrate

Vous avez maintenant une colonne d'image dans votre modèle utilisateur.

Ensuite, éditez ʻuser.rb du modèle utilisateur ajouté et décrivez ʻimage_uploader.

user.rb

class User < ApplicationRecord
  #réduction

  mount_uploader :image, ImageUploader #ajouter à
end

Ceci termine l'introduction de CarrierWave.

Étape 2-Présentez R Magic

Tout d'abord, l'introduction de R Magick est très compliquée. Lol Cependant, soyez assuré que si vous le faites dans l'ordre, vous pouvez l'installer sans aucun problème.

Tout d'abord, installez ImageMagick 6 et pkg-config. Exécutez les opérations suivantes dans l'ordre.

Terminal.

$ brew install imagemagick@6

$ brew install pkg-config

Ensuite, procédez comme suit

Terminal.

$ export PKG_CONFIG_PATH=/usr/local/opt/imagemagick@6/lib/pkgconfig

Enfin, utilisez la commande gem pour installer rmagick.

Terminal.

$ gem install rmagick

Vous êtes maintenant enfin prêt à installer la gemme. Ajoutez ce qui suit à Gemfile.

Gemfile.

gem 'rmagick'

Exécutez l'installation du bundle

Terminal.

$ bundle install

Ceci termine l'introduction de R Magick.

Étape 3 ・ Décrivez dans ʻimage_uploader.rb`

Décrivez ce qui suit dans le fichier ʻimage_uploader.rb` créé au début

image_uploader.rb

  version :thumb do
    process :resize_to_fill => [width, height, gravity = ::Magick::CenterGravity]
  end

  #Entrez les valeurs de largeur et de hauteur pour la largeur et la hauteur, respectivement. Si vous entrez le même nombre, il devient un carré.
  #Dans le cas de l'exemple ci-dessous, ce sera un carré de 200 px.
  #[Exemple]
  #version :thumb do
    #process :resize_to_fill => [２００, ２００, gravity = ::Magick::CenterGravity]
  #end

Vous pouvez maintenant rendre l'image carrée.

Ensuite, écrivez une description pour éviter l'inversion d'image.

image_uploader.rb

class ImageUploader < CarrierWave::Uploader::Base
  #réduction

  def auto
    manipulate! do|image|
      image.auto_orient
    end
  end

  process :auto

 #réduction
end

Étape 4 ・ Description du modèle

Cette fois, il s'agit d'une photo de profil utilisateur, je vais donc la décrire dans le modèle utilisateur.

user.rb

class User < ApplicationRecord
  #réduction

  mount_uploader :image, ImageUploader
end

Le modèle est maintenant associé.

Étape 5 ・ Description du contrôleur

Ensuite, écrivez-le dans le contrôleur.

users_controller.rb

class UsersController < ApplicationController
  #réduction

  def show
    @user = User.find(params[:id])
  end

  def edit
    @user = User.find(params[:id])
  end

  def update
    @user = User.find(params[:id])
    if @user.id == current_user.id
      @user.update(user_params)
      flash[:success] = "Votre profil a été mis a jour!"
      redirect_to user_path(@user)
    else
      render 'edit'
    end
  end

  private

  def user_params
    params.require(:user).permit(:name, :email, :image)
  end 
end

• Modifiez la partie paramètre fort en fonction de votre propre colonne.

Étape 6-Implémentation de la vue

Ensuite, nous allons l'implémenter dans la vue.

erb:edit.html.erb

 <% if @user.image? %>
   <%= image_tag @user.image.thumb.url, class: "user-icon" %>
 <% else %>
   <%= image_tag "default.jpg ", alt: "user-icon", size: "200", class: "user-icon" %>
 <% end %>
 <button type="button" class="btn btn-outline-secondary rounded-pill">
   <%= f.file_field :image, accept: 'image/jpeg,image/gif,image/png', class: "image-select-btn" %>
 </button>

• L'image par défaut d'un carré de 200 px est définie sur size:" 200 " sur la 4ème ligne.

Si vous avez téléchargé une photo de profil avec <% if @ user.image?%>, Elle sera affichée, sinon l'image par défaut sera affichée. Mettez les images par défaut dans ʻapp / assets / images`.

Au fait

erb:edit.html.erb

<%= image_tag "/assets/images/default.jpg ", alt: "user-icon", size: "200", class: "user-icon" %>

Veuillez noter qu'une erreur se produira si vous écrivez.

Revenez à l'explication de ʻedit.html.erb`.

En écrivant "thumb" sur la deuxième ligne, le contenu (largeur et hauteur) décrit précédemment dans ʻimage_uploader.rb` sera reflété dans l'image.

Ensuite, utilisez CSS pour arrondir l'image.

users.scss

.user-icon {
  border-radius: 100px;
}

Vous avez maintenant arrondi votre photo de profil.

Si l'image de profil n'a pas été téléchargée, l'implémentation suivante est possible.

• La couleur d'arrière-plan est définie pour rendre l'image par défaut plus facile à voir.

Vous pouvez télécharger votre photo de profil à partir du bouton "Sélectionner un fichier" ci-dessus.

Une fois téléchargé, il sera circulaire comme l'image par défaut.

C'est la fin de la mise en œuvre.

Matériel de référence

Je l'ai écrit en référence à l'article suivant. Merci à tous ceux qui ont publié l'article.

Introduire l'image upload Carrierwave Utilisation de R Magic avec des rails [Rails] Créez de jolies vignettes avec Carrier Wave et R Magick Utilisez CarrierWave pour définir l'image utilisateur.