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