canvas File APIでアップロードした画像を配置したい

Javascript初心者です。
ブラウザ上でアップロードした画像を配置、文字を乗せて保存できるようなものを作りたいと調べながら試行錯誤しています。

canvas上にテキストを取得して配置まではできたのですが、File Apiを組み込見方がよくわかりません。
ご教授ください。宜しくお願いします。

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4	<meta charset="UTF-8">
5	<title>test</title>
6<link rel="stylesheet" type="text/css" href="ui.css">
7<script src="http://code.createjs.com/easeljs-0.7.1.min.js"></script>
8<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
9<script src="js.js"></script>
10</head>
11<body>
12		<dl class="table">
13			<dt>サンプル</dt>
14			<dd><input type="text" name="txt01" id="txt01" placeholder="サンプル" /></dd>
15			<dt>サンプル2</dt>
16			<dd><input type="text" name="txt02" id="txt02" placeholder="サンプル2" /></dd>
17			<dt>サンプル3</dt>
18			<dd><input type="text" name="txt03" id="txt03" placeholder="サンプル3" /></dd>
19			<dt>サンプル4</dt>
20			<dd><input type="text" name="txt04" id="txt04" placeholder="サンプル4" /></dd>
21		</dl>
22		<div class="btn">
23			<button id="update">画像作成</button>
24		</div>
25		<div class="wrap">
26		<canvas id="result" width="600" height="800"></canvas>
27		</div>
28
29</body>
30</html>

Javascript
1(function($){
2	var init = function(){
3		baseImg = new Image();
4		baseImg.src = 'bg.png';
5		stage = new createjs.Stage('result');
6	}
7	
8	var genImage = function(){
9		var img = new createjs.Bitmap(baseImg);	
10		stage.addChild(img);
11		var txt = {
12			'txt01' : {
13				'x' : 300,
14				'y': 100,
15				'size': '24px',
16				'align': 'center',
17				'color': '#fff'
18			},
19			'txt02' : {
20				'x' : 150,
21				'y': 150,
22				'size': '20px',
23				'align': 'center',
24				'color': '#fff'
25			},
26			'txt03' : {
27				'x' : 300,
28				'y': 150,
29				'size': '20px',
30				'align': 'center',
31				'color': '#fff'
32			},
33			'txt04' : {
34				'x' : 450,
35				'y': 150,
36				'size': '20px',
37				'align': 'center',
38				'color': '#fff'
39			}
40		}
41		$.each(txt,function(key,value){
42			var content = $('#' + key).val();
43			var obj = new createjs.Text(content);
44			obj.textAlign = value.align;
45			obj.font = 'bold ' + value.size + '/1.5 Meiryo,sans-serif'; 
46			obj.x = value.x; 
47			obj.y = value.y; 
48			obj.color = value.color;
49			stage.addChild(obj);
50		});
51		}
52 
53	$(function(){
54		$(window).on('load',function(){
55			init();
56		});
57		$('#update').on('click',function(e){
58			stage = new createjs.Stage('result');
59			genImage();
60			stage.update();
61		});
62	});
63})(jQuery);

CSS
1.wrap{
2	width: 600px;
3	height: 800px;
4	background:url(image.jpg) 0 0 no-repeat;
5	position: relative;
6}
7
8.result{
9	position: absolute;
10}
11

kei344

2016/07/27 14:11

File API がコード中にありませんが、どの部分がわからないのでしょうか。まったくわからないというのであれば、書籍などでお調べください。

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

回答1件

HTMLのScriptのURL等は自分の環境に合わせてください。
極力コードは変えてません。

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>test</title>
6<link rel="stylesheet" type="text/css" href="ui.css">
7<script src="easeljs-0.8.2.min.js"></script>
8<script src="https://code.jquery.com/jquery-1.8.1.min.js"></script>
9<script src="js.js"></script>
10</head>
11<body>
12        <dl class="table">
13            <dt>サンプル</dt>
14            <dd><input type="text" name="txt01" id="txt01" placeholder="サンプル" /></dd>
15            <dt>サンプル2</dt>
16            <dd><input type="text" name="txt02" id="txt02" placeholder="サンプル2" /></dd>
17            <dt>サンプル3</dt>
18            <dd><input type="text" name="txt03" id="txt03" placeholder="サンプル3" /></dd>
19            <dt>サンプル4</dt>
20            <dd><input type="text" name="txt04" id="txt04" placeholder="サンプル4" /></dd>
21        </dl>
22        <input type="file" id="file">
23        <div class="btn">
24            <button id="update">画像作成</button>
25            <button id="save">画像保存</button>
26        </div>
27        <div class="wrap">
28        <canvas id="result" width="600" height="800"></canvas>
29        </div>
30
31</body>
32</html>

JavaScript
1(function($){
2    var init = function(){
3        baseImg = new Image();
4        baseImg.src = 'bg.png';
5        stage = new createjs.Stage('result');
6    }
7
8    var genImage = function(){
9        var txt = {
10            'txt01' : {
11                'x' : 300,
12                'y': 100,
13                'size': '24px',
14                'align': 'center',
15                'color': '#fff'
16            },
17            'txt02' : {
18                'x' : 150,
19                'y': 150,
20                'size': '20px',
21                'align': 'center',
22                'color': '#fff'
23            },
24            'txt03' : {
25                'x' : 300,
26                'y': 150,
27                'size': '20px',
28                'align': 'center',
29                'color': '#fff'
30            },
31            'txt04' : {
32                'x' : 450,
33                'y': 150,
34                'size': '20px',
35                'align': 'center',
36                'color': '#fff'
37            }
38        }
39        $.each(txt,function(key,value){
40            var content = $('#' + key).val();
41            var obj = new createjs.Text(content);
42            obj.textAlign = value.align;
43            obj.font = 'bold ' + value.size + '/1.5 Meiryo,sans-serif'; 
44            obj.x = value.x; 
45            obj.y = value.y; 
46            obj.color = value.color;
47            stage.addChild(obj);
48        });
49        }
50
51    $(function(){
52        $(window).on('load',function(){
53            init();
54        });
55        $('#file').on('change',function(e){
56            var file = e.target.files[0];
57            var reader = new FileReader();
58            reader.addEventListener('load', function(e){
59                var img = new createjs.Bitmap(reader.result);  
60                stage.addChild(img);
61                stage.update();
62            }, false);
63            reader.readAsDataURL(file);
64        });
65        $('#update').on('click',function(e){
66            genImage();
67            stage.update();
68        });
69        $("#save").on("click", function(){
70            var canvas = document.getElementById("result");
71            var data = canvas.toDataURL("image/png");
72            var a = document.createElement('a');
73            var e = document.createEvent('MouseEvent');
74            
75            a.download = "ダウンロードファイル.png";
76            a.href = data;
77            e.initEvent("click", true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
78            a.dispatchEvent(e);
79        });
80    });
81})(jQuery);