微信小程序绘制海报

    import Wxml2Canvas from 'wxml2canvas';
    export default {
    	data() {
    		return {
    			imgUrl: '',
    			width: 0,
    			height: 0
    		};
    	},
    	onLoad() {},
    	onReady() {},
    	methods: {
    		drawMyCanvas() {
    			Taro.showLoading();
    			const that = this;
    			const query = Taro.createSelectorQuery().in(this);
    			query
    				.select('#my-canvas')
    				.fields(
    					{
    						// 选择需要生成canvas的范围
    						size: true,
    						scrollOffset: true
    					},
    					data => {
    						let width = data.width;
    						let height = data.height;
    						that.width = width;
    						that.height = height;
    						that.startDraw();
    					}
    				)
    				.exec();
    		},
    		startDraw() {
    			console.log(2);
    			let that = this;
    			// 创建wxml2canvas对象
    			let drawMyImage = new Wxml2Canvas(
    				{
    					element: 'myCanvas', // canvas的id,
    					obj: that, // 传入当前组件的this
    					width: that.width * 2,
    					height: that.height * 2,
    					progress(percent) {
    						// 进度
    						// console.log(percent);
    					},
    					finish(url) {
    						console.log(url);
    						// 生成的图片
    						wx.hideLoading();
    						that.savePoster(url);
    					},
    					error(res) {
    						// 失败原因
    						console.log(res);
    						wx.hideLoading();
    					}
    				},
    				this
    			);
    			let data = {
    				// 获取wxml数据
    				list: [
    					{
    						type: 'wxml',
    						class: '.my_canvas .my_draw_canvas', // my_canvas要绘制的wxml元素根类名， my_draw_canvas单个元素的类名（所有要绘制的单个元素都要添加该类名）
    						limit: '.my_canvas', // 要绘制的wxml元素根类名
    						x: 0,
    						y: 0
    					}
    				]
    			};
    			// 绘制canvas
    			drawMyImage.draw(data, this);
    		},
    		savePoster(imgUrl) {
    			const that = this;
    			Taro.saveImageToPhotosAlbum({
    				filePath: imgUrl,
    				success: function() {
    					Taro.showToast({
    						title: '保存成功',
    						icon: 'none',
    						duration: 1500
    					});
    				},
    				fail(err) {
    					if (
    						err.errMsg === 'saveImageToPhotosAlbum:fail:auth denied' ||
    						err.errMsg === 'saveImageToPhotosAlbum:fail auth deny' ||
    						err.errMsg === 'saveImageToPhotosAlbum:fail authorize no response'
    					) {
    						Taro.showModal({
    							title: '提示',
    							content: '需要您授权保存相册',
    							showCancel: false,
    							success: modalSuccess => {
    								Taro.openSetting({
    									success(settingdata) {
    										if (settingdata.authSetting['scope.writePhotosAlbum']) {
    											Taro.saveImageToPhotosAlbum({
    												filePath: imgUrl,
    												success: function() {
    													Taro.showToast({
    														title: '保存成功',
    														icon: 'success',
    														duration: 2000
    													});
    												}
    											});
    										} else {
    											Taro.showToast({
    												title: '授权失败，请稍后重新获取',
    												icon: 'none',
    												duration: 1500
    											});
    										}
    									}
    								});
    							}
    						});
    					}
    				}
    			});
    		}
    	}
    };

    Taro.getSetting().then(res => {
          if (!res.authSetting['scope.writePhotosAlbum']) {
              Taro.authorize({
                  scope: 'scope.writePhotosAlbum',
                  success() {
                      that.savePoster('#myCanvas')
                  },
                  fail() {
                  }
              }).catch(() => {
                  Taro.showModal({
                      content: '检测到您没打开下载图片功能权限，是否去设置打开？',
                      confirmText: "确认",
                      cancelText: "取消",
                      success(res2) {
                          //点击“确认”时打开设置页面
                          if (res2.confirm) {
                              Taro.openSetting({
                                  success(res3) {
                                      if (res3.authSetting['scope.writePhotosAlbum']) {
                                          that.savePoster()
                                      }
                                  }
                              })
                          } else {
                              console.log('用户点击取消')
                          }
                      }
                  })
              })
          } else {
              that.savePoster()
          }
      })

    savePoster() {
      const that = this;
      try {
        this.$store.commit('setLoading', true);
        Taro.createSelectorQuery()
        .select('#myCanvas')
        .fields({
            node: true,
            size: true,
        })
        .exec((res) => {
            const width = res[0].width
            const height = res[0].height
    
            const canvas = res[0].node
            Taro.canvasToTempFilePath({
              x: 0,
              y: 0,
              width: 670,
              height: 1000,
              destWidth: 670 * Taro.getSystemInfoSync().pixelRatio,
              destHeight: 1000 * Taro.getSystemInfoSync().pixelRatio,
              canvas: canvas,
              quality: 1,
              success: (res1) => {
                console.log("res1.tempFilePath", res1.tempFilePath)
                that.posterUrl = res1.tempFilePath;
                Taro.showShareImageMenu({
                  path: res1.tempFilePath
                })
              },
              fail: (re) => {
              }
            })
        })
      } catch(e) {
      }
    },

    // An highlighted block
    var foo = 'bar';

 Luke