画海报未完成，看后台能否生成

shopping/productdetails.vue

@@ -136,8 +136,8 @@
 					<view class="close-wrap" @click="posterShow=false">
 						<u-icon name="close-circle" color="#fff" size="56rpx"></u-icon>
 					</view>
-					<view class="poster" id="poster" ref="poster" >
-						<img class="poster-bg" :src="staticUrl+'/img/poster-bg.png'" alt="">
+					<view class="poster" :style="posterStyle" id="poster" ref="poster" >
+						<img class="posterBg" :src="staticUrl+'/img/poster-bg.png'" alt="">
 						<img class="placard" :src="details.placard" alt="">
 						<!-- <u--image  :showLoading="true" :src="details.placard" width="100%" mode="widthFix"></u--image> -->
 						<view class="bottom u-flex u-row-between">
@@ -145,12 +145,12 @@
 								<view class="price">
 									¥<text class="num">{{details.salePrice}}</text>
 								</view>
-								<view class="goods-name ellipsis-2">{{details.goodsName}}</view>
+								<view class="goodsName ellipsis-2">{{details.goodsName}}</view>
 								<view class="slogan" v-if="details.slogan" :style="{color:details.sloganColor||'#00A447'}">{{details.slogan}}</view>
 							</view>
 							<view class="right">
-								<u--image :showLoading="true" :src="details.qrcodeUrl" width="108rpx" height="108rpx"></u--image>
-								<view class="img-tip">长按扫码购买</view>
+								<image :src="details.qrcodeUrl" style="width: 108rpx;height: 108rpx"></image>
+								<view class="imgTip">长按扫码购买</view>
 							</view>
 						</view>
 					</view>
@@ -158,13 +158,18 @@
 				</view>
 			</view>
 		</u-popup>
-		
+		<xWxmlToCanvas ref="xWxmlToCanvas" :hide="true" :width="300" :height="544" :xStyle="posterStyle" :xWxml="wxml">
+		</xWxmlToCanvas>
 		<u-toast ref="uToast"></u-toast>
 	</view>
 </template>
 
 <script>
+	import xWxmlToCanvas from '@/components/x-wxml-to-canvas/x-wxml-to-canvas';
 	export default {
+		components: {
+			xWxmlToCanvas
+		},
 		data() {
 			return {
 				staticUrl:this.$commonConfig.staticUrl,
@@ -178,7 +183,89 @@
 				},
 				hasAddr:false,
 				shareShow:false,
-				posterShow:true
+				posterShow:true,
+				mode:'aspectFill',
+				wxml:'',
+				posterStyle:{
+					poster:{
+						with:300,
+						height:544,
+						position: 'relative',
+						paddingBottom: 90,
+						backgroundColor:'#fff',
+					},
+					posterBg:{
+						position: 'absolute',
+						left: 0,
+						bottom: 0,
+						right: 0,
+						width: 300,
+						height:544,
+					},
+					placard:{
+						position: 'relative',
+						with:300,
+						height:387,
+					},
+					bottom:{
+						width:320,
+						height:157,
+						position: 'relative',
+						zIndex: 20,
+						flexDirection: 'row',
+						justifyContent: 'space-between',
+					},
+					left:{
+						width:125,
+						height:157,
+						paddingLeft:20,
+						marginRight: 58,
+					},
+					price:{
+						width:125,
+						height:40,
+						marginBottom: 10,
+					},
+					rmb:{
+						fontSize: 12,
+						color: '#FF3538',
+						position:'relative',
+						top:6
+					},
+					num:{
+						fontSize: 20,
+						color: '#FF3538',
+					},
+					goodsName:{
+						width:125,
+						height:40,
+						fontSize: 30,
+						color: '#333',
+						marginBottom: 16,
+					},
+					slogan:{
+						fontSize: 26,
+						fontWeight: 600,
+						lineHeight: 37,
+					},
+					right:{
+						textAlign: 'center',
+					},
+					imgTip:{
+						width:60,
+						height:14,
+						marginTop: 12,
+						fontSize: 20,
+						fontWeight: 400,
+						color: '#333333',
+						lineHeight: 28,
+					},
+					qrcode:{
+						width: 108,
+						height:108
+					}
+				},
+				posterSrc:''
 			}
 		},
 		onLoad(page) {
@@ -221,6 +308,28 @@
 					this.loadingPage = false;
 					console.log('res',res.data);
 					this.details = res.data;
+					// <image class="posterBg" src="${this.staticUrl}/img/poster-bg.png"></image>
+					// <image class="placard" src="${this.details.placard||''}"></image>
+					this.wxml = `
+						<view class="poster" id="poster" ref="poster" >
+							<image class="posterBg" src="${this.staticUrl}/img/poster-bg.png"></image>
+							<image class="placard" src="${this.details.slideImgList[0]}"></image>
+							<view class="bottom">
+								<view class="left">
+									<view class="price">
+										<text class="rmb">¥   </text>
+										<text class="num">${this.details.salePrice}</text>
+									</view>
+									<view class="goodsName">${this.details.goodsName}</view>
+									<view class="slogan" style="color:${this.details.sloganColor||'#00A447'}">${this.details.slogan}</view>
+								</view>
+								<view class="right">
+									<image class="qrcode" src="${this.details.qrcodeUrl||''}"></image>
+									<view class="imgTip">长按扫码购买</view>
+								</view>
+							</view>
+						</view>
+					`;
 					if(!res.data.slideImgList&&res.data.mainImg){
 						this.details.slideImgList = [];
 						this.details.slideImgList.push(res.data.mainImg)
@@ -391,13 +500,37 @@
 			        }
 			    });
 			},
+			// 海报相关开始
 			getPoster(){
 				this.posterShow = true;
 				this.shareShow = false;
 			},
 			savePoster(){
-				console.log('savePoster');
-			}
+				console.log('savePoster',this.wxml);
+				this.$refs.xWxmlToCanvas.renderToCanvas() //渲染至canvas
+				this.getCanvasImage();
+			},
+			canvasToTempFilePath() {//生成图片
+				this.$refs.xWxmlToCanvas.canvasToTempFilePath().then(res => {
+					this.posterSrc = res;
+				});
+			},
+			getCanvasImage() {//获取图片
+				this.$refs.xWxmlToCanvas.getCanvasImage().then(res => {
+					this.posterSrc = res;
+					console.log('posterSrc',this.posterSrc);
+					// this.saveImageToPhotosAlbum()
+				});
+			},
+			saveImageToPhotosAlbum() {//下载图片
+				if (!this.posterSrc) return uni.showToast({
+					title: '未获取路径',
+					icon: 'none'
+				})
+				console.log('wxml',this.wxml);
+				this.$refs.xWxmlToCanvas.saveImageToPhotosAlbum(this.posterSrc)
+			},
+			// 海报相关结束
 		}
 	}
 </script>
@@ -573,7 +706,7 @@
 		position: relative;
 		padding-bottom: 90rpx;
 		background-color: #fff;
-		.poster-bg{
+		.posterBg{
 			position: absolute;
 			left: 0;
 			bottom: 0;
@@ -603,7 +736,7 @@
 						margin-left: 5rpx;
 					}
 				}
-				.goods-name{
+				.goodsName{
 					font-size: 30rpx;
 					font-weight: 400;
 					color: #333333;
@@ -618,13 +751,17 @@
 			}
 			.right{
 				text-align: center;
-				.img-tip{
+				.imgTip{
 					margin-top: 12rpx;
 					font-size: 20rpx;
 					font-weight: 400;
 					color: #333333;
 					line-height: 28rpx;
 				}
+				.qrcode{
+					width: 108rpx;
+					height:108rpx;
+				}
 			}
 		}
 	}