コピー2014.02.04canvasを画像データとして取得したい場合は、canvasのDOMオブジェクトにtoDataURLメソッドを使えば簡単に取得できる。Painterを開いて適当に絵を描き、F12キーで開発者ツールを開いてコンソール画面で『window.open(document.querySelector(‘canvas’).toDataURL())』とすると描いた画像データが表示されるので、右クリックで保存できる。ちなみに、標準ではPNG画像だけれども、toDataURLの引数を”image/jpeg”とすると、JPEG画像が取得できる(ただし、透過部分は真っ黒になるよう)。上記で作成された画像データはBase64のデータ。これをどうやったらPHPを用いて画像ファイルとしてサーバー上に保存できるかが分からなかったので調べてみると、下記サイトに書いてありました。iconDecotter-Logただ、base64_decodeという関数でbase64のデータをデコードして、imagecreatefromstringという関数で画像リソース化して、imagepngという関数で画像ファイルとして保存できるよう。PHPはいろんな関数があるなぁ。分からないことばかりなのでもっと勉強したほうがよさそう。上記をそのままコピペすると、うまくいかなかったので下記のように変更しました。,'./test.png');?>19行目で透明色を有効にしています。これがないと背景が真っ黒の画像になりました。後、自分の環境ではimagepng関数の第二引数がダブルクォーテーションだとなぜかうまくいかなかったのでシングルクォーテーションに変更。以下、動作サンプルcanvasを使ったお絵描き投稿システムお絵描き部分については、ほぼドットインストールの『Canvasでお絵かきアプリ』の6回目までと同じです。プログラミングならドットインストール今後、お絵かき掲示板を作るとしたら、これを基本にどんどん拡張していこうと思う。普段、残業なんて滅多にしない職場で働いている自分ですが、この2週間ほどは激務でした(どれぐらい激務だったかはいいません。それはともかく、その...HTML5canvasのお絵描きツールに塗りつぶし機能をつけてみる塗りつぶし機能を作ってみようと思ったけど、いろいろ苦戦。再帰を使えば簡単にできると思ったのですが、小さい範囲ならともかく、ちょっと大きくなるとブラウザに怒られました。いうわけで、JavaScriptに以下のようなコードを記述。テクニックバイブルという本を読んでいるのですが、初めて知ったことがいろいろ書いてあって驚愕する日々を送っています。U...HTML5canvasのお絵描きツールに『戻る』『進む』ボタンをつけてみる描き間違いがあったときに一つ前の状態に戻る機能がほしくなったので、その機能を追加することに。五回分を保存できるようにしてみた。塗りつぶし機能よりは簡単に実装できました。i...HTML5HTML5のCanvasを使ったお絵かきツールまとめ昔、お絵かき掲示板というものをよく閲覧していたのですが、最近はめっきり見なくなりました。今考えると結構すごい機能があったけど、FlashやJAVAアプレットだからiPadとかでは使えないんだよなぁ。思っているとCanvasでお絵かきア...HTML5canvasのお絵描きツールにからピッカー機能をつけてみるcanvasのお絵描きツールを作っていくと、カラーピッカー機能をつけたいと思うようになったので実装してみることに。画像容量が13倍前後にも膨れ上がる事に、最近気が付きました..現在解決策を探して翻弄しております。ご紹介ください宜しくお願いします。コメントをキャンセルメールアドレスが公開されることはありません。(幻冬舎文庫)(ブクログレビュー)カテゴリーPR2Web制作76CSS16HTML8HTML512jQuery17Vue.js14WebAPI2WordPress6まとめ13フリーソフト7プログラミング101JavaScript61PHP5R10SQL10UiPath7VBA3クラシックASP1日記11イベント5書評1未分類2豆知識19雑記25アーカイブ2023年4月12023年3月12023年1月12022年12月12022年11月32022年10月22022年9月12022年8月12022年6月22022年5月12022年4月32022年3月22022年2月52022年1月82019年9月22019年6月32019年5月12019年2月32019年1月32018年12月42018年11月12018年10月22018年9月22018年8月22018年7月32018年6月12018年5月22018年4月22018年3月52018年2月12016年11月32016年10月62016年2月12016年1月32015年12月22015年11月32015年10月12015年9月12015年7月12015年5月22015年4月22015年3月22015年2月22015年1月22014年12月42014年11月92014年10月62014年9月52014年8月72014年7月62014年6月52014年5月52014年4月62014年3月62014年2月92014年1月132013年12月82013年11月92013年10月82012年8月12012年6月32012年5月42012年4月42012年3月62012年2月82012年1月17タイトルとURLをコピーしました。