違いって?図を交...Fabric.jsを使ってLGTM画像を作る2015年07月06日takuruTweetFabric.jsという、HTML5のcanvasに使うライブラリがあります。これは、canvas上にマウスドラッグや拡大縮小、回転などを行えるオブジェクトを描画することができるライブラリです。Fabric.jsを使用して、画像にLGTMという文字を貼り付けるツールを作ってみました。Makerこのツールを使うことにより、こんな画像がこんな風になります。作り方HTMLを用意するfabric.jsを読み込んだHTMLを用意します。ファイルフォームとcanvasとダウンロードリンクがあります。target="_blank">Download</a></body></html>ファイルフォームで選択した画像をcanvasに表示するファイルフォームで選択した画像をJavaScriptで扱うには、FileReaderオブジェクトを使用します。});});LGTMの文字を表示する画像を読み込んだ後に、以下のコードを追加します。塗りつぶし色});canvas.add(lgtm);画像をダウンロードできるようにするHTML5にはaタグにはdownload属性というものが存在します。この属性が付いているaタグは、クリックした時にリンク先をダウンロードさせることが可能です。このdownload属性に文字列を指定すると、ファイル名になります。ファイルフォームで画像が選択された時に、download属性にファイル名を設定しておきます。e.target.files[0].name);});aタグをクリックした時に、canvasのdataURLをセットします。canvas.getElement().toDataURL());});これでcanvasの内容をJavaScriptだけでダウンロードすることが出来るようになりました。リポジトリhttps://github.com/ttakuru88/lgtm-maker改造した文章や文字色を変えられるようにしたバージョンです。DocBaseとはDocBaseとは、成長する組織のための情報共有サービスです。成長とともにメンバーが増加する中でも円滑に情報共有を行うことを可能にします。エンジニア以外のメンバーでも使いやすい仕組み、柔軟な権限設定によって従来の情報共有ツールで起こりがちだった心理的ハードルを下げ、積極的な情報共有と業務の効率化を実現します。違いって?図を交...「いいね!」で応援よろしくお願いします!このエントリーに対するコメントコメントはまだありません。date*日本語が含まれない投稿は無視されますのでご注意ください。fax.0422-26-9781お問い合わせはこちらからどうぞ。