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

[复制链接]
hyt_xcx手机认证 实名认证 视频认证 发表于 2016-12-12 23:40:13 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
这两天抽空写了练习区项目--装逼生成器,中间也遇到了一些问题,感谢 amis提供的素材和创意;
好了,废话不多说了,先上效果图
前端菜鸟一枚,有不足之处还望老司机批评指点啦,感激!!tips: 1.png

2.png

3.png


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.   onUnload:function(){
  35.     // 页面关闭

  36.   },
  37. //将金额绘制到canvas的固定
  38.   setMoney:function(context){
  39.     var money=util.toThousands(this.data.money);
  40.     console.log(money);
  41.     context.setFontSize(24);
  42.     context.setFillStyle("#484a3d");
  43.     context.fillText(money, 340, 190);
  44.     context.stroke();
  45.   },
  46.   //将姓名绘制到canvas的固定
  47.   setName:function(context){
  48.     var name = toPinyin.Pinyin.getFullChars(this.data.name);
  49.     context.setFontSize(20);
  50.     context.setFillStyle("#67695b");
  51.     context.save();
  52.     context.translate(170, 506);//必须先将旋转原点平移到文字位置
  53.     context.rotate(-5 * Math.PI / 180);
  54.     context.fillText(name, 0, 0);//必须为(0,0)原点
  55.     context.restore();
  56.     context.stroke();
  57.   },
  58.   //将canvas转换为图片保存到本地,然后将图片路径传给image图片的src
  59.   createNewImg:function(){
  60.     var that = this;
  61.     var context = wx.createContext();
  62.     var path = "images/bankcard.jpg";
  63.     //将模板图片绘制到canvas,在开发工具中drawImage()函数有问题,不显示图片
  64.     //不知道是什么原因,手机环境能正常显示
  65.     context.drawImage(path, 0, 0,686,686);
  66.     this.setMoney(context);
  67.     this.setName(context);
  68.     //绘制图片
  69.     wx.drawCanvas({
  70.           canvasId: "mycanvas",
  71.           actions: context.getActions()
  72.     });
  73.     //将生成好的图片保存到本地
  74.     wx.canvasToTempFilePath({
  75.       canvasId: 'mycanvas',
  76.       success: function success(res) {
  77.         wx.saveFile({
  78.           tempFilePath: res.tempFilePath,
  79.           success: function success(res) {
  80.             that.setData({
  81.               imagePath:res.savedFilePath,
  82.               canvasHidden:true//生成完图片后将画布隐藏
  83.             });
  84.           }
  85.         });
  86.       }
  87.     });
  88.   },
  89.   //点击图片进行预览,长按保存分享图片
  90.   previewImg:function(e){
  91.     var img = this.data.imagePath
  92.     wx.previewImage({
  93.       current: img, // 当前显示图片的http链接
  94.       urls: [img] // 需要预览的图片http链接列表
  95.     })
  96.   },
  97.   formSubmit: function(e) {
  98.     var that = this;
  99.     var name = e.detail.value.name;
  100.     var money = e.detail.value.money;
  101.     name = name == ""?"WANG SICONG":name;
  102.     money = money == ""?"1000000":money;
  103.     this.setData({
  104.       name:name,
  105.       money:money,
  106.       maskHidden:false,
  107.       canvasHidden:false
  108.     });
  109.     wx.showToast({
  110.       title: '装逼中...',
  111.       icon: 'loading',
  112.       duration:2000
  113.     });
  114.     setTimeout(function(){
  115.       wx.hideToast()
  116.       that.createNewImg();
  117.       that.setData({
  118.         maskHidden:true
  119.       });
  120.     },2000)
  121.      
  122.   }

  123. })
复制代码
  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>
复制代码
项目地址:
游客,如果您要查看本帖隐藏内容请回复


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

专注源码分享,教程分享
全国服务电话

187-8198-7163

周一至周8:00-22:00

反馈建议

cdhaoyt@163.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.2© 2001-2013 Comsenz Inc.( 蜀ICP备16032957号-1