初めに
ダウンロードやクリア(書いた内容)機能の実装等を含め、すこし迷ったので、そのあたりを含めたサンプルメモ(3.6.3で確認)
ライブラリのjsファイルについては、以下のページのダウンロードリンクから取得
fabric.jsのメインページ
フォルダ構成
root/
├ index.html
├ canvas.jpg(表示する画像)
└ assets/
├ main.js
└ fabric.min.js
ソース
HTML
index.html
<!DOCTYPE html>
<html>
<head>
<script src="./assets/js/fabric.min.js"></script>
<script src="./assets/js/main.js"></script>
</head>
<body>
<canvas id="canvas"></canvas>
<a id="download" href="#">ダウンロード</a>
<a id="init" href="javascript:void(0)">クリア</a>
</body>
</html>
JavaScript
main.js
// キャンバスの共通オブジェクト
var canvas = null;
// 読み込むファイル名（動的に変えてもＯＫ）
var FILENAME = "canvas.jpg";
window.addEventListener("load", function(){
// キャンバスの初期設定
const canvasinit = function(){
// キャンバス取得
var canvas = new fabric.Canvas('canvas');
// 手書きモードOK
canvas.isDrawingMode = true;
// 手書きの色
canvas.freeDrawingBrush.color = "#990000";
// 手書きの太さ
canvas.freeDrawingBrush.width = 10;
// 画像読み込み
var img = new Image();
img.src=FILENAME;
// 画像読み込んだときの処理
img.onload = function(){
// キャンバスサイズを設定()
canvas.setWidth(this.width);
canvas.setHeight(this.height);
// サイズを指定画像に合わせるために読み込み終わったときに、キャンバスに設定する
canvas.setBackgroundImage(FILENAME, canvas.renderAll.bind(canvas),
{
// キャンバス内の画像サイズを設定
scaleX: canvas.width / img.width,
scaleY: canvas.height / img.height
}
);
}
// 描いた内容はクリア、画像はそのまま
var init = document.getElementById("init");
init.addEventListener("click", function(){
// キャンバスクリア
canvas.clear();
// 画像を表示(上記onload処理にいく)
img.src=FILENAME;
});
}
// 初期処理で実行
canvasinit();
// ダウンロード処理
var download = document.getElementById("download");
download.addEventListener("click", function(){
// ダウンロードファイル名指定
this.setAttribute("download", "sample.jpg");
// キャンバスのオブジェクト取得
canvas = document.getElementById('canvas');
// base64に変換
var base64 = canvas.toDataURL("image/jpeg");
// ダウンロード
document.getElementById("download").href = base64;
});
});
ダウンロードは、ローカル実行では動かないことがあるのでお気を付けを（多分ブラウザのセキュリティレベルによるものかと）