[B! canvas] iga_kのブックマーク

iga_k id:iga_k

canvasに関するiga_kのブックマーク (2)

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を描画します
iga_k 2021/10/28
Data URLで受け渡しなるほど。

rails

vue

js

canvas
リンク
Canvas tutorial - MDC
このチュートリアルは、 <canvas> 要素を使用して二次元のグラフィックを描画する方法を、基本から説明します。ここでの例は、キャンバスで何ができるかを明確に示すものであり、独自のコンテンツを作成するためのコードスニペットも提供しています。 <canvas> は HTML の要素であり、スクリプト（ふつうは JavaScript）を使ってグラフィックを描くことができます。これは例えば、グラフを描いたり、写真を合成する、または簡単なアニメーションを（あまり簡単ではないものも）作成したりすることができます。このページにある画像は、このチュートリアルで作成する <canvas> の実装の例を示しています。 <canvas> は Apple が macOS Dashboard のために WebKit に初めて導入した後、ブラウザーに実装されました。現在は、あらゆる主要ブラウザーが対応しています。
iga_k 2007/11/29
canvas

javascript

web
リンク
1