专栏首页hotqin888的专栏小程序的页面生成图片分享朋友圈

小程序的页面生成图片分享朋友圈

主要的坑:

1.网络图片要下载到本地,就是getimginfo和promise,具体技术细节我也不晓得。然后就是本地图片的地址和网络图片的地址不同。本地的要加../../images/+res[0].path,而网络的直接是res[0].path。本机调试看不出来,用真机调试比较容易发现问题。

2.画布的位置,文字的位置,要慢慢调到合适。https://www.ifanr.com/minapp/925253

3.最关键的是,目前有极少的在小程序里用html2canvas的,都是直接把图片啊,文章里的文字啊,取过来,再画到画布上。这点看了很久才明白。比如这里https://blog.csdn.net/sufei_web/article/details/81736101

4.清晰度的问题。保存图片的时候,长度和高度乘以2就行了。https://www.csweigou.com/article/2209.html

//获取应用实例
const app = getApp()

let wxparse = require("../../wxParse/wxParse.js");
Page({
  data: {
    dkheight: 300,
    dkcontent: "",
    leassonTilte: '',
    time: '',
    id: '',

    inputVal: '',
    msgData: [{
      msg: '极好的',
      index: 1,
      id: 1,
      name: "自强不息",
      likes: {
        num: 1
      },
      textareaValue: "输入留言"
    }],

    hidden: true,
    //画布
    canvasHidden: true, //设置画板的显示与隐藏,画板不隐藏会影响页面正常显示
    shareImgPath: '' //用于储存canvas生成的图片
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    // console.log(options)
    this.setData({
      id: options.id
    })
    // 获得高度
    let winPage = this;
    wx.getSystemInfo({
      success: function(res) {
        let winHeight = res.windowHeight;
        // console.log(winHeight);
        winPage.setData({
          dkheight: winHeight - winHeight * 0.05 - 80
        })
      }
    });

    var that = this;
    //获取用户设备信息,屏幕宽度
    wx.getSystemInfo({
      success: res => {
        that.setData({
          screenWidth: res.screenWidth
        })
        // console.log(that.data.screenWidth)
      }
    })
    var getData = wx.request({
      url: 'https://zsj.itdos.com/v1/wx/getwxarticle/' + options.id,
      // data: {
      // x: '',
      // y: ''
      // id: options.id
      // },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function(res) {
        // console.log(res.data)
        that.setData({
          dkcontent: res.data.html,
          leassonTilte: res.data.title,
          time: res.data.time,
          author: res.data.author,
          //画布上的图片和文字,文字要控制字数
          // photo:res.data.imgUrl,
          // word:res.data.word
          views: res.data.Views,
        })
        wxparse.wxParse('dkcontent', 'html', that.data.dkcontent, that, 5)

        // 生成画布
        let promise1 = new Promise(function(resolve, reject) {
          wx.getImageInfo({
            src: res.data.imgUrl,
            success: function(res1) {
              // console.log(res1)
              resolve(res1);
            }
          })
        });
        let promise2 = new Promise(function(resolve, reject) {
          wx.getImageInfo({
            src: '../../images/qrcode.jpg',
            success: function(res1) {
              // console.log(res1)
              resolve(res1);
            }
          })
        });
        Promise.all([
          promise1, promise2
        ]).then(res1 => {
          // console.log(res1)
          const ctx = wx.createCanvasContext('shareImg')
          //主要就是计算好各个图文的位置
          // var unit = that.data.screenWidth / 375
          ctx.setFillStyle('white');
          ctx.fillRect(0, 0, 600, 880);
          ctx.drawImage(res1[0].path, 50, 200, 400, 400)
          ctx.drawImage('../../' + res1[1].path, 350, 610, 160, 160)
          // ctx.drawImage(imgurl, 50, 200, 400, 400)
          // ctx.drawImage(bgImgPath, 350, 610, 160, 160)

          ctx.setFontSize(28)
          ctx.setFillStyle('#6F6F6F')
          ctx.fillText('来自小程序 - 青少儿书画', 30, 660)

          ctx.setFontSize(30)
          ctx.setFillStyle('#111111')
          ctx.fillText('快来围观作品', 30, 710)

          ctx.setFontSize(22)
          ctx.fillText('长按扫码进入小程序查看', 30, 750)

          ctx.setFillStyle('#6F6F6F')
          ctx.fillText('Author:' + res.data.author, 545 / 2, 100)
          ctx.setTextAlign('center')
          ctx.setFontSize(24)
          ctx.setFillStyle('#111111')
          ctx.fillText(res.data.title, 545 / 2, 50)
          ctx.fillText(res.data.word, 545 / 2, 160)
          ctx.fillText('……', 60, 190)
          ctx.stroke()
          ctx.draw()
        })

      }
    })


  },

  // 同时获取留言即可
  // var that = this;
  // wx.getStorage({
  //   key: 'info',
  //   success: function (res) {
  //     //msgData还是空的
  //     var list = that.data.msgData;
  //     var a = list ? list : []
  //     var apple = res.data
  //     //将数据加入到msgData
  //     a = apple
  //     that.setData({
  //       msgData: a
  //     })
  //   }
  // })


  onShareAppMessage: function() {
    // console.log(this.data.id)
    return {
      title: '青少儿书画●内容',
      path: 'pages/detail/detail?id=' + this.data.id
    }
  },

  // 删除留言
  del(e) {
    var that = this
    var n = e.target.dataset.index;
    var list = that.data.msgData
    wx.showModal({
      title: '提示',
      content: '是否删除该条数据',
      success: function(res) {
        // console.log(res.confirm)
        if (res.confirm) {
          list.splice(n, 1);
          that.setData({
            msgData: list
          })
          wx.showToast({
            title: '删除成功',
          })
        }
      }
    })

  },
  // 添加留言
  add(e) {
    if (this.data.inputVal == '') {
      wx.showToast({
        title: '请留言',
      })
      return false;
    }
    var list = this.data.msgData;
    var a = list ? list : []
    a.push({
      msg: this.data.inputVal
    })
    wx.setStorage({
      key: 'info',
      data: a,
    })
    this.setData({
      msgData: a,
      inputVal: ''
    })
  },
  changeinputVal(e) {
    this.setData({
      inputVal: e.detail.value
    })
  },




  /**
   * 生成分享图
   */
  share: function() {
    var that = this
    //获取用户设备信息设备像素比
    // wx.getSystemInfo({
    //   success: res => {
    //     that.setData({
    //       pixelRatio: res.pixelRatio
    //     })
    //     console.log(that.data.pixelRatio)
    //   }
    // })
    // 本质上就是生成一个更大的图片,因为手机的屏幕设备的像素比现在一般都是超过2的。实际上我们只需要在使用wx.canvasToTempFilePath的时候,设置参数destWidth和destHeight(输出的宽度和高度)为width和height的2倍以上即可。
    wx.showLoading({
      title: '努力生成中...'
    })
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: 545,
      height: 771,
      destWidth: 545 * 2,
      destHeight: 771 * 2,
      canvasId: 'shareImg',
      success: function(res) {
        // console.log(res.tempFilePath);
        that.setData({
          prurl: res.tempFilePath,
          hidden: false
        })
        wx.hideLoading()
      },
      fail: function(res) {
        console.log(res)
      }
    })
  },

  /**
   * 保存到相册
   */
  save: function() {
    var that = this
    //生产环境时 记得这里要加入获取相册授权的代码
    wx.saveImageToPhotosAlbum({
      filePath: that.data.prurl,
      success(res) {
        wx.showModal({
          content: '图片已保存到相册,赶紧晒一下吧~',
          showCancel: false,
          confirmText: '好哒',
          confirmColor: '#72B9C3',
          success: function(res) {
            if (res.confirm) {
              // console.log('用户点击确定');
              that.setData({
                hidden: true
              })
            }
          }
        })
      }
    })
  },

})

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序富文本编辑器editor初体验-图片上传

    https://developers.weixin.qq.com/miniprogram/dev/component/editor.html

    hotqin888
  • 小程序中搜索文件,阅览pdf,分享文件链接,评论表情符号

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/det...

    hotqin888
  • 小程序利用富文本编辑器editor编辑文章

    https://blog.csdn.net/qq_29789057/article/details/90108048

    hotqin888
  • 微信小程序弹框提示绑定手环实例

    今天想聊一聊小程序里面存在的一些逻辑问题,拿手上的这个小程序来说,(这个小程序是开发出来玩的,每个人手上有一个手环,带着手环时候的心率,运动步数,血压数据都会展...

    王小婷
  • 小程序中搜索文件,阅览pdf,分享文件链接,评论表情符号

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/det...

    hotqin888
  • 微信小程序版本自动更新

    当再次进入微信或再次打开小程序,又会从后台进入前台,只有当小程序进入后台一定时间,或者系统资源占用过高,才会被真正的销毁。

    一觉睡到小时候
  • 借助云开发实现小程序朋友圈的发布与展示丨实战

    这里就不多说了,注意:一定要用自己的appid,所以你需要注册一个小程序(个人的就行)

    腾讯云开发TCB
  • 借助云开发实现小程序朋友圈的发布与展示

    这里就不多说了,如果你还不知道如何创建小程序项目可以去翻看下我之前的文章,也可以看下我录制的《10小时零基础入门小程序开发》

    编程小石头
  • 微信小程序处理pages的函数比app.js先执行

    我需要先执行app.js里wx.login获取到参数再赋值给页面接口, 问题 页面函数比app.js要先执行 使用promise app.js wxR...

    任我行RQ
  • 效率至上的nodejs 手动实现服务器

    nodejs的语法和浏览器js的语法非常接近, 安装好node后, 可以写个正则, 测试一下环境是否安装成功, 通过atom的script插...

    zhaoolee

扫码关注云+社区

领取腾讯云代金券