[rails] shrineのDataUriモジュールを使って、HTML Canvasの内容を保存する

はじめに

HTML5のCanvasに描画した内容は、toDataURL関数を使ってDataURIの形式で取り出すことができます。
Ruby on Railsで使えるshrineというアップロードに関連するプラグインは、なんとDataURIを直接受け取ってpng画像にして処理してくれるShrine::Plugins::DataUriモジュールが用意されているため、とても簡単にCanvasの内容を画像として保存することができます。

バージョン情報

Ruby 2.6.0p0
Ruby on Rails 5.2.2
shrine 2.14.0

やり方

shrineのストレージの設定やモデルのマイグレーションは基本的に普通の画像アップロードと同じでいいので省きます。
shrineのDataURIのモジュール使うと、DataURIをきちんと画像として指定したストレージにアップロードしてくれます。

Uploaderの設定

PictureモデルがPictureUploaderを使うとします。

class Picture < ApplicationRecord
  include PictureUploader::Attachment.new(:image)
end

その場合のPictureUploaderは下記です。

class PictureUploader < Shrine
  plugin :data_uri
  plugin :determine_mime_type
end

通常のアップローダと違う点はおそらく、plugin :data_uriを指定している部分だけです。

DataURIから画像を保存してみる

実際にCanvasからDataURIを取得したと仮定すると、次のようにimage_data_uriを指定するだけで画像としてアップロードができます。

picture = Picture.create!(image_data_uri: 'DataURI')

また、元のDataURIも次のようにすれば取得できます。

picture.image.data_uri
#=> data:image/png;base64,iVBORw0KGgoAAAANSUhEUg..................

processorも使える

もちろん、元がDatURIだろうと画像が生成されるので、プロセッサを使ってサムネイル画像を生成しておくことも可能です。
その場合のアップローダは次です。

class PictureUploader < Shrine
  plugin :processing
  plugin :versions
  plugin :data_uri
  plugin :determine_mime_type

  process(:store) do |io, _context|
    versions = { original: io }
    io.download do |original|
      pipeline = ImageProcessing::MiniMagick.source(original)
      versions[:thumbnail] = pipeline.resize_to_limit!(64, 64)
    end
    versions
  end
end

最後に

Canvasの描画内容をshrineで簡単にアップロードする方法を紹介しました。
DataURIであることを意識せずに、普通の画像アップロードと同じように実装できるので良い感じです。