微信小程序 canvas 从后端获取数据绘图并保存本地

最新推荐文章于 2024-09-12 18:14:16 发布

半盏茶. ོ

最新推荐文章于 2024-09-12 18:14:16 发布

阅读量1.2k

点赞数

分类专栏：小程序文章标签： javascript

本文链接：https://blog.csdn.net/weixin_49296016/article/details/109602597

版权

小程序专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、wxml页面，wxss我就不写了自己调试

<view class="seeTicket" wx:if="{{lookTicket}}">
  <view class="colse" bindtap="colse"><text>X</text></view>
  <view class="canBox">
    <canvas canvas-id="mycanvas"
      style="display:inline-block;border:1px solid #CCC; width:300px;height:200px;border-radius:20rpx;background:#fff;"></canvas>
    <button class="generate" bindtap="generate"
      style="margin-top:20rpx;width:140rpx;height:70rpx;line-height:56rpx;font-size:24rpx;padding:8rpx;background:#32A0DC;">保存票证</button>
  </view>
</view>

二、js，其中的变量是后端返回的数据

Page({

  /**
   * 页面的初始数据
   */
  data: {
    
    lookTicket: false
  },

seeTicket:function (e) {
    var that = this,
    item = e.currentTarget.dataset.item;
    console.log(item)
    that.setData({
      lookTicket: true
    })
    wx.showLoading({
      title: '票证生成中',
    })
    setTimeout(function () {
      var ctx = wx.createCanvasContext('mycanvas'),
      fontWidth = ctx.measureText('田').width;//获取文本的宽度
      ctx.setFillStyle('#000') //文字颜色：默认黑色
      ctx.setFontSize(14) //设置字体大小，默认10
      ctx.fillText('支付凭证', 135, 10 + fontWidth) //绘制文本
      ctx.fillText('支付金额：', 40, 50 + fontWidth)
      ctx.fillText(item.fee+'元', 115, 50 + fontWidth)
      ctx.fillText('订单编号：', 40, 80 + fontWidth)
      ctx.fillText(item.ordersn, 115, 80 + fontWidth)
      ctx.fillText('支付时间：', 40, 110 + fontWidth)
      ctx.fillText(item.addtime, 115, 110 + fontWidth)
      ctx.fillText('收款商家：', 40, 140 + fontWidth)
      ctx.fillText(item.store_name, 115, 140 + fontWidth)
      ctx.fillText('订单状态：', 40, 170 + fontWidth)
      if(item.is_refund == 0){
       ctx.fillText('支付成功', 115, 170 + fontWidth)
      }else{
       ctx.fillText('已退款'+item.refund_money+'元', 115, 170 + fontWidth)
      }
      ctx.draw()
    wx.hideLoading()
    }, 1000)
  },
  generate: function(){
    wx.canvasToTempFilePath({
      canvasId: 'mycanvas',
      fileType:'jpg',
      success(res) {
        wx.authorize({
          scope: 'scope.writePhotosAlbum',
          success() {
            wx.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success() {
                wx.showToast({
                  title: '图片保存成功'
                })
              }
            }) 
          }
        })
      }
    }, this)
    this.setData({
      lookTicket: false
    })
  },

 colse:function(){
    this.setData({
      lookTicket: false
    })
  }
})

三、不喜勿喷，若有问题请提出改进