微信小程序生成分享图然后保存图片分享朋友圈

其他 2018-11-17 16:54:40 阅读次数: 0

微信小程序可以实现快速的转发好友实现分享，但是不能直接分享到朋友圈，但是有需要要这么做，要怎么实现呢？

查看文档之后，大概有了实现思路

1.使用微信小程序的wx.createCanvasContext（）方法，绘制图片；

2.使用wx.canvasToTempFilePath(）方法，把绘制出来的页面转成微信内的图片路径；

3.使用wx.saveImageToPhotosAlbum(）方法，把图片保存在手机相册；

4.就可以开开心心的发朋友圈拉。

然后主要代码如下

1.绘图，其中有一个要注意的就是不同手机的屏幕尺寸和像素是不一样的，所以这里引入了一个fixwidth，来实现尺寸的修正，方法比较笨，哈哈。

         varfixwidth= wx.getSystemInfoSync().windowWidth/720;
         let promise2 = new Promise(function (resolve, reject) {
            wx.getImageInfo({
              src: resre.data.data.headimgurl,
              success: function (res) {
                resolve(res);
              }
            })
          });
          let promise3 = new Promise(function (resolve, reject) {
            wx.getImageInfo({
              src: resre.data.data.image,
              success: function (res) {
                resolve(res);
              }
            })
          });
          let promise4 = new Promise(function (resolve, reject) {
            wx.getImageInfo({
              src: resre.data.data.share_img,
              success: function (res) {
                resolve(res);
              }
            })
          });
          let promise1 = new Promise(function (resolve, reject) {
            wx.getImageInfo({
              src: '../../images/qrbg.png',
              success: function (res) {
                resolve(res);
              }
            })
          });
          Promise.all([
            promise1, promise2, promise3, promise4
          ]).then(res => {
            const ctx = wx.createCanvasContext('shareImg')

            //主要就是计算好各个图文的位置
            ctx.drawImage('../../' + res[0].path, 0, 0, 720 * fixwidth, 1080 * fixwidth)
            ctx.drawImage(res[1].path, 20 * fixwidth, 10 * fixwidth, 132 * fixwidth, 132 * fixwidth)
            ctx.drawImage(res[2].path, 20 * fixwidth, 160 * fixwidth, 610 * fixwidth, 610 * fixwidth)
            ctx.drawImage(res[3].path, 440 * fixwidth, 780 * fixwidth, 200 * fixwidth, 200 * fixwidth)

            ctx.setTextAlign('center')
            ctx.setFillStyle('#000')
            ctx.setFontSize(12)
            ctx.fillText(resre.data.data.nickname , 236 * fixwidth, 75 * fixwidth)
            ctx.fillText('精心为你准备了一款好物', 336 * fixwidth, 105 * fixwidth)
            ctx.fillText(resre.data.data.store_name.substring(0, 14), 190 * fixwidth, 930 * fixwidth)
            ctx.fillText(resre.data.data.store_name.substring(14, 28), 198 * fixwidth, 970 * fixwidth)
            ctx.setFillStyle('#F33953')
            ctx.setFontSize(24)
            ctx.fillText('￥' + resre.data.data.price, 120 * fixwidth, 880 * fixwidth)

            ctx.setFillStyle('#666')
            ctx.setFontSize(12)
            ctx.fillText('长按识别小程序码', 534 * fixwidth, 1000 * fixwidth)

            ctx.stroke()
            ctx.draw()
          })
        }

2.生成图片，因为这个默认生成的图片比较模糊，所以把生成出来的图片尺寸调到了很大，但是也有一个问题，就是一张图片占用的空间和内存也相应的大了，有将近1M大小，所以清晰度和大小怎么取舍，或者有更好的办法，欢迎留言。

    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: 720*that.data.fixwidth,
      height: 1080*that.data.fixwidth,
      destWidth: 1440,
      destHeight: 2160,
      canvasId: 'shareImg',
      success: function (res) {
        that.setData({
          prurl: res.tempFilePath,
          hidden: false
        })
        wx.hideLoading()
      },
      fail: function (res) {
        console.log(res)
      }
    })

3.保存生成好的图片

    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
              })
              setTimeout(function () {
                wx.navigateBack({});
              }, 1000)
            }
          }
        })
      }
    })

至此完活，剩下的分享朋友圈大家都会了。

整个页面完整代码如下

.js文件

var app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    hidden: true,
    id:0,
    share_pintuan_productid:0,
    phonewidth:0,
    fixwidth:0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that=this;
    that.setData({
      id:options.id,
      share_pintuan_productid: options.share_pintuan_productid,
      phonewidth: wx.getSystemInfoSync().windowWidth,
      fixwidth: wx.getSystemInfoSync().windowWidth/720,
    })
    var fixwidth = that.data.phonewidth/760;
    wx.request({
      url: app.globalData.url + '/routine/ydj/get_share_picture?uid=' + app.globalData.uid,
      method: 'GET',
      data: {
        id: options.id,
        share_pintuan_productid: options.share_pintuan_productid
      },
      success: function (resre) {
        if (resre.data.code==200){
          let promise2 = new Promise(function (resolve, reject) {
            wx.getImageInfo({
              src: resre.data.data.headimgurl,
              success: function (res) {
                resolve(res);
              }
            })
          });
          let promise3 = new Promise(function (resolve, reject) {
            wx.getImageInfo({
              src: resre.data.data.image,
              success: function (res) {
                resolve(res);
              }
            })
          });
          let promise4 = new Promise(function (resolve, reject) {
            wx.getImageInfo({
              src: resre.data.data.share_img,
              success: function (res) {
                resolve(res);
              }
            })
          });
          let promise1 = new Promise(function (resolve, reject) {
            wx.getImageInfo({
              src: '../../images/qrbg.png',
              success: function (res) {
                resolve(res);
              }
            })
          });
          Promise.all([
            promise1, promise2, promise3, promise4
          ]).then(res => {
            const ctx = wx.createCanvasContext('shareImg')

            //主要就是计算好各个图文的位置
            ctx.drawImage('../../' + res[0].path, 0, 0, 720 * fixwidth, 1080 * fixwidth)
            ctx.drawImage(res[1].path, 20 * fixwidth, 10 * fixwidth, 132 * fixwidth, 132 * fixwidth)
            ctx.drawImage(res[2].path, 20 * fixwidth, 160 * fixwidth, 610 * fixwidth, 610 * fixwidth)
            ctx.drawImage(res[3].path, 440 * fixwidth, 780 * fixwidth, 200 * fixwidth, 200 * fixwidth)

            ctx.setTextAlign('center')
            ctx.setFillStyle('#000')
            ctx.setFontSize(12)
            ctx.fillText(resre.data.data.nickname , 236 * fixwidth, 75 * fixwidth)
            ctx.fillText('精心为你准备了一款好物', 336 * fixwidth, 105 * fixwidth)
            ctx.fillText(resre.data.data.store_name.substring(0, 14), 190 * fixwidth, 930 * fixwidth)
            ctx.fillText(resre.data.data.store_name.substring(14, 28), 198 * fixwidth, 970 * fixwidth)
            ctx.setFillStyle('#F33953')
            ctx.setFontSize(24)
            ctx.fillText('￥' + resre.data.data.price, 120 * fixwidth, 880 * fixwidth)

            ctx.setFillStyle('#666')
            ctx.setFontSize(12)
            ctx.fillText('长按识别小程序码', 534 * fixwidth, 1000 * fixwidth)

            ctx.stroke()
            ctx.draw()
          })
        }
      }
    })
    
  },


  /**
   * 生成分享图
  */
  share: function () {
    var that = this
    wx.showLoading({
      title: '努力生成中...'
    })
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: 720*that.data.fixwidth,
      height: 1080*that.data.fixwidth,
      destWidth: 1440,
      destHeight: 2160,
      canvasId: 'shareImg',
      success: function (res) {
        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
              })
              setTimeout(function () {
                wx.navigateBack({});
              }, 1000)
            }
          }
        })
      }
    })

  }
})

.wxml文件

<!--pages/test/canvas.wxml-->

<!-- 画布大小按需定制 这里我按照背景图的尺寸定的  -->
<canvas canvas-id="shareImg" style="width:{{fixwidth*620}}px;height:{{fixwidth*980}}px;margin-left:6%"></canvas>
  
<!-- 预览区域  -->
<view hidden='{{hidden}}' class='preview'>
  <image src='{{prurl}}' mode='widthFix'></image>
  <button type='primary' size='mini' bindtap='save'>保存分享图</button>
</view>

<button class='share' type='primary' bindtap='share'>生成分享图</button>

.json文件

{
  "navigationBarTitleText": "生成海报"
}

.wxss文件

/* pages/canvas/canvas.wxss */
canvas{
  position: fixed;
  top: 0;
}
.share{
  position: fixed;
  bottom: 10rpx;
  width: 70%;
  left: 15%;
  height: 100rpx;
  line-height: 100rpx;
}
.preview {
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.9);
  position: absolute;
  z-index: 2;
}
.preview image{
  width: 70%;
  position: absolute;
  top: 10%;
  left: 15%;
  z-index: 3;
  border: 1px dashed #fff;
}
.preview button{
  width: 40%;
  position: absolute;
  bottom: 30rpx;
  left: 30%;
  
}

代码写的比较丑，简单实现了功能还没来得及优化，仅供参考。

猜你喜欢

转载自blog.csdn.net/duoduozk/article/details/83927718
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
[编程题]学英语
[codeforces 1288A] Deadline 约数+模
Python的web开发
Docker在Centos 7上的部署
python编码
解决Ubuntu16.04 fatal error: json/json.h: No such file or directory
mysql并发插入
rest接口如何适应jsonp的方案
linux 终端上网设置
高数——等号两边同时求导、积分的解释
每日归档
更多
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022