[RUBY] So implementieren Sie ein kreisförmiges Profilbild mit CarrierWave und R Magick in Rails

Was ist Carrierwave?

Es ist ein Juwel, mit dem Sie ganz einfach eine Funktion zum Hochladen von Bilddateien hinzufügen können.

Was ist RMgick?

Sie können die Größe der Bilddatei ändern und die Bildmitte zuschneiden. Sogar ein rechteckiges Bild kann zu einem schönen quadratischen Bild gemacht werden. (Weil es mit der angegebenen Größe aus der Mitte extrahiert werden kann)

• Es gibt ein weiteres Juwel namens ** minimagick **, mit dem Sie die Größe der Bilddatei ändern können, aber diesmal werden wir nicht damit umgehen.

Ausführung

Ruby 2.7.0 Rails 6.0.2.1 carrierwave 2.1.0 rmagick 4.0.0

Schritt 1 ・ Führen Sie Carrierwave ein

Installieren Sie zuerst den folgenden Edelstein

Gemfile.

gem 'carrierwave'

Dann machen Sie "Bundle-Installation". Erstellen Sie dann einen Uploader mit "Rails G Uploader Image".

Terminal.

＄ bundle install

＄ rails g uploader image

app/uploaders/image_uploader.rb //Datei wird erstellt

Wenn Sie keine Bildspalte haben, müssen Sie eine erstellen. Da dies ein Profilbild ist, werde ich es im Benutzermodell erstellen.

Terminal.

$ rails g migration AddImageToUsers image:string

$ rails db:migrate

Sie haben jetzt eine Bildspalte in Ihrem Benutzermodell.

Bearbeiten Sie als Nächstes user.rb des hinzugefügten Benutzermodells und beschreiben Sie den image_uploader.

user.rb

class User < ApplicationRecord
  #Kürzung

  mount_uploader :image, ImageUploader #hinzufügen
end

Damit ist die Einführung von CarrierWave abgeschlossen.

Schritt 2 - R Magic einführen

Erstens ist die Einführung von R Magick sehr kompliziert. Lol Seien Sie jedoch versichert, dass Sie es problemlos installieren können, wenn Sie es in der richtigen Reihenfolge ausführen.

Installieren Sie zunächst ImageMagick 6 und pkg-config. Führen Sie die folgenden Schritte der Reihe nach aus.

Terminal.

$ brew install imagemagick@6

$ brew install pkg-config

Dann machen Sie folgendes

Terminal.

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

Verwenden Sie zum Schluss den Befehl gem, um rmagick zu installieren.

Terminal.

$ gem install rmagick

Jetzt können Sie den Edelstein endlich installieren. Fügen Sie Folgendes zu Gemfile hinzu.

Gemfile.

gem 'rmagick'

Führen Sie die Bundle-Installation aus

Terminal.

$ bundle install

Damit ist die Einführung von R Magick abgeschlossen.

Schritt 3 ・ Beschreiben Sie in image_uploader.rb

Beschreiben Sie Folgendes in der zu Beginn erstellten Datei image_uploader.rb

image_uploader.rb

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

  #Geben Sie die Werte für Breite und Höhe für Breite bzw. Höhe ein. Wenn Sie dieselbe Zahl eingeben, wird sie zu einem Quadrat.
  #Im folgenden Beispiel handelt es sich um ein 200-Pixel-Quadrat.
  #[Beispiel]
  #version :thumb do
    #process :resize_to_fill => [２００, ２００, gravity = ::Magick::CenterGravity]
  #end

Sie können das Bild jetzt quadratisch machen.

Schreiben Sie als Nächstes eine Beschreibung, um eine Bildinversion zu verhindern.

image_uploader.rb

class ImageUploader < CarrierWave::Uploader::Base
  #Kürzung

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

  process :auto

 #Kürzung
end

Schritt 4 ・ Modellbeschreibung

Dieses Mal ist es ein Benutzerprofilbild, daher werde ich es im Benutzermodell beschreiben.

user.rb

class User < ApplicationRecord
  #Kürzung

  mount_uploader :image, ImageUploader
end

Das Modell ist jetzt zugeordnet.

Schritt 5 ・ Beschreibung der Steuerung

Als nächstes schreiben Sie es in die Steuerung.

users_controller.rb

class UsersController < ApplicationController
  #Kürzung

  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] = "Ihr Profil wurde aktualisiert!"
      redirect_to user_path(@user)
    else
      render 'edit'
    end
  end

  private

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

• Ändern Sie den starken Parameterteil entsprechend Ihrer eigenen Spalte.

Schritt 6 - Implementierung der Ansicht

Als nächstes werden wir es in der Ansicht implementieren.

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>

• Die 4. Zeile size:" 200 " ist das Standardbild eines 200px-Quadrats.

Wenn Sie ein Profilbild mit "<% if @ user.image?%>" Hochgeladen haben, wird es angezeigt, andernfalls wird das Standardbild angezeigt. Fügen Sie die Standardbilder in "App / Assets / Images" ein.

Apropos

erb:edit.html.erb

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

Bitte beachten Sie, dass beim Schreiben ein Fehler auftritt.

Kehren Sie zur Erklärung von edit.html.erb zurück.

Wenn Sie in die zweite Zeile "thumb" schreiben, wird der zuvor in "image_uploader.rb" beschriebene Inhalt (Breite und Höhe) im Bild wiedergegeben.

Verwenden Sie dann CSS, um das Bild abzurunden.

users.scss

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

Sie haben jetzt Ihr Profilbild gerundet.

Wenn das Profilbild nicht hochgeladen wurde, ist die folgende Implementierung möglich.

• Die Hintergrundfarbe wird so eingestellt, dass das Standardbild besser sichtbar ist.

Sie können Ihr Profilbild über die Schaltfläche "Datei auswählen" oben hochladen.

Beim Hochladen ist es kreisförmig wie das Standardbild.

Dies ist das Ende der Implementierung.

Referenzmaterial

Ich habe es mit Bezug auf den folgenden Artikel geschrieben. Vielen Dank an alle, die den Artikel gepostet haben.

Bild-Upload Carrierwave einführen Verwenden von R Magic mit Schienen [Rails] Erstellen Sie schöne Miniaturansichten mit Carrier Wave und R Magick Verwenden Sie CarrierWave, um das Benutzerbild festzulegen.