画像保存

index.html

@@ -6,13 +6,11 @@
 <link rel="manifest" href="manifest.json">
 <style>
 body {
-	background-color:#BFE3F5;
+	background-color:#F6DDC9;
 }
 .contents{
 	display: flex;
 }
-.main{
-}
 .palette{
 	padding-top:10px;
 	padding-left:15px;
@@ -73,7 +71,7 @@
 	top: -10px;
 	left: 10px;
 	width: 180px;
-	background-color: #2899F1;
+	background-color: #F8537B;
 	text-align:center;
 	padding:5px;
 	color:#FFF;
@@ -155,7 +153,7 @@
 <a href="#" class="btn">最初から書き直す</a>
 <a href="#" class="btn">左右反転</a>
 <a href="#" class="btn">フルスクリーン</a>
-<a href="#" class="btn">PNGで保存</a>
+<a href="#" class="btn" onclick="saveCanvas();">PNGで保存</a>
 <!--/#toolarea--></div>
 <!--/.main--></div>
 <div class="palette">
@@ -395,6 +393,69 @@
 function scx(){return document.documentElement.scrollLeft || document.body.scrollLeft;}
 function scy(){return document.documentElement.scrollTop  || document.body.scrollTop ;}
 mam_draw_init();
+
+function saveCanvas(){
+	var src1_img = new Image();
+	var src2_img = new Image();
+	src1_img.src = $("#canvas")[0].toDataURL();
+	src1_img.addEventListener('load', function() {
+		src2_img.src = $("#canvas2")[0].toDataURL();
+		src2_img.addEventListener('load', function() {
+			var dst_canvas = document.createElement('canvas');
+			dst_canvas.width = 800;
+			dst_canvas.height = 600;
+			dst_canvas.getContext("2d").drawImage(src1_img, 0, 0, 800, 600);
+			dst_canvas.getContext("2d").drawImage(src2_img, 0, 0, 800, 600);
+
+			var imageType = "image/png";
+			var fileName = "download.png";
+			// base64エンコードされたデータを取得 「data:image/png;base64,iVBORw0k～」
+			var base64 = dst_canvas.toDataURL(imageType);
+			// base64データをblobに変換
+			var blob = Base64toBlob(base64);
+			// blobデータをa要素を使ってダウンロード
+			saveBlob(blob, fileName);
+		}, false);
+	}, false);
+}
+
+// Base64データをBlobデータに変換
+function Base64toBlob(base64){
+	// カンマで分割して以下のようにデータを分ける
+	// tmp[0] : データ形式（data:image/png;base64）
+	// tmp[1] : base64データ（iVBORw0k～）
+	var tmp = base64.split(',');
+	// base64データの文字列をデコード
+	var data = atob(tmp[1]);
+	// tmp[0]の文字列（data:image/png;base64）からコンテンツタイプ（image/png）部分を取得
+	var mime = tmp[0].split(':')[1].split(';')[0];
+	//  1文字ごとにUTF-16コードを表す 0から65535 の整数を取得
+	var buf = new Uint8Array(data.length);
+	for (var i = 0; i < data.length; i++) {
+		buf[i] = data.charCodeAt(i);
+	}
+	// blobデータを作成
+	var blob = new Blob([buf], { type: mime });
+	return blob;
+}
+
+// 画像のダウンロード
+function saveBlob(blob, fileName){
+	var url = (window.URL || window.webkitURL);
+	// ダウンロード用のURL作成
+	var dataUrl = url.createObjectURL(blob);
+	// イベント作成
+	var event = document.createEvent("MouseEvents");
+	event.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
+	// a要素を作成
+	var a = document.createElementNS("http://www.w3.org/1999/xhtml", "a");
+	// ダウンロード用のURLセット
+	a.href = dataUrl;
+	// ファイル名セット
+	a.download = fileName;
+	// イベントの発火
+	a.dispatchEvent(event);
+}
 </script>
 </body>
 </html>