小程序 自定义图片的分享卡片

news/2024/7/20 1:23:33 标签: 小程序, 前端, javascript
<canvas  class="share_canvas" type="2d" id="myCanvas" ></canvas>
onShow() {
    let that = this
    that.downShareImage()
  },
/**
   * 
   * 下载要分享的图片
   */
  downShareImage() {
    console.log('下载要分享的图片')
    const that = this
    wx.downloadFile({
      url: 'https://img0.baidu.com/it/u=925998594,1358415170&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281',
      success(res) {

        // console.log(res.tempFilePath)
        that.drawShareImg(res.tempFilePath);
      },
      fail(error) {
        console.log(error)
      }
    })
  },

  async drawShareImg(img) {
    console.log('又进来了')
    let that = this
    let {
      canvas,
      ctx,
    } = that.data
    const dpr = wx.getSystemInfoSync().pixelRatio
    console.log(dpr)
    wx.createSelectorQuery().select('#myCanvas')
      .fields({
        node: true,
        size: true
      })
      .exec((res) => {
        canvas = res[0].node
        ctx = canvas.getContext('2d')
        console.log(res[0])
        canvas.width = res[0].width * dpr
        canvas.height = res[0].height * dpr
        ctx.scale(dpr, dpr)
        // 绘制黑色背景
        ctx.fillStyle = 'rgba(0, 0, 0, 1)';
        ctx.fillRect(0, 0, 462, 343)

        let bg = canvas.createImage()
        bg.src = '/images/share_bg.png'
        bg.onload = () => {
          ctx.drawImage(bg, 0, 0, 462, 343);
          ctx.restore()
        }
        let goodimg = canvas.createImage()
        goodimg.src = img
        goodimg.onload = () => {
          ctx.drawImage(goodimg, 250, 80, 150, 150);
          ctx.restore()
        }
        setTimeout(function () {
          ctx.font = '14px sans-serif';
          ctx.fillStyle = '#000';
          let str = '商品名称商品名称商品名称商品名称名称名称'
          for (var i = 0; i < str.length; i++) {
            if (ctx.measureText(str.substring(0, i + 1)).width > 140) {
              ctx.fillText(str.substring(0, i), 60, 98, 140)
              ctx.fillText(str.substring(i), 60, 120, 140)
              break
            }
          }
          ctx.font = '14px sans-serif';
          ctx.fillStyle = '#000';
          ctx.fillText('订单金额', 61, 194)
          ctx.font = '14px sans-serif';
          ctx.fillStyle = '#FBAB2A';
          ctx.fillText('¥', 61, 225)
          ctx.font = '18px sans-serif';
          ctx.fillStyle = '#FBAB2A';
          ctx.fillText('899.99', 75, 226)

          wx.canvasToTempFilePath({
            canvas: canvas,
            x: 0,
            y: 0,
            width: 462,
            height: 343,
            destWidth: 500,
            destHeight: 400,
            success: res => {
              // 生成的图片临时文件路径
              const tempFilePath = res.tempFilePath
              console.log('最后生成', tempFilePath)
              that.setData({
                shareImg: tempFilePath
              })
              wx.hideToast();
            },
            fail: (err) => {
              wx.hideToast();
            }
          }, that)
        }, 1000)
      })
  }
onShareAppMessage(e) {
    const that = this
    return {
      title: `向你推荐,商品名称`,
      path: "../pages/goods-detail/goods-detail",
      imageUrl: that.data.shareImg
    }
  },


http://www.niftyadmin.cn/n/1162698.html

相关文章

小程序 自定义气泡框

// wxml <image catchtap"eduBulletFrame" src"/images/question.png"></image><view class"s_explanation" wx:if"{{ifBulletFrame}}" catchtap"eduBulletFrame">满2001减1000满2001减1000满2001减1000…

TypeError: this.cliEngineCtor is not a constructor,webstorm和eslint的版本纠结

在webstorm里使用eslint的时候&#xff0c;会提示 TypeError: this.cliEngineCtor is not a constructor &#xff0c;这样的一个错误&#xff0c;知道应该是版本的错误&#xff0c;但具体版本怎么区别&#xff0c;eslint的版本和webstorm的版本如何对应&#xff0c;需要注意。…

小程序 自定义省市区三联动

<view class"index"><view class"input" bindtap"getbox" wx:if"{{!inputShow}}" style"color: #999;">请选择地址</view><view class"input" bindtap"getbox" wx:if"{{inpu…

小程序 多个订单倒计时

<view class"oa_btn_time"><text class"oa_list_grary">支付剩余&#xff1a;</text>{{item.countDownTime}} </view> import utils from ../../utils/util data(){ list:[{endTime: "2022-08-24 11:44:37"}] }, onLoad…

js 函数节流 函数防抖

函数节流: 频繁触发,但只在特定的时间内才执行一次代码函数防抖: 频繁触发,但只在特定的时间内没有触发执行条件才执行一次代码 两者区别在于函数节流是固定时间做某一件事&#xff0c;比如每隔1秒发一次请求。而函数防抖是在频繁触发后&#xff0c;只执行一次&#xff08;两者…

react下载excel文件流

<Button onClick{()>{exportExcel()}}>导出</Button>const exportExcel () > {let orderValidityReq {}orderListExcel(orderValidityReq).then(res >{console.log(res)const link document.createElement("a");let blob new Blob([res.dat…

小程序 二维数组里面做多选

<view class"" wx:for"{{testList}}" wx:key"index"><view class"ro_detail_all_title">{{item.names}}<label class"ro_red">&#xff08;可选一件&#xff09;</label></view><view cla…