自动生成圆形装盘奖励图片

 1     <div class="page">
 2         <div class="title">
 3             <h1>自动生成圆形转盘图片1.0</h1>
 4         </div><!--end .title-->
 5         <div class="param">
 6             <div class="param-background">
 7                 <h3>背景图片</h3>
 8                 <div class="bg">
 9                     <span class="bg-item">背景图片：</span>
10                     <span class="item-content">
11                         <span class="fileWrapper">
12                             <span class="input-file">
13                                 选择文件<input type="file" hidefocus="true" value="" class="select-file">
14                             </span>
15                         </span>
16                         <i class="filename"></i>
17                     </span>
18                     <div class="img-hold" id="bg"></div>
19                 </div>
20             </div><!--end .param-background-->
21             <div class="param-base">
22                 <h3>基本参数</h3>
23                 <ul>
24                     <li style="display: none;"><label>背景宽度：<input type="text" id="bgWidth" readonly= ‘readonly‘></label></li>
25                     <li style="display: none;"><label>背景高度：<input type="text" id="bgHeight" readonly= ‘readonly‘></label></li>
26                     <li style="display: none;"><label>奖品宽度：<input type="text" id="giftWidth" readonly= ‘readonly‘></label></li>
27                     <li style="display: none;"><label>奖品高度：<input type="text" id="giftHeight" readonly= ‘readonly‘></label></li>
28                     <li><label>图片拉伸：<input type="text" id="scaleWidth" value="1">宽度,系数少于1</label></li>
29                     <li><label>图片拉伸：<input type="text" id="scaleHeight" value="1">高度,系数少于1</label></li>
30                     <li><label>位移参数：<input type="text" id="displaceNum" value="50"></label>距离中心点的距离</li>
31                     <li style="display: none;"><label>奖品个数：<input type="text" id="giftNum" readonly= ‘readonly‘></label></li>
32                 </ul>
33             </div><!--end .param-base-->
34             <div class="param-img">
35                 <h3>奖励图片</h3>
36                 <ul id="gift-list">
37                     <li>
38                         <span class="item-title">图片1：</span>
39                         <span class="item-content">
40                             <span class="fileWrapper">
41                                 <span class="input-file">
42                                     选择文件<input type="file" hidefocus="true" value="" class="select-file">
43                                 </span>
44                             </span>
45                             <i class="filename"></i>
46                         </span>
47                         <div class="img-hold"></div>
48                         <div class="oprate">
49                             <a href="javascript:;" class="add-btn">增加</a>
50                             <a href="javascript:;" class="delete-btn">删除</a>
51                         </div>                        
52                     </li>                    
53                 </ul>
54             </div><!--end .param-img-->
55         </div><!--end .param-->
56         <div class="btn">
57             <a href="javascript:void(0);">生成图片</a>
58         </div>
59         <div class="canvas-box">
60             <h3>画布区域</h3>
61             <canvas id="canvas"></canvas>
62             <canvas id="temp"></canvas>
63         </div><!--end .canvas-box-->
64         <div class="result-box">
65             <h3>图片区域</h3>
66             <div class="result"></div>                
67             <div class="result-btn">
68                 <a href="#@" target="_blank">点击查看</a>
69             </div>             
70         </div><!--end .result-box-->    
71     </div><!--end .page-->

  1 var A = {
  2     init: function() {
  3         A.chooseFile();
  4         $(document).delegate(‘.add-btn‘, ‘click‘, A.addItem);
  5         $(document).delegate(‘.delete-btn‘, ‘click‘, A.removeItem);
  6         $(‘.btn a‘).click(function() {
  7             A.convertImageToCanvas(); //先生成canvas
  8             var obj = document.getElementById(‘canvas‘);
  9             var image = A.convertCanvasToImage(obj); //后生成图片
 10             $(‘.result‘).html(‘‘).append(image); //插入图片
 11             $(‘.result-btn a‘).attr(‘href‘, image.src);
 12         });
 13     },
 14     chooseFile: function() {
 15         if (typeof FileReader === ‘underfined‘) {
 16             alert(‘抱歉，你的浏览器不支持 FileReader‘);
 17             return false;
 18         } else {
 19             $(document).delegate(‘.select-file‘, ‘change‘, A.readFile);
 20         }
 21     },
 22     getIndex: function(obj, arr) {
 23         var i = 0;
 24         for (i = 0; i < arr.length; i++) {
 25             if (arr[i] == obj) {
 26                 return i;
 27             }
 28         }
 29     },
 30     getParam: function() {
 31         $(‘#bgWidth‘).val(function() {
 32             return $(‘.bg‘).find(‘img‘).css(‘width‘) || 0;
 33         });
 34         $(‘#bgHeight‘).val(function() {
 35             return $(‘.bg‘).find(‘img‘).css(‘height‘) || 0;
 36         });
 37         $(‘#giftWidth‘).val(function() {
 38             return $(‘#gift-list‘).find(‘img‘).css(‘width‘) || 0;
 39         });
 40         $(‘#giftHeight‘).val(function() {
 41             return $(‘#gift-list‘).find(‘img‘).css(‘height‘) || 0;
 42         });
 43         $(‘#giftNum‘).val(function() {
 44             return $(‘#gift-list‘).find(‘img‘).size();
 45         })
 46     },
 47     readFile: function() { //读取图片显示图片
 48         var _this = this;
 49         var reader = new FileReader();
 50         var f = _this.files[0];
 51         if (!/image\/\w+/.test(f.type)) {
 52             alert("文件必须为图片！");
 53             return false;
 54         } else {
 55             reader.onload = function(e) {
 56                 var data = e.target.result;
 57                 var image = new Image();
 58                 image.onload = function() {
 59                     var width = image.width,
 60                         height = image.height;
 61                     $(_this).parents(‘.item-content‘).next(‘.img-hold‘).find(‘img‘).css({
 62                         ‘width‘: width,
 63                         ‘height‘: height
 64                     });
 65                     A.getParam();
 66                 };
 67                 image.src = data;
 68                 var imgHtml = ‘<img src="‘ + this.result + ‘" />‘;
 69                 $(_this).parents(‘.item-content‘).next(‘.img-hold‘).html(‘‘).append(imgHtml);
 70             }
 71             reader.readAsDataURL(f);
 72             var fileName = _this.value.split(‘\\‘).pop(); //获取文件选择框的值
 73             $(_this).parents(‘.item-content‘).find(‘.filename‘).text(fileName); //填充图片预览
 74         }
 75     },
 76     addItem: function() {
 77         var i = $(‘.item-title‘).size() + 1;
 78         var _html = ‘<li><span class="item-title">图片‘ + i + ‘：</span><span class="item-content"><span class="fileWrapper"><span class="input-file">选择文件<input type="file" hidefocus="true" value="" class="select-file"></span></span><i class="filename"></i></span><div class="img-hold"></div><div class="oprate"><a href="javascript:;" class="add-btn">增加</a><a href="javascript:;" class="delete-btn">删除</a></div></li>‘;
 79         $(‘#gift-list‘).append(_html);
 80     },
 81     removeItem: function() {
 82         var left = $(‘#gift-list li‘).size();
 83         if (left <= 1) {
 84             alert(‘只有一个了哦！‘)
 85         } else {
 86             $(this).parents(‘li‘).remove();
 87             $(‘#giftNum‘).val(left - 1);
 88             $(‘.item-title‘).each(function(i) {
 89                 $(this).text(‘图片‘ + (i + 1) + ‘：‘);
 90             });
 91         }
 92     },
 93     getJsImageObj: function() {
 94         var arr = [];
 95         var oImg = $(‘#gift-list‘).find(‘img‘);
 96         for (var i = 0; i < oImg.length; i++) {
 97             arr.push(oImg[i]);
 98         }
 99         return arr;
100     },
101     convertImageToCanvas: function() { //生成两个画布
102         var context = document.getElementById(‘canvas‘);
103         var ctx = context.getContext("2d");
104         var ctxWidth = parseInt(document.getElementById(‘bgWidth‘).value);
105         var ctxHeight = parseInt(document.getElementById(‘bgHeight‘).value);
106         var image = $(‘.bg‘).find(‘img‘)[0]; //jq 转 js 对象
107         context.setAttribute(‘width‘, ctxWidth); //绘制画布的宽度
108         context.setAttribute(‘height‘, ctxHeight); //绘制画布的高度
109         ctx.clearRect(0, 0, ctxWidth, ctxHeight); //画布某某个范围内的内容,参数分别为x,y,宽度,高度 
110         ctx.drawImage(image, 0, 0); //绘制大背景
111         A.printGift(); //打印图片
112     },
113     printGift: function() {
114         var displaceNum = document.getElementById(‘displaceNum‘).value || 0;
115         var scaleWidth = document.getElementById(‘scaleWidth‘).value || 0;
116         var scaleHeight = document.getElementById(‘scaleHeight‘).value || 0;
117         var context = document.getElementById(‘canvas‘);
118         var ctx = context.getContext("2d");
119         var deg = 360 / parseInt(document.getElementById(‘giftNum‘).value); //旋转角度
120         var ctxWidth = parseInt(document.getElementById(‘bgWidth‘).value);
121         var ctxHeight = parseInt(document.getElementById(‘bgHeight‘).value);
122         var objGift = A.getJsImageObj();
123         ctx.translate(ctxHeight / 2, ctxHeight / 2); //确定中心点中心点
124         for (var i = 0; i < objGift.length; i++) { //循环绘制礼物小图
125             ctx.save();
126             ctx.rotate((deg * i) * Math.PI / 180);
127             ctx.translate(0, -displaceNum);
128             ctx.drawImage(objGift[i], -objGift[i].width / 2 * scaleWidth, -objGift[i].height / 2 * scaleHeight, objGift[i].width * scaleWidth, objGift[i].height * scaleHeight); //离中心点的参数也需要可以配置,参数：图片地址，离中心点X，离中心点y,图片width伸缩，图片height伸缩
129             ctx.restore();
130         }
131     },
132     convertCanvasToImage: function(canvas) { //canvas 转 image ,暂时只能转png
133         var image = new Image();
134         image.src = canvas.toDataURL("images/png");
135         return image;
136     }
137 }
138 A.init();