Vue.jsで画像を作成しRailsのActive Storageで保存するRailsアプリケーション内でVue.jsを使って画像を作成するアプリを制作していて色々と詰まった部分があったので記録に残しておこうと思います。 ざっと流れを説明しておくと以下のようになります。 Vue.js + Konva.jsを使ってcanvasタグで図形を作成 Base64形式のData URLに変換 RailsのActive Storageで保存 開発環境 Rails 6.1.4 Vue 3.1.5 Konva 8.1.1(canvasタグで図形などを描画するJavaScriptライブラリ) Konva - JavaScript 2d canvas library 環境構築などの部分は省略します VueとKonvaで画像を作成しData URLに変換、画像表示させる 今回はChartモデルの_form.html.erb内にVueを描画します
