*

FabricJSについて調べてみた。

ベースは、こちらのブログで公開されていたコード。深く感謝!
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では症状が回復せず。わからん。これは後日の課題としておこう。

2017/11/08 | IT仕事

関連記事

no image

Xojoに興味がある

というのも、Webアプリが作りたくなったからである。 https:/...

記事を読む

no image

ContactForm7プラグイン-チェックしたチェックボックスの背景色を変える

本日やったこと。 ContactForm7プラグインを使っている...

記事を読む

no image

ExcelWebAddin でWebフォームを自動入力

たまーーに、おじさんの不動産物件の入力をボランティアでお手伝している。...

記事を読む

no image

GoogleChromeの拡張機能を使ってGmailの本文中の文字を簡単に再検索する方法

Gmailの注文メールを開いて、お客様の注文番号や電話番号・メールアド...

記事を読む

新着記事

no image

Xojoに興味がある

というのも、Webアプリが作りたくなったからである。 https:/...

記事を読む

no image

httpからhttpsに移行した際にいいねカウントを保持するためにWordPressサイトでやったこと

以前の記事でXeoryBaseのテーマにおいていろいろと作業をしてたこ...

記事を読む

no image

ContactForm7プラグイン-チェックしたチェックボックスの背景色を変える

本日やったこと。 ContactForm7プラグインを使っている...

記事を読む

no image

Office2013のSELFCERT.EXEの場所

さがして、やっと見つかった。 自分のPC環境の場合は、以下だった...

記事を読む

コメント/トラックバック

現在、この投稿へのコメント/トラックバックは受け付けていません。

前の記事:

次の記事:

no image
FabricJSについて調べてみた。

ベースは、こちらのブログで公開されていたコード。深く感謝! Fabr...

no image
Xojoに興味がある

というのも、Webアプリが作りたくなったからである。 https:/...

no image
httpからhttpsに移行した際にいいねカウントを保持するためにWordPressサイトでやったこと

以前の記事でXeoryBaseのテーマにおいていろいろと作業をしてたこ...

no image
ContactForm7プラグイン-チェックしたチェックボックスの背景色を変える

本日やったこと。 ContactForm7プラグインを使っている...

no image
Office2013のSELFCERT.EXEの場所

さがして、やっと見つかった。 自分のPC環境の場合は、以下だった...

→もっと見る

PAGE TOP ↑