Canvasで画像を重ね合わせて描画した要素をそのまま画像として生成したい

こちらのページを参考にhtml5のFile APIを使ってドラッグ＆ドロップし、そこに放り込まれた画像をベース画像とし、重ねレイヤーとしての画像を1枚に合わせてcanvasで描画することまではできましたが、
こちらで描画されたcanvas要素をそのまま画像ファイルとしてcaptureImage要素内に出力したいのですが、画像としての生成手順がわかりません。

下記のコードの修正点のご教授宜しくお願い致します。

html
1<div id="dropZone">画像ファイルを<br>ドロップ</div>
2<div id="captureImage">
3<canvas id="imageCanvas"></canvas>
4</div>

css
1#dropZone{
2display: block;
3border: 2px dashed #bbb;
4border-radius: 5px;
5color: #bbb;
6padding: 25px;
7text-align: center;
8margin: 10px auto 5px;
9font-size: 12px;
10-khtml-user-drag: element;
11}
12
13#captureImage{
14width: 500px;
15height: 500px;
16}

javascript
1	function handleFileSlice(evt) {
2		
3		evt.stopPropagation();
4		evt.preventDefault();
5		var files = evt.dataTransfer.files;
6		var output = [];
7		for (var i = 0, f; f = files[i]; i++) {
8			
9			//ファイルの形式を確認
10			if (!f.type.match('image.*')) {
11				alert("このファイルは画像ファイルではありません");
12				continue;
13			}
14	
15			var file = f;
16			
17			//重ね合わせる画像パスを配列に格納
18			var fileArray = [URL.createObjectURL(file), "icon.png"];
19			var xywh = [{x: 0, y: 0, w: 500, h: 500}, {x: 10, y: 10, w: 100, h: 100}];
20			var numFiles = fileArray.length;
21			var loadedCount = 0;
22			var imageObjectArray = [];
23			
24			
25			var canvas = document.getElementById('imageCanvas');
26			var ctx = canvas.getContext('2d');
27			
28			
29		function loadImages(){
30				var imgObj = new Image();
31				imgObj.addEventListener('load',
32					function(){
33						loadedCount++;
34						imageObjectArray.push(imgObj);
35						if(numFiles === loadedCount){
36							drawImage();
37						}else{
38							loadImages();
39						}
40					},
41					false
42				);
43				
44				imgObj.src = fileArray[imageObjectArray.length];
45				$("#captureImage").append(imgObj[1]);
46			}
47			function drawImage(){
48				canvas.width = 500;
49				canvas.height = 500;
50				for(var i in imageObjectArray){
51					ctx.drawImage(imageObjectArray[i], xywh[i]['x'], xywh[i]['y'], xywh[i]['w'], xywh[i]['h']);
52					imageObjectArray[i] = null;
53				}
54			}
55			loadImages();			
56		};
57		
58		
59	};
60	
61	//画像ファイルのドラッグ＆ドロップ設定
62	function handleDragOver(evt) {
63		evt.stopPropagation();
64		evt.preventDefault();
65		evt.dataTransfer.dropEffect = 'copy';
66	};
67	var resizeZone = document.getElementById('dropZone');
68	resizeZone.addEventListener('dragover', handleDragOver, false);
69	resizeZone.addEventListener('drop', handleFileSlice, false);		
70	resizeZone.addEventListener('dragenter', handleDragOver, false);
71
72
73

※できれば生成される画像のファイル名も元のドロップファイル名を引き継いで出力できれば理想です。

turbgraphics200

2017/01/19 10:39

ファイル名の引継ぎとはダウンロードさせるのが目的なのでしょうか？

sika

2017/01/19 10:42

はい、そうです。用途としては元画像にアイコンを付けて再ダウンロードという物になりますので、可能ならば元ファイル名をそのまま引き継ぐことができれば理想です。

行動規範の内容に同意します

回答1件

ベストアンサー

<canvas>にtoDataURL()でURL.createObjectURLと同等のことができます。また、toBlob()でも同様のことができます。toDataURL()との違いは、toDataURL()はbase64を使用したURLとなるため、メモリ使用量が大きくなります。ただ取得は同期で取得することが可能です。toBlob()はBlobで取得するためバイナリーデータのままで扱うことができますが、取得は非同期となります。また、toBlob()はSafariがまだ未対応です。
それと、ファイル名ですが、<a>のdownload属性に元のファイル名を設定すれば、ダウンロードするときにそのファイル名が使用されます。

js
1// toBloB()を使用した場合
2if(cnv.toBlob) {
3    cnv.toBlob(function(blob) {
4        var dlAnchor = document.createElement('a');
5        dlAnchor.download = file.name;
6        var dlImg = new Image();
7        dlAnchor.href = dlImg.src = URL.createObjectURL(blob);
8        dlAnchor.appendChild(dlImg);
9        document.body.appendChild(dlAnchor);
10    }, function(err) {console.log(err)});
11}
12
13// toDataURL()を使用した場合
14var url = cnv.toDataURL();
15var dlAnchor2 = document.createElement('a');
16dlAnchor2.download = file.name;
17var dlImg2 = new Image();
18dlAnchor2.href = dlImg2.src = url;
19dlAnchor2.appendChild(dlImg2);
20document.body.appendChild(dlAnchor2);