小程序-装逼生成器：canvas绘制图片

这两天抽空写了练习区项目--装逼生成器，中间也遇到了一些问题，感谢 amis提供的素材和创意；
好了，废话不多说了，先上效果图
前端菜鸟一枚，有不足之处还望老司机批评指点啦，感激！！tips：






1，现在安卓机器测试还有问题，正在解决，
2，原设计稿姓名为黑色字体白色描边效果，由于微信小程序中canvas还没有 ctx.strokeText()方法，所以暂时没做描边效果
由于黑色字体不明显，暂时改为灰色字体显示
3，测试有问题请回帖哦，感激！！
4，开发工具无法加载图片，请用手机测试
主要代码:

1. // pages/main/index.js
   
2. var util = require("../../utils/util.js");
   
3. var toPinyin = require("../../utils/toPinyin.js");
   
4. Page({
   
5.   data:{
   
6.     imagePath:"/images/bankcard.jpg",
   
7.     name:"WANG SICONG",
   
8.     money:"1000000",
   
9.     maskHidden:true,
   
10.     /*
    
11.     官网说hidden只是简单的控制显示与隐藏，组件始终会被渲染，
    
12.     但是将canvas转化成图片走的居然是fail，hidden为false就是成功的
    
13.     所以这里手动控制显示隐藏canvas
    
14.     */
    
15.     canvasHidden:false//初始时显示canvas
    
16.   },
    
17.   onLoad:function(options){
    
18.     // 页面初始化 options为页面跳转所带来的参数
    
19.      
    
20.   },
    
21.   onReady:function(){
    
22.     // 页面渲染完成
    
23.     this.createNewImg();
    
24.     //创建初始化图片
    
25.      
    
26.   },
    
27.   onShow:function(){
    
28.      
    
29.     // 页面显示
    
30.   },
    
31.   onHide:function(){
    
32.     // 页面隐藏
    
33.   },
    
34. 
    
35.   onUnload:function(){
    
36.     // 页面关闭
    
37. 
    
38.   },
    
39. //将金额绘制到canvas的固定
    
40.   setMoney:function(context){
    
41.     var money=util.toThousands(this.data.money);
    
42.     console.log(money);
    
43.     context.setFontSize(24);
    
44.     context.setFillStyle("#484a3d");
    
45.     context.fillText(money, 340, 190);
    
46.     context.stroke();
    
47.   },
    
48.   //将姓名绘制到canvas的固定
    
49.   setName:function(context){
    
50.     var name = toPinyin.Pinyin.getFullChars(this.data.name);
    
51.     context.setFontSize(20);
    
52.     context.setFillStyle("#67695b");
    
53.     context.save();
    
54.     context.translate(170, 506);//必须先将旋转原点平移到文字位置
    
55.     context.rotate(-5 * Math.PI / 180);
    
56.     context.fillText(name, 0, 0);//必须为（0,0）原点
    
57.     context.restore();
    
58.     context.stroke();
    
59.   },
    
60.   //将canvas转换为图片保存到本地，然后将图片路径传给image图片的src
    
61.   createNewImg:function(){
    
62.     var that = this;
    
63.     var context = wx.createContext();
    
64.     var path = "images/bankcard.jpg";
    
65.     //将模板图片绘制到canvas,在开发工具中drawImage()函数有问题，不显示图片
    
66.     //不知道是什么原因，手机环境能正常显示
    
67.     context.drawImage(path, 0, 0,686,686);
    
68.     this.setMoney(context);
    
69.     this.setName(context);
    
70.     //绘制图片
    
71.     wx.drawCanvas({
    
72.           canvasId: "mycanvas",
    
73.           actions: context.getActions()
    
74.     });
    
75.     //将生成好的图片保存到本地
    
76.     wx.canvasToTempFilePath({
    
77.       canvasId: 'mycanvas',
    
78.       success: function success(res) {
    
79.         wx.saveFile({
    
80.           tempFilePath: res.tempFilePath,
    
81.           success: function success(res) {
    
82.             that.setData({
    
83.               imagePath:res.savedFilePath,
    
84.               canvasHidden:true//生成完图片后将画布隐藏
    
85.             });
    
86.           }
    
87.         });
    
88.       }
    
89.     });
    
90.   },
    
91.   //点击图片进行预览，长按保存分享图片
    
92.   previewImg:function(e){
    
93.     var img = this.data.imagePath
    
94.     wx.previewImage({
    
95.       current: img, // 当前显示图片的http链接
    
96.       urls: [img] // 需要预览的图片http链接列表
    
97.     })
    
98.   },
    
99.   formSubmit: function(e) {
    
100.     var that = this;
     
101.     var name = e.detail.value.name;
     
102.     var money = e.detail.value.money;
     
103.     name = name == ""?"WANG SICONG":name;
     
104.     money = money == ""?"1000000":money;
     
105.     this.setData({
     
106.       name:name,
     
107.       money:money,
     
108.       maskHidden:false,
     
109.       canvasHidden:false
     
110.     });
     
111.     wx.showToast({
     
112.       title: '装逼中...',
     
113.       icon: 'loading',
     
114.       duration:2000
     
115.     });
     
116.     setTimeout(function(){
     
117.       wx.hideToast()
     
118.       that.createNewImg();
     
119.       that.setData({
     
120.         maskHidden:true
     
121.       });
     
122.     },2000)
     
123.      
     
124.   }
     
125. 
     
126. })

复制代码

1. <!--pages/main/index.wxml-->
   
2. <view class="container-box">
   
3.     <view class="img-box">
   
4.         <image bindtap="previewImg" mode="scaleToFill" src="{{imagePath}}"></image>
   
5.     </view>
   
6.     <form bindsubmit="formSubmit">
   
7.         <view class="input-row">
   
8.             <label>姓名</label>
   
9.             <input name='name' type="text" maxlength="20" placeholder="王 思聪"/>
   
10.         </view>
    
11.         <view class="input-row">
    
12.             <label>金额</label>
    
13.             <input name="money" type="number" maxlength="7"  placeholder="1000000"/>
    
14.         </view>
    
15.         <button formType="submit" class="mybtn" type="primary">生成图片</button>
    
16.     </form>
    
17. </view>
    
18. <view hidden="{{maskHidden}}" class="mask"></view>
    
19. <view class="canvas-box">
    
20.     <canvas hidden="{{canvasHidden}}" style="width: 686px;height: 686px;" canvas-id="mycanvas"/>
    
21. </view>

复制代码

项目地址：

游客，如果您要查看本帖隐藏内容请回复