uniapp canvas 保存图片至手机

【注】

一。 1.77 为 背景图的高宽比

二。 canvas画布 的 style 属性中的width和height 做数据绑定， 宽带为当前使用者手机的宽度， 高度为手机宽度 * 1.77， 维持背景图的宽高比例

三。 由于目前H5端不支持saveImageToPhotosAlbum直接保存至图库的接口，所以H5端使用长按图片保存至手机的方法

四。  由于canvas画布不可以长按保存，所以针对H5端在页面布局上添加一个image标签， 其src即为canvasToTempFilePath返回的tempFilePath

五。  needLongTapSaveImg 用来控制canvas画布 与 H5端长按图片 的显示切换， 只有当平台是H5时，显示Image标签，隐藏canvas画布， 这样用户可以长按保存； 除了H5的其他平台则直接调用saveImageToPhotosAlbum

1. <template> 
2.     <view> 
3.         <canvas canvas-id="canvas4renovate":style="{ width: windowWidth + 'px', height: windowWidth * 1.77 + 'px'}" style="letter-spacing: -1rpx;" v-show="!needLongTapSaveImg"></canvas> 
4.         <image :src="tempFilePath" :style="{ width: windowWidth + 'px', height: windowWidth * 1.77 + 'px'}" v-show="needLongTapSaveImg"></image> 
5.         <button type="default" @click="downLoadImg()">保存至相册</button> 
6.     </view> 
7. </template> 
8.  
9. <script> 
10.     export default { 
11.         data() { 
12.             return { 
13.                 renovationInfo: {}, 
14.                 windowWidth: 0, 
15.                 windowHeight: 0, 
16.                 tempFilePath: '', 
17.                 needLongTapSaveImg: false, 
18.             } 
19.         }, 
20.         onLoad(options) { 
21.             this.renovationInfo = JSON.parse(options.apply); 
22.             uni.getSystemInfo({ 
23.                 success: (res) => { 
24.                     this.windowWidth = res.windowWidth; 
25.                     this.windowHeight = res.windowHeight;　　　　　　　　　　　　this.createImg(); 
26.                 } 
27.             }) 
28.         }, 
29.         methods: { 
30.             createImg: function(){ 
31.                 const ctx = uni.createCanvasContext('canvas4renovate'); 
32.                 ctx.drawImage('/static/images/permiss.jpg', 0, 0, this.windowWidth, this.windowWidth * 1.77); 
33.                 ctx.font = 'bold 16rpx serif'; 
34.                 ctx.setTextAlign('left'); 
35.                 ctx.setFillStyle('#5A3834'); 
36.                 ctx.fillText('编号:' + this.renovationInfo.rId, this.windowWidth * 0.13, this.windowWidth * 1.77 * 0.44); 
37.                 ctx.fillText('单位:' + this.renovationInfo.company, this.windowWidth * 0.13, this.windowWidth * 1.77 * 0.505); 
38.                 ctx.fillText('负责人:' + this.renovationInfo.personMain, this.windowWidth * 0.13, this.windowWidth * 1.77 * 0.57); 
39.                 ctx.fillText('联系电话:' + this.renovationInfo.tel, this.windowWidth * 0.13, this.windowWidth * 1.77 * 0.63); 
40.                 ctx.font = 'bold 12rpx serif'; 
41.                 ctx.fillText('有效期:' + this.renovationInfo.startTimeView + '至' + this.renovationInfo.endTimeView, this.windowWidth * 0.14, this.windowWidth * 1.77 * 0.83); 
42.                 ctx.fillText('公司:XXX', this.windowWidth * 0.14, this.windowWidth * 1.77 * 0.86); 
43.                 ctx.draw(true, () => { 
44.                     setTimeout(() => { 
45.                         uni.canvasToTempFilePath({ 
46.                             canvasId: 'canvas4renovate', 
47.                             fileType: 'jpg', 
48.                             success: (res) => { 
49.                                 this.tempFilePath = res.tempFilePath 
50.                                 //#ifdef H5 
51.                                 this.needLongTapSaveImg = true; 
52.                                 //#endif 
53.                             } 
54.                         }) 
55.                     }) 
56.                 }) 
57.             }, 
58.             downLoadImg: function() { 
59.                 if(this.tempFilePath == ''){ 
60.                     uni.showToast({ 
61.                         title: '图片未生成', 
62.                         icon: 'none' 
63.                     }) 
64.                     return; 
65.                 } 
66.                 //#ifndef H5 
67.                 uni.saveImageToPhotosAlbum({ 
68.                     filePath: this.tempFilePath, 
69.                     success: function() { 
70.                         uni.showToast({ 
71.                             title: '已保存至相册', 
72.                             icon: 'none' 
73.                         }) 
74.                     } 
75.                 }); 
76.                 //#endif 
77.                 //#ifdef H5 
78.                 uni.showToast({ 
79.                     title: '请长按图片-保存至相册' 
80.                 }) 
81.                 //#endif 
82.             } 
83.  
84.         } 
85.     } 
86. </script> 
87.  
88. <style> 
89. </style>