小程序使用wxml2-canvans制作图片并下载

一、js插件下载

https://pan.baidu.com/s/1jgAUpAmtTolAaDYU030WSg 提取码: tg9f 复制这段内容后打开百度网盘手机App，操作更方便哦

下载源文件后放到代码包里面

上代码，样式可自己编辑

<view id="PosterPage">
	<view class="share__canvas share__canvas1">
		<image class="share__canvas1-image draw_canvas" data-type="image" data-url="{{actInfo.poto}}" src='{{actInfo.poto}}'>image>
		<view class="info">
			<view class="share__canvas1-block draw_canvas" data-type="text" data-text="{{actInfo.nickname}}">{{actInfo.nickname}}view>
			<view class="share__canvas1-block-1 draw_canvas" data-type="text" data-text="发起一个精彩的活动, 邀您一起参加">发起一个精彩的活动, 邀您一起参加view>
		view>
		<view class="share__rect">
			<image class="share__canvas1-image-1 draw_canvas"  data-type="image" data-url="{{actInfo.headimgurl}}" src='{{actInfo.headimgurl}}'>image>
			<view class="share__canvas1-block-2 draw_canvas" data-type="text" data-text="{{actInfo.name}}">{{actInfo.name}}view>
			<image class="share__canvas1-image-2 draw_canvas" data-type="image" data-url="{{icon.local}}" src='{{icon.local}}'>image>
			<view class="share__canvas1-block-3 draw_canvas" data-type="text" data-text="{{actInfo.site}}">{{actInfo.site}}view>
			<view style="margin-top: 20rpx;">
				<image class="share__canvas1-image-3 draw_canvas" data-type="image" data-url="{{icon.time}}" src='{{icon.time}}'>image>
				<text class="share__canvas1-block-4 draw_canvas" data-type="text" data-text="{{actInfo.time}}">{{actInfo.time}}text>
			view>
			<view class="qrcode">
				<image class="share__canvas1-image-4 draw_canvas" data-type="image" data-url="{{actInfo.ercode}}" src='{{actInfo.ercode}}'>image>
			view>
			<view class="share__canvas1-block-5 draw_canvas" data-type="text" data-text="扫码识别小程序，立即参加">扫码识别小程序，立即参加view>
		view>
	view>
    <canvas canvas-id="canvas1" class="canvas" style="width: {{width}}px; height: {{height}}px; position: fixed; top: -199999rpx;">canvas>
	<view class="btnView">
		<button class="btn_poster" bindtap="getPosterHandle">保存分享海报button>
	view>
view>

import Wxml2Canvas from '../../utils/canvansJS/index';

Page({
  /**
   * 页面的初始数据
   */
  data: {
    actInfo: {
      headimgurl: 'https://sucai.suoluomei.cn/sucai_zs/images/hpl_15731941163329.jpg',
      nickname: '病猫',
      name: '书院电影赏析沙龙——《阳光灿烂的日子》',
      site: '山西省运城市永济市樱花园山西省运城市永济市樱花园山西省运城市永济市樱花园',
      time: '2019.03.11 12:00-2019.03.20 12:00',
      poto:"https://sucai.suoluomei.cn/sucai_zs/images/20200520155529-vava.jpg",
      ercode:"https://sucai.suoluomei.cn/sucai_zs/images/20200520155625-shopCode.jpg"
    },
    icon: {
      local: 'https://sucai.suoluomei.cn/sucai_zs/images/20200520143115-s5.png',
      time: 'https://sucai.suoluomei.cn/sucai_zs/images/20200520143131-s1.png'
    },
    width: 0,
    height: 0,
  },
  getSystemInfo() {
    wx.getSystemInfo({
      success: (res) => {
        console.log(res);
        this.setData({
          width: res.screenWidth,
          height: res.screenHeight
        });
      }
    })

  },
  drawImage() {
    let _this = this;
    var drawimg = new Wxml2Canvas({
      width: _this.data.width,
      height: _this.data.height,
      element: 'canvas1',
      background: '#000000',
      progress(percent) {},
      finish(url) {
        wx.hideLoading();
        wx.saveImageToPhotosAlbum({
          filePath: url,
          //授权成功，保存图片
          success: function (data) {
            wx.showToast({
              title: '保存成功',
              icon: 'success',
              duration: 2000
            })
          },
          //授权失败
          fail: function (err) {
            if (err.errMsg) {//重新授权弹框确认
              wx.showModal({
                title: '提示',
                content: '您好,请先授权，在保存此图片。',
                showCancel: false,
                success(res) {
                  if (res.confirm) {//重新授权弹框用户点击了确定
                    wx.openSetting({//进入小程序授权设置页面
                      success(settingdata) {
                        console.log(settingdata)
                        if (settingdata.authSetting['scope.writePhotosAlbum']) {//用户打开了保存图片授权开关
                          wx.saveImageToPhotosAlbum({
                            filePath: url,
                            success: function (data) {
                              wx.showToast({
                                title: '保存成功',
                                icon: 'success',
                                duration: 2000
                              })
                            },
                          })
                        } else {//用户未打开保存图片到相册的授权开关
                          wx.showModal({
                            title: '温馨提示',
                            content: '授权失败，请稍后重新获取',
                            showCancel: false,
                          })
                        }
                      }
                    })
                  }
                }
              })
            }
          }
        })
      },
      error(res) {}
    });

    let data = {
      list: [{ //绘制矩形
          type: 'rect',
          x: 0,
          y: 50,
          style: {
            width: _this.data.width,
            height: _this.data.height - 60,
            fill: '#fff'
          }
        },
        { //根据wxml绘制,
          type: 'wxml',
          class: '.share__canvas1 .draw_canvas',
          limit: '.share__canvas1',
          x: 5,
          y: 70
        }
      ]
    }
    drawimg.draw(data);
  },
  onLoad() {
    this.getSystemInfo();
  },
  getPosterHandle() {
    wx.showLoading({
      title: '海报生成中...',
    })
    this.drawImage();
  }
})

page {
  padding-top: 20rpx;
  background-color: #f4f4f4;
}

.share__canvas {
  width: 690rpx;
  height: 1000rpx;
  font-size: 32rpx;
  margin-top: 10rpx;
  margin: 20rpx 30rpx;
}

.canvas {
  background-color: #f5f5f5;
}

.share__canvas1-image {
  width: 90rpx;
  height: 90rpx;
  display: inline-block;
}

.info {
  width: 530rpx;
  display: inline-block;
  vertical-align: top;
  margin-left: 26rpx;
}

.share__canvas1-block {
  color: #0093d8;
  font-size: 24rpx;
}

.share__canvas1-block-1 {
  color: #333;
  font-size: 24rpx;
  margin-top: 10rpx;
}

.share__rect {
  border-radius: 20rpx;
  margin-top: 30rpx;
  padding: 20rpx;
  background-color: #fff;
}

.share__canvas1-image-1 {
  width: 650rpx;
  height: 330rpx;
}

.share__canvas1-block-2 {
  margin-top: 20rpx;
  font-weight: bolder;
  font-size: 30rpx;
  color: #0093d8;
}

.share__canvas1-image-2 {
  display: inline-block;
  width: 24rpx;
  height: 28rpx;
  vertical-align: top;
  margin-top: 20rpx;
}

.share__canvas1-block-3 {
  display: inline-block;
  vertical-align: middle;
  font-size: #323232;
  font-size: 24rpx;
  width: 580rpx;
  margin-left: 10rpx;
  margin-top: 20rpx;
}

.share__canvas1-image-3 {
  width: 28rpx;
  height: 28rpx;
  vertical-align: middle;
}

.share__canvas1-block-4 {
  vertical-align: middle;
  font-size: #323232;
  font-size: 24rpx;
  width: 580rpx;
  margin-left: 10rpx;
}

.qrcode {
  width: 200rpx;
  height: 200rpx;
  margin: 0 auto;
  margin-top: 50rpx;
}

.share__canvas1-image-4 {
  width: 100%;
  height: 100%;
}

.share__canvas1-block-5 {
  color: #323232;
  font-size: 20rpx;
  margin-top: 20rpx;
  text-align: center;
}

.btnView {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100rpx;
}

.btnView button {
  width: 50%;
  height: 100rpx;
  line-height: 100rpx;
  border-radius: 0;
  font-size: 30rpx;
  color: #fff;
}

.btnView .btn_back {
  background-color: #57b8be;
  float: left;
}

.btnView .btn_poster {
  background-color: #212121;
  width: 100%;
}