はじめに
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であることを意識せずに、普通の画像アップロードと同じように実装できるので良い感じです。