uniapp小程序实现canvas画布保存图片

1. <template> 
2.     <view> 
3.         <canvas canvas-id="gameCanvas" style="width:750rpx; height:1232rpx;"></canvas> 
4.     </view> 
5. </template> 

1. <script> 
2.     export default { 
3.         data() { 
4.             return { 
5.                 kehu: '', 
6.                 pingming: '', 
7.                 date: '', 
8.                 zhongliang: '', 
9.                 zongjine: '' 
10.             }; 
11.         }, 
12.         onLoad(options) { 
13.             const ctx = uni.createCanvasContext('gameCanvas'); //创建画布对象   
14.             uni.showLoading({ 
15.                 title: '正在生成中...' 
16.             }) 
17.             console.log(options) //接收上个页面的数据 
18.             this.kehu = options.buyerOrg; 
19.             this.pingming = options.goodsName; 
20.             this.zhongliang = options.settleWeight; 
21.             this.date = options.createTime; 
22.             this.zongjine = options.settlement; 
23.             let imageWidth = 375, 
24.                 imageHeight = 616; 
25.             uni.getImageInfo({ 
26.                 src: 'https://xxxxxxxxxxxxxxxxxx.png', //网络图片用来做背景 
27.                 success: (res) => { 
28.                     console.log(res.path) 
29.                     ctx.save() 
30.                     ctx.drawImage(res.path, 0, 0, 375, 616)  
31.                     ctx.draw(true) 
32.                     ctx.setFillStyle('#333333') 
33.                     ctx.draw(true) 
34.                     ctx.setFillStyle('black') 
35.                     ctx.setFontSize(16) 
36.                     ctx.fillText('客户名：' + this.kehu, 30, 130) 
37.                     ctx.fillText('品名：' + this.pingming, 30, 190) 
38.                     ctx.fillText('重量：' + this.zhongliang + '吨', 30, 250) 
39.                     ctx.fillText('总金额：' + '￥' + this.zongjine, 30, 310) 
40.                     ctx.fillText('日期：' + this.date, 30, 370) 
41.                     ctx.draw(true) 
42.                     setTimeout(() => { //解决画布空白的问题 
43.                         ctx.draw(true, () => { 
44.                             // console.log(666) 
45.                             uni.canvasToTempFilePath({ //将canvas生成图片 
46.                                 canvasId: 'gameCanvas', 
47.                                 x: 0, 
48.                                 y: 0, 
49.                                 width: imageWidth, 
50.                                 height: imageHeight, 
51.                                 destWidth: imageWidth, //截取canvas的宽度 
52.                                 destHeight: imageHeight, //截取canvas的高度 
53.                                 success: function(res) { 
54.                                     uni.saveImageToPhotosAlbum({ //保存图片到相册 
55.                                         filePath: res.tempFilePath, 
56.                                         success: function() { 
57.                                             uni.hideLoading() 
58.                                             uni.showToast({ 
59.                                                 title: "图片已保存", 
60.                                                 duration: 2000 
61.                                             }) 
62.                                         }, 
63.                                         fail() { 
64.                                             uni.hideLoading() 
65.                                         } 
66.                                     }) 
67.                                 } 
68.                             }) 
69.                         }) 
70.                     }, 1500); 
71.  
72.                 } 
73.             }) 
74.  
75.         }, 
76.  
77.  
78.     } 
79. </script>