uni-app canvas截图 uniapp截图

我就是我 2022-12-21 14:52 776阅读 0赞

只试过小程序端保存，一定要真机保存，模拟器保存的图片可能是黑的。

<template>
    	<view>
    		
    		<canvas :style="{ width: canvasW + 'px', height: canvasH + 'px' }"
    		canvas-id="myCanvas"/>
    		
    
    	<u-button  @click="draw()">保存</u-button>
    	</view>
    </template>
    
    <script>
    	export default { 
    		data() { 
    			return { 
    				path:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2244350016,3480840801&fm=15&gp=0.jpg'
    				,
    				canvasH:'',
    				canvasW:'',
    			
    				info:{ 
    					vipLevel:'test会员',
    					fromCountry:'test仓库',
    					fromArea:'test区',
    					data:'20-25个自然日',
    					toCountry:'test仓库',
    					toArea:'test',
    					cargoType:'test货',
    					shipFee:'120/CBM起',
    					pickFee:'200 CNY/CBM',
    					// pickFee太长 可能需要拆分
    					pickFeeRest:'(20-50KM)',
    					deliverFee:'60 DHS'
    					
    				}
    			}
    		},
    		onLoad() { 
    			// get the screen H and W
    			this.canvasH = uni.getSystemInfoSync().screenHeight
    			this.canvasW = uni.getSystemInfoSync().screenWidth
    			
    		},
    		onReady() { 
    			this.draw()
    		},
    		methods: { 
    			// 因为只有高度换成ipad不能自适应,暂时只换高度
    			// 根据百分百计算px
    			getPersentageH(p){ 
    				p = p /100
    				let h = uni.getSystemInfoSync().screenHeight
    				return parseInt(h * p)
    			},
    			getPersentageW(){ },
    			draw(){ 
    				
    				let ctx = uni.createCanvasContext('myCanvas');
    					
    				ctx.drawImage(this.path,0,0,this.canvasW,this.canvasH);
    				// VIP
    				ctx.setFillStyle('#8D7700')
    				ctx.font=`${ uni.upx2px(22)}px Arial`;
    				ctx.fillText(`${ this.info.vipLevel}`,uni.upx2px(64),this.getPersentageH(23.5))
    				
    				// From
    				ctx.setFillStyle('#000000')
    				ctx.font=`${ uni.upx2px(40)}px Arial`;
    				ctx.fillText(`${ this.info.fromCountry}`,uni.upx2px(110),this.getPersentageH(29))
    				
    				ctx.font=`${ uni.upx2px(25)}px Arial`;
    				ctx.fillText(`${ this.info.fromArea}`,uni.upx2px(160),this.getPersentageH(32))
    				// 个自然日
    				ctx.font=`${ uni.upx2px(25)}px Arial`;
    				ctx.fillText(`${ this.info.data}`,uni.upx2px(300),this.getPersentageH(31))
    				// to
    				
    				ctx.font=`${ uni.upx2px(40)}px Arial`;
    				ctx.fillText(`${ this.info.toCountry}`,uni.upx2px(500),this.getPersentageH(29))
    				
    				ctx.font=`${ uni.upx2px(25)}px Arial`;
    				ctx.fillText(`${ this.info.toArea}`,uni.upx2px(560),this.getPersentageH(32))
    				// cargoType
    				
    				ctx.font=`${ uni.upx2px(32)}px Arial`;
    				ctx.fillText(`${ this.info.cargoType}`,uni.upx2px(130),this.getPersentageH(43))
    				// shipFee
    				ctx.font=`${ uni.upx2px(30)}px Arial`;
    				ctx.fillText(`${ this.info.shipFee}`,uni.upx2px(450),this.getPersentageH(43))
    				// if there is pick or deliver fee
    				if(this.info.pickFee){ 
    					ctx.setFillStyle('#999999')
    					ctx.font=`${ uni.upx2px(28)}px Arial`;
    					ctx.fillText(`提货费单价`,uni.upx2px(130),this.getPersentageH(48))
    					ctx.setFillStyle('#000000')
    					ctx.font=`${ uni.upx2px(28)}px Arial`;
    					ctx.fillText(`${ this.info.pickFee}`,uni.upx2px(130),this.getPersentageH(51))
    					
    				}
    				if(this.info.deliverFee){ 
    					ctx.setFillStyle('#999999')
    					ctx.font=`${ uni.upx2px(28)}px Arial`;
    					ctx.fillText('派送费',uni.upx2px(450),this.getPersentageH(48))
    					ctx.setFillStyle('#000000')
    					ctx.font=`${ uni.upx2px(28)}px Arial`;
    					ctx.fillText(`${ this.info.deliverFee}`,uni.upx2px(450),this.getPersentageH(51))
    					
    				}
    			
    				ctx.draw()
    				
    				
    				uni.canvasToTempFilePath({ 
    				  x: 0,
    				  y: 0,
    				  width: this.canvasW,
    				  height: this.canvasH,
    				 
    				  canvasId: 'myCanvas',
    				  success: (res) => { 
    				    // 在H5平台下，tempFilePath 为 base64
    				    console.log(res.tempFilePath) 
    					
    					this.path = res.tempFilePath
    					//保存图片到系统相册
    										uni.saveImageToPhotosAlbum({ 
    												filePath: this.path,
    												success: (res) => { 
    													uni.showToast({ 
    														title: '保存成功'
    													})
    												},
    												fail() { 
    													uni.showToast({ 
    														icon: 'none',
    														title: '保存名片码失败'
    													})
    												}})
    				  } 
    				})
    				
    				
    			}
    		}
    	}
    </script>
    
    <style>
    
    </style>