cqcarbonwxapp/pages/usercenter/certificateList/certificate/certificate.vue

<template>
	<view class="pages">
		<view class="container" id="wrapper">
		  <text class="title draw" data-text="Hello there">Hello there</text>
		  <text class="info draw" data-text="小程序是一种新的开放能力，开发者可以快速地开发一个小程序。">
		   小程序是一种新的开放能力，开发者可以快速地开发一个小程序。
		  </text>
		  <view class="image-wrapper draw">
		    <image class="draw" :src="$getimg + 'guide02.png'"/>
			<image class="draw" src="../../../../static/img/icon_use_active.png"/>
		  </view>
		  
		  <button class="generate-btn" @click="drawCanvas">generate</button>
		</view>
		<canvas canvas-id="canvas" class="share-canvas"></canvas>
	</view>
</template>

<script>
	const wxml2canvas = require('@/utils/wxml2canvas.js');
	export default {
		data() {
			return {
				$getimg:this.$getimg,
				thetoken:'',
				orderid:'',
				
				params:{
				}
				
			}
		},
		onShow() {
		
		},
		onLoad(e) {
			this.thetoken = 'Bearer' + ' ' + this.$store.state.token;
			this.orderid = e.orderid;
			uni.showLoading({
				title: '正在获取证书信息'
			});
			this.$api.http.get(this.config.apiBaseurl + '/carbon-h5/wap/order/getCredentialByOrderId?orderId='+this.orderid,{
				header: {
				Accept:'application/json',
				Authorization: this.thetoken, 
			},
			}).then(res => {
				uni.hideLoading();
				// this.info = Object.assign(this.info, data);
				// this.info.url = '/static/html2canvas/index.html?key=' + this.orderid;
				console.log('res',JSON.parse(JSON.stringify(res.data.retBody)));
			}).catch(err =>{
				console.log('err',err)
			});

		},
		methods: {
			drawCanvas: function() {
				const wrapperId = '#wrapper'
				const drawClassName = '.draw'
				const canvasId = 'canvas'
				
				wxml2canvas(wrapperId, drawClassName, canvasId).then(() => {
					uni.showLoading({
						title: '生成中'
					});
					uni.canvasToTempFilePath({
					  x: 0,
					  y: 0,
					  // width: 500,
					  // height: 500,
					  // destWidth: 100,
					  // destHeight: 100,
					  canvasId: 'canvas',
					  success: function(res) {
						uni.hideLoading();
						uni.showLoading({
							title: '保存中'
						});
					    console.log(res.tempFilePath);
						uni.saveImageToPhotosAlbum({
							filePath:res.tempFilePath,
							success:function(res){
								uni.hideLoading();
							}							
						})
					  } 
					})
				  // canvas has been drawn
				  // can save the image with wx.canvasToTempFilePath and wx.saveImageToPhotosAlbum 
				})
		  }

		}
	}
</script>

<style>
	/* @import url("./index.css"); */
	.container {
	  height: 100%;
	  box-sizing: border-box;
	  padding: 10px 20px;
	  display: flex;
	  flex-direction: column;
	 
	} 
	.container .title {
	  font-size:36px;
	  text-align: left;
	  margin-bottom: 10px;
	
	}
	.container .info {
	  font-size: 14px;
	  line-height: 18px;
	  color: grey;
	  text-align: left;
	  margin-bottom: 40px;
	}
	.container .image-wrapper image {
	  width: 100%;
	}
</style>