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

主要的坑:

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 条评论
登录 后参与评论

相关文章

来自专栏非典型技术宅

断言和分段控制器1. 断言(Assertions)2. 分段控制器(UISegmentedControl)

9630
来自专栏林德熙的博客

win10 uwp 自定义控件 SplitViewItem SplitView 从右划出

本文主要是因为汉堡菜单里面列出的菜单很多重复的图标和文字,我把它作为控件,因为是随便写,可能存在错误,如果发现了,请和我说或关掉浏览器,请不要发不良言论。

12420
来自专栏Sorrower的专栏

界面无小事(九): 做个好看的伸缩头部

16920
来自专栏web编程技术分享

【精编重制版】JavaWeb 入门级项目实战 -- 文章发布系统 (第二节)说明

本教程是,原文章发布系统教程的精编重制版,会包含每一节的源码,以及修正之前的一些错误。因为之前的教程只做到了评论模块,很多地方还不完美,因此重制版会修复之前的一...

22020
来自专栏夏时

两款 Js 插件为你的网站添彩

17610
来自专栏Django Scrapy

HTML表格不变形的方法;颜色代号

在<table>< td ><tr>标签加style 相关链接在这里 如何保证table表格不被撑开(固定HTML表格宽度) 我们在网站制作过程中,有时会...

59470
来自专栏非典型技术宅

iOS之分段控制器UISegmentedControl1. 分段控制器(UISegmentedControl)2. 事件监听3. 手势事件大全

12320
来自专栏Nian糕的私人厨房

CSS 鼠标悬停图片,显示隐藏文本

我在 JavaScript 鼠标悬停图片,显示隐藏文本 这篇博文当中实现了同样的效果,只不过是通过 JS 来实现的,但其实,通过 CSS 动画也能实现同样的效果...

15940
来自专栏非著名程序员

教你如何用 RecyclerView 做一个好用的轮播图

引子 一般情况下,我们手机 App 上轮播图一般都是几张图来回循环,最多也就10几张,一般都是在10张以内的轮播。所以我们一般可能都是自己写,还有可能用到了别人...

25050
来自专栏吴伟祥

IDEA的快捷键应用 原

Ctrl+Shift+Alt+鼠标 (左手按着ctrl+shift+alt右手鼠标点击想要选择的位置)

10530

扫码关注云+社区

领取腾讯云代金券