每次做抽奖活动的时候，会有一张圆形的奖励图片。这个图片有时候运营偶尔修改一下还可以接受，但是万一很频繁的更换里面的内容的话，那每次都做一次修改那就很浪费时间，然后就想到了用canvas来自动生成这张图片。这样就节省了很多时间。
然后就需要用到一张固定尺寸的圆形转盘的背景，各种素材若干张，然后就可以自己手动上传图片生成这张图片了。
这个主要就是用到了canvas的rotate，translate，drawImage的方法就可以完成了，注意这个仅提供一个demo，可以自己再优化的哦，至于怎么优化，用过才知道！
HTML如下：
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-->
核心js代码：
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();
样式就自己美化了哦，然后别忘添加JQ库噢！
时间： 2024-07-31 12:03:00