Rails+RMagick+CarrierWaveを使ってアップロードしたPDFの表紙からPNG画像を生成して表示する。


この記事の所要時間: 350

こんにちは。
今回はPDFをアップロードした時点でPNG形式の画像を生成し、それをWeb上に表示するという機能を作ったときのことを書いていきます。

最終的にはこんな感じに表示されます。
Unicast_Library-4

まず前提として今回はBookテーブルにimageカラムが作ってあることを前提とします。

1. 画像アップロード機能

Gemfileに以下を追加してbundle installします。

gem 'carrierwave'

次にアップロード用クラスを作ります。

$ rails g uploader image

そうすると app/uploaders/image_uploader.rb が作られます。

次にモデル(今回はbook.rb)に以下を追加してください。

mount_uploader :image, ImageUploader

アップロード機能を追加するフォームを以下の以下のように修正します。

<%= form_for(@book, :html => {:multipart => true}) do |form| %>

今回はbooks/new.html.erbとbooks/edit.html.erbを修正しました。

ファイルフィールドを追加します。

    <%= form.label :image %><br />
    <%= form.file_field :image %>

それで画像をアップロードした場合は以下を記述すれば表示されます。

<%= image_tag @book.image_url.to_s %>

しかし、今回はPDFをアップロードするのでこのアップロードしたものをpng形式やjpg形式に変換しなければなりません。
あっ。ちなみにアップロードしたファイルは /uploads/artist/image/[id値]/ に保存されます。保存場所はimage_uploader.rbのstore_dirメソッドで定義できるみたいです。今回はデフォルトのまま進めます。

2. アップロードしたPDFファイルからPNG形式画像を生成して表示させる。

ではやっと本題のアップロードしたPDFファイルからPNG画像を生成する方法です。

Homebrewを使って

brew install imagemagick

をやります。試しにターミナルでPDFを変換できるか試してみてください。

convert xxxxx.pdf[0] xxxxx.png

自分はエラーがでました。。。
調べてみると、Ghostcriptもいれなくちゃいけないようで

brew install ghostscript

でインストールしてみたらちゃんとpdfの表紙(1ページ目)のPNG画像が生成されました。

次にRails上で画像を生成して表示する方法です。
image_uploader.rbでコメントアウトされている以下の行を有効にします。

include CarrierWave::RMagick

そしてこれを追記します。
coverメソッドで1ページ目だけを指定してPNG形式への変換を行います。

version :thumb do
     process :cover
     process :resize_to_limit => [500, 500]
     process :convert => 'png'
   end

  def cover
    manipulate! do |frame, index|
      frame if index.zero?
    end
  end

そして表示したい場所に

<%= image_tag @book.image_url(:thumb).to_s %>

を書けば表示されます。

投稿者紹介

疋田駿
Unicast Inc. ソフトウェアエンジニアRuby,Rails,React,Redux,ReactNative,Android,Elasticsearch,Dockerとか触りながら生計を立ててる。Thinkpad×fedora。ErgoDox愛好家な一児の父。

人気の記事

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PAGE TOP