IT仕事

FabricJSについて調べてみた。

投稿日:2017年11月8日 更新日:

ベースは、こちらのブログで公開されていたコード。深く感謝!
Fabric.jsを使ってLGTM画像を作る | KRAY Inc
ページ下にあるリポジトリよりファイルをダウンロードさせていただき、先日インストールしたVisualStudioCodeのウィンドウにファイルをmain.jsとindex.htmlをドロップして開き、それぞれを編集する。

実はここに至るまでに、FabricJSの公式にある以下のサイトのソースをコピーして使えないかと、しばらくいろいろ探っては見たのだが、うまくいかなかった。Kitchensink | Fabric.js Demos
というのも、このサイトではfubricJSをAnglularJSで操作するようにつくってあるから。
(そして自分はAnglularJSについて、さっぱり知らないから。)

参考になったのは、他には以下のWeb。
fabric.jsで画像を描画する
fabric.jsを利用したシンプルホワイトボード – jsdo.it – Share JavaScript, HTML5 and CSS
LGTM Maker
いずれのサイトの作者さんのサンプルコードや解説で、だいぶ理解を深めることができた。

似たようなので以下もみつけた。まだじっくり見ていないけど、役に立つかも。
LGTM Editor

ところで、downloadリンクをクリックするとcanvasに配置した画像を保存できる・・・はずなのだが、うまくいかない。

数時間試行錯誤してみたが、やっぱりだめ。Google検索で「fabric.Image.fromURL save」といれて情報をあさりまくって、やっと見つけた良いページ。
以下のページに「画像はローカルに置いたやつをできれば使ってください」とあった。
javascript.log

自分のコードでは、横着して外部のサイトの画像を適当にローカルからリンクしていたので、画像をきちんとローカルに保存しなおしてそれを読むようにしたら、ちゃんとdownloadできるようになった。感謝である。

 

2017/11/11(土)追記:

PDF出力ができるように、jspdfをCDNで読み込むようにした。
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js”></script>
普段はFFを使っているのだが、なぜかタブが余計に開く。
調べてみると、FFとChromeとEdgeの3つのブラウザでは、挙動が違う。
とりあえず、すべてのブラウザで保存できるようにできたけども、FFでは症状が回復せず。わからん。これは後日の課題としておこう。

-IT仕事

執筆者:

関連記事

no image

Excel2013のリボン&タブのカスタマイズで格闘。

今まで、BookのXMLにリボンメニューを仕込むのは難しいのだと思っていた。 実際、Excel2003でアドインメニューを作ったことがあるが、そのときは相当苦労した。 しかし無料のツールを使えば、かな …

Power Automate Desktopで .NETスクリプトを実行して正規表現で文字を抜き出す

やりたかったことは、 文字列を与えて、その文字列から正規表現でハイフンに挟まれた文字列を取り出すこと。 ChatGPTに質問したら、それらしいスクリプトは作ってくれたけど、いざ動かすとエラーになり、正 …

ThemlerでResponsive表示で画像の縦横比が狂う

Themlerを試用している。 操作レスポンスは遅いけれど、ビジュアルにWebが作れるので、感動している。 試しに当ブログのテーマをThemlerで作って適用してみた。 だいたいOKなのだが、ブラウザ …

no image

FireFoxでページ内の文字列

FireFoxでページ内の文字列を検索することがよくある。 Ctrl+Fで検索窓を出して、バーについている×ボタンで閉じる、という操作を長年繰り返してきたのだが、二本の指を使うのも、キーボードからマウ …

no image

Amazonツール注文情報取得シートでListOrderで想定しない値エラー

会社では商品をAmazonでセラーとして販売している。 宅急便の伝票を作るときに注文情報(ListOrders)をExcelでCSVで出力できないかなあと、何かのツールを探していて、以下にたどり着いた …