微信小程序生成清晰海报并保存到本地

一、导读

1. 小程序海报分享功能还是很常用，但是查询api发现小程序并没有提供分享到朋友圈的功能，只能实现通过canvas画一张海报然后保存到本地，让用户主动去发朋友圈。今天这里介绍自己如果生成的，有源码，拉下来安装一下依赖就可以使用了。注：生成的图片清晰，不会随着不同手机，变形。
2. 预览体验海报功能
   
   3.生成海报效果图
   
   

二、实现代码过程（贴了关键代码，需要可以直接下载源码）

index.wpy 代码如下

<template>
    <view class="body">
        <image class='background' src="{{bgUrl}}" mode="aspectFill"/>
        <scroll-view scroll-y class="scrollPage">
            <image src='../public/images/componentBg.png' mode='widthFix' class='response'></image>
            <view style="height: 100%; text-align: center; color: white">
                demo
            </view>
        </scroll-view>
        <view class="draw-content">
            <view class="drawPicture" @tap="drawImage()">点击生成海报</view>
        </view>
    </view>
</template>

<script>
  import wepy from 'wepy';
  import Util from '../utils/util';
  import Base from '../mixins/base';

  export default class Index extends wepy.page {
    mixins = [Base];
    config = {
      navigationStyle: "custom"
    };

    data = {
      bgUrl: '../public/images/123.jpg'
    };
    methods = {
      async drawImage() {
        let backgroundImg = await Util.getImageInfo('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1587290090925&di=77d696a5839198ea66543fa6c48e74fa&imgtype=0&src=http%3A%2F%2Ft7.baidu.com%2Fit%2Fu%3D3616242789%2C1098670747%26fm%3D79%26app%3D86%26f%3DJPEG%3Fw%3D900%26h%3D1350');
        wx.navigateTo({url: '/pages/canvas?path=' + backgroundImg.path});
      }
    };
  }
</script>

util.js 代码如下

async function getImageInfo(src) {
  return new Promise(function(resolve) {
    wx.getImageInfo({
      src: src,
      success: function(res) {
        resolve(res);
      },
      fail: function() {
        resolve();
      }
    });
  });
}

Canvas.wpy 代码如下

<template>
    <image class='background' src="{{bgUrl}}" mode="aspectFill"/>
    <cu-custom bgColor="bg-gradual-pink" isBack="{{true}}">
        <view slot="backText">返回</view>
        <view slot="content">海报</view>
    </cu-custom>

    <view class="content">
        <!--生成海报  -->
        <image mode='widthFix' class="canvas-img" src="{{poster}}" style="width: 80%; height: auto"/>
        <button class='baocun' @tap="saveImageToPhotos()">保存相册，分享到朋友圈</button>
        <view>
            <canvas style="width: {{width}}px; height: {{height}}px;position:fixed;top:9999px"
                    canvas-id="canvasPoster"/>
        </view>
    </view>

</template>

<script>
  import wepy from 'wepy'
  import Tip from '../utils/tip';

  export default class Canvas extends wepy.page {
    config = {
      navigationStyle: "custom"
    };

    data = {
      bgUrl: '../public/images/123.jpg',
      visible: false,
      poster: '',
      width: 432,
      height: 768,
      path: ''
    };

    onLoad(options) {
      let that = this;
      this.path = options.path;
      let ctx = wx.createCanvasContext('canvasPoster');
      // 固定 864 X 1536 海报长宽
      // 画布的真实宽度
      let canvasW = this.width;
      // 画布的真实高度
      let canvasH = this.height;
      // 头像和二维码大小都需要在规定大小的基础上放大像素比的比例后面都会 *this.systemInfo.pixelRatio
      let headerW = 70;
      let headerX = (canvasW - headerW) / 2;
      let headerY = 30;
      let qrcodeY = canvasH - 80;
      // 填充背景
      ctx.drawImage(this.path, 0, 0, canvasW, canvasH);
      ctx.setFontSize(16);
      ctx.textAlign = 'center';
      ctx.setFillStyle('#000000');
      ctx.fillText('这是昵称', this.width / 2, 120);
      ctx.save();
      // 控制头像为圆形
      // 设置线条颜色，如果不设置默认是黑色，头像四周会出现黑边框
      ctx.setStrokeStyle('rgba(0, 0, 0, .2)');
      ctx.arc(headerX + headerW / 2, headerY + headerW / 2, headerW / 2, 0, 2 * Math.PI);
      ctx.stroke();
      // 画完之后执行clip()方法，否则不会出现圆形效果
      ctx.clip();
      // 将头像画到画布上
      wx.getImageInfo({
        src: 'http://img0.imgtn.bdimg.com/it/u=226418344,3562831340&fm=26&gp=0.jpg',
        success: function (res) {
          ctx.drawImage(res.path, headerX, headerY, headerW, headerW);
          ctx.restore();
          ctx.save();
          // 绘制二维码
          ctx.drawImage('../public/images/code.jpg', headerX, qrcodeY, headerW, headerW);
          ctx.save();
          ctx.draw();
          setTimeout(() => {
            wx.canvasToTempFilePath({
              canvasId: 'canvasPoster',
              x: 0,
              y: 0,
              width: canvasW,
              height: canvasH,
              destWidth: canvasW,
              destHeight: canvasH,
              success: (data) => {
                Tip.loaded();
                that.visible = true;
                that.poster = data.tempFilePath;
                that.$apply();
              }
            });
          }, 200);
        },
        fail: function () {
          Tip.loaded();
          console.log('fail');
        }
      });
    }

    onShow() {
    }

    methods = {
      // 点击保存图片到相册(授权)
      saveImageToPhotos() {
        // 相册授权
        let self = this;
        wx.getSetting({
          success(res) {
            // 进行授权检测，未授权则进行弹层授权
            if (!res.authSetting['scope.writePhotosAlbum']) {
              wx.authorize({
                scope: 'scope.writePhotosAlbum',
                success() {
                  self.saveImage(self.poster);
                },
                // 拒绝授权时，则进入手机设置页面，可进行授权设置
                fail() {
                  wx.openSetting({
                    success: function () {
                    },
                    fail: function () {
                    }
                  });
                }
              });
            } else {
              // 已授权则直接进行保存图片
              self.saveImage(self.poster);
            }
          },
          fail(res) {
            console.log(res);
          }
        });
      }
    };

    // 保存海报到本地
    saveImage() {
      let that = this;
      wx.canvasToTempFilePath({
        canvasId: 'canvasPoster',
        x: 0,
        y: 0,
        width: that.width,
        height: that.height,
        // 画2倍，提高海报的清晰度
        destWidth: that.width * 2,
        destHeight: that.height * 2,
        success: (data) => {
          wx.saveImageToPhotosAlbum({
            filePath: data.tempFilePath,  // 此为图片路径
            success: (res) => {
              wx.navigateBack();
            },
            fail: (err) => {
              that.visible = false;
              console.log(err);
            }
          });
        }
      });
    };
  }
</script>

三、源码地址

项目git地址