微信小程序用canvas画图并分享

落日映苍穹つ 2021-10-29 21:22 363阅读 0赞

最近开始做微信小程序，有这样一个需求：

从列表页进入详情，在每一个详情页面去分享，分享出来的图片是带有当前详情数据的图片

**如下图的列表：**  
![列表][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xMREQyMDE0NDI1_size_16_color_FFFFFF_t_70]  
**分享出来的样子：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xMREQyMDE0NDI1_size_16_color_FFFFFF_t_70 1]  
**解决方案和思路：canvas画图生成图片**

上代码：  
【html部分】

<canvas style='width:{
       {canvasWidth}}px;height:{
       {canvasHeight}}px' canvas-id='myCanvas'></canvas>
    <button open-type='share'>分享</button>

【js部分】

var ctx = "" // 用于获取canvas
    var leftMargin = "" //文字距离左边边距
    var topMargin = "" //文字距离右边边距
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        title: '人人车司机',
        salary: '500-8000元/月',
        rtype: '日结',
        rmoney: '20元',
        canvasWidth: '', // canvas宽度
        canvasHeight: '', // canvas高度
        imagePath: '' // 分享的图片路径
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        var that = this
        var sysInfo = wx.getSystemInfo({
          success: function (res) {
            that.setData({
              //设置宽高为屏幕宽，高为屏幕高的80%，因为文档比例为5:4
              canvasWidth: res.windowWidth,
              canvasHeight: res.windowWidth * 0.8
            })
            leftMargin = res.windowWidth
            topMargin = res.windowWidth * 0.8
          },
        })
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
        ctx = wx.createCanvasContext('myCanvas')
        this.addImage()
        this.tempFilePath()
        
      },
      //画背景图
      addImage: function () {
        var context = wx.createContext();
        var that = this;
        var path = "/images/share.jpg";
        //将模板图片绘制到canvas,在开发工具中drawImage()函数有问题，不显示图片
        //不知道是什么原因，手机环境能正常显示
        ctx.drawImage(path, 0, 0, this.data.canvasWidth, this.data.canvasHeight);
        this.addTitle()
        this.addRtype()
        this.addRmoney()
        this.addSalary()
        ctx.draw()
      },
      //画标题
      addTitle: function (){
        var str = this.data.title
        ctx.font = 'normal bold 20px sans-serif';
        ctx.setTextAlign('center'); // 文字居中
        ctx.setFillStyle("#222222");
        ctx.fillText(str, this.data.canvasWidth/2,65)
      },
      // 画返费方式
      addRtype: function () {
        var str = this.data.rtype
        ctx.setFontSize(16)
        ctx.setFillStyle("#ff4200");
        ctx.setTextAlign('left');
        ctx.fillText(str, leftMargin * 0.35, topMargin * 0.4)
      },
      // 画返费金额
      addRmoney: function () {
        var str = this.data.rmoney
        ctx.setFontSize(16)
        ctx.setFillStyle("#222");
        ctx.setTextAlign('left');
        ctx.fillText(str, leftMargin * 0.35, topMargin * 0.5)
      },
      // 画薪资
      addSalary: function () {
        var str = this.data.salary
        ctx.setFontSize(16)
        ctx.setFillStyle("#222");
        ctx.setTextAlign('left');
        ctx.fillText(str, leftMargin * 0.35, topMargin * 0.61)
      },
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function (res) {
        // return eventHandler接收到的分享参数
        return {
          title: this.data.title,
          path: '/pages/test/test',
          imageUrl: this.data.imagePath
        };
      },
      //导出图片
      tempFilePath: function(){
        let that = this;
        wx.canvasToTempFilePath({
          canvasId: 'myCanvas',
          success: function success(res) {
            wx.saveFile({
              tempFilePath: res.tempFilePath,
              success: function success(res) {
                that.setData({
                  imagePath: res.savedFilePath
                });
              }
            });
          }
        });
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      }
    
    
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xMREQyMDE0NDI1_size_16_color_FFFFFF_t_70]: /images/20211029/bc99ddad5cd14d9a916d0faf7c15886f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xMREQyMDE0NDI1_size_16_color_FFFFFF_t_70 1]: /images/20211029/b93c6fcbd37e4940bc5b15c3525ca32d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，363人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序分享

页面代码 <button open-type='share' class="fenxiangitem"> <image class="imgs" s

爱被打了一巴掌/ 2022年12月25日 02:59/ 0 赞/ 240 阅读

相关微信小程序用canvas画图并分享

<canvas style='width:{ {canvasWidth}}px;height:{ {canvasHeight}}px' ca

爱被打了一巴掌/ 2022年11月27日 08:46/ 0 赞/ 149 阅读

相关微信小程序中的canvas

文章目录 canvas 常用属性： canvas基本用法：注意： canvas绘制基本步骤： canvas绘制笑脸： canv

灰太狼/ 2022年11月16日 01:37/ 0 赞/ 716 阅读

相关微信小程序-海报制作（canvas）

文档 [https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.createOffscreen

落日映苍穹つ/ 2022年10月08日 05:40/ 0 赞/ 457 阅读

相关微信小程序-分享

作用：分享某页面，发送给某好友 1.设置button的open-type属性=“share”，则可调出微信好友列表。 2.js中写一个监听分享的事件。 onShar

末蓝、/ 2022年02月16日 10:22/ 0 赞/ 416 阅读

相关微信小程序用canvas画图并分享

最近开始做微信小程序，有这样一个需求：从列表页进入详情，在每一个详情页面去分享，分享出来的图片是带有当前详情数据的图片如下图的列表： ![列表][watermark

落日映苍穹つ/ 2021年10月29日 21:22/ 0 赞/ 364 阅读

相关微信小程序 - 使用canvas绘制海报实现分享功能

今天给大家分享一下如何使用canvas绘制海报并实现分享，下面我分享一下实现的过程：效果图： ![在这里插入图片描述][watermark_type_ZmFuZ3

喜欢ヅ旅行/ 2021年08月28日 16:28/ 0 赞/ 760 阅读

相关微信小程序 - 小程序分享转发

方法在小程序需要分享的xxx页面添加代码 export default { onShareAppMessage () {

深碍√TFBOYSˉ_/ 2021年07月26日 16:33/ 0 赞/ 601 阅读

相关微信小程序2D canvas绘制分享海报

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3

╰+攻爆jí腚メ/ 2021年07月24日 23:50/ 0 赞/ 1052 阅读

相关微信小程序-canvas生成图片并保存到本地

微信小程序-canvas生成图片并保存到本地前言需求场景：我们知道，微信小程序可以分享给好友或者微信群，不能分享到朋友圈，那分享到朋友圈就需要特殊处理一下，这里我们把...

红太狼/ 2020年06月18日 16:20/ 0 赞/ 864 阅读