腾讯分分彩QQ上有没?:微信小程序Canvas 绘制文字到固定位置

分分彩技巧 www.kqa8.cn 存在博客里偶尔再看看

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
//.wxml文件
    <view class="input-row">
      <label>装逼文案:</label>
      <input name='neirong' type="text" maxlength="20" placeholder="何止于装逼" />
    </view>
 
//.js文件
Page({
  data:{
    imagePath:"",
    neirong: "何止于装逼",
    maskHidden:true,
    },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
    this.createNewImg();
    //创建初始化图片
  },
//将canvas转换为图片保存到本地,然后将图片路径传给image图片的src
  createNewImg:function(){
    var that = this;
    var context = wx.createCanvasContext('mycanvas');
    var path = "/images/tools/iphone.jpg";
    //将模板图片绘制到canvas,在开发工具中drawImage()函数有问题,不显示图片
    //不知道是什么原因,手机环境能正常显示,官方推荐真机测试,工具端为模拟。
    context.drawImage(path, 0, 0, 686, 1485);
    //context.draw(true);
    //context.draw();
    this.setNeirong(context);
    //绘制图片
    context.draw();
    //将生成好的图片保存到本地,需要延迟一会,绘制期间耗时
    setTimeout(function(){
      wx.canvasToTempFilePath({
        canvasId: 'mycanvas',
        success: function (res) {
          var tempFilePath = res.tempFilePath;
          console.log(tempFilePath);
          that.setData({
            imagePath: tempFilePath,
            // canvasHidden:true
          });
        },
        fail: function (res) {
          console.log(res);
        }
      });
    },200);
  },
//将内容绘制到canvas的固定
  setNeirong: function (context) {
    var neirong = util.toThousands(this.data.neirong);
    context.setFontSize(80);
    context.setFillStyle("#ffffff");
    context.setTextAlign("center");//居中
    context.save();
    context.fillText(neirong, 343, 580);
    context.restore();
    context.stroke();
  },
  //点击图片进行预览,长按保存分享图片
  previewImg:function(e){
    var img = this.data.imagePath
    wx.previewImage({
      current: img, // 当前显示图片的http链接
      urls: [img] // 需要预览的图片http链接列表
    })
  },
  formSubmit: function(e) {
    var that = this;
    var neirong = e.detail.value.neirong;
    neirong = neirong == "" ? "何止于装逼":neirong;//空值填
    this.setData({
      neirong:neirong,
      maskHidden:false
    });
    wx.showToast({
      title: '生成器工作中...',
      icon: 'loading',
      duration:1000
    });
    setTimeout(function(){
      wx.hideToast()
      that.createNewImg();
      that.setData({
        maskHidden:true
      });
    },1000)
 
  }
})

雾中有雾 釉里有釉

发表评论

电子邮件地址不会被公开。 必填项已用*标注

返回主页看更多 分分彩技巧
  • 婚车停道路中间新人下车跳舞 交警一经查实将严处 2019-05-15
  • “学校鄙视链”无处不在 毕业生被划“三六九等” 2019-05-15
  • 你问对了,但没有说到点子上。我告诉你吧,最根本的问题是私有制。私有制不除,腐败问题就不会消灭。懂了吧,哈哈。 2019-05-15
  • 国图正式开放视听服务中心 2019-05-15
  • 海融口腔“免费看牙”惠民活动启动 惠及乌鲁木齐市民 2019-05-09
  • 女子从小喜欢喝这种水 乳房里取出3条活虫 2019-05-09
  • 网友偶遇黄晓明录制《中餐厅2》 戴围裙业务很熟练 2019-05-08
  • 5月一二三线城市房价环比都涨了 后续会咋样? ——凤凰网房产济南 2019-05-04
  • [调皮]“谈判技巧”始终摆脱不了“被迫谈判”的尴尬! 2019-05-04
  • 北京晨报:餐饮业“打赏”值得商榷 2019-05-01
  • 这个四大国“针对中国”的机制,遭到了暴击.... 2019-04-27
  • 全国高考开展网上评卷 多重保障确保打分公平 2019-04-17
  • 一只浣熊都这么努力,你还有什么理由不上进! 2019-04-17
  • “扫黄打非”办约谈网易、百度、B站等多家网站负责人 2019-04-14
  • 2017年度妇联改革任务全部完成 2019-04-12
  • 707| 242| 143| 88| 372| 18| 230| 960| 380| 401|