uniapp分享图片(canvas标签内容生成图片并保存)

APP：

　　1.异步加载图片数组内容

 1     // 1.异步加载图片数组内容
 2     promiseImgArray(api) {
 3         return (options, ...params) => {
 4             return new Promise((resolve, reject) => {
 5                 const extras = {
 6                     success: resolve,
 7                     fail: reject
 8                 }
 9                 api({
10                     ...options,
11                     ...extras
12                 }, ...params)
13             })
14         }
15     },

　　2.绘制准备分享的图片内容

 1     // 2.绘制准备分享的图片内容 绘制单位为px
 2     canvasSaveImage(shareInfo) {
 3     let getImgInfo = this.promiseImgArray(uni.getImageInfo);
 4     Promise.all([getImgInfo({
 5                 src: '../../static/images/share-bg-img.png'
 6             }), getImgInfo({
 7                 src: this.$baseURL + this.shareImg
 8             }), getImgInfo({
 9                 src: '../../static/images/icon-time.png'
10             }) ])
11     .then(res => {
12         console.log(res)
13         // 获取页面上的canvas标签的canvas-id
14         const ctx = uni.createCanvasContext('shareCanvas');
15         // 绘制图片(背景图要首先绘制，不然会被遮盖)
16         ctx.drawImage(res[0].path, 0, 0, 325, 391);
17 
18         ctx.setFillStyle('white')
19         ctx.setFontSize(16)
20         // 固定文本内容
21         ctx.fillText("有点小九九", 8, 62);
22 
23         ctx.setFillStyle('#777777')
24         ctx.setFontSize(13)
25         // 变量内容
26         ctx.fillText(shareInfo.create_time, 46, 137);
27 
28         ctx.setFillStyle('#333333')
29         ctx.setFontSize(14)
30         // 设置文本样式
31         ctx.font = "bold 14px sans-serif"
32         // 文本换行 (第3个方法)
33         this.drawText(ctx, '【' + shareInfo.title + '】', 20, 163, 49, 285)
34         // 划线
35         ctx.beginPath()
36         ctx.moveTo(20, 293)
37         ctx.lineTo(305, 293)
38 
39         ctx.setFillStyle('#333333')
40         ctx.setFontSize(12)
41         // 可以添加国际化内容
42         ctx.fillText(this.$t('information.shareText2'), 88, 321);
43 
44         const qrImgSize = 60
45         // 绘制图片
46         ctx.drawImage(res[1].path, 20, 309, qrImgSize, qrImgSize)
47         ctx.stroke();
48         // 绘制整图
49         ctx.draw(false, () => {
50             // 把canvas生成为图片
51             this.tempFileImage()
52         })
53     })
54     .catch(err=>{
55         console.log(err)
56     })
57     },

　　3.控制绘制文本换行

 1     // 3.控制绘制文本换行
 2     drawText: function(ctx, str, leftWidth, initHeight, titleHeight, canvasWidth) {
 3     let lineWidth = 0;
 4     let lastSubStrIndex = 0; //每次开始截取的字符串的索引
 5     for (let i = 0; i < str.length; i++) {
 6         lineWidth += ctx.measureText(str[i]).width;
 7         if (lineWidth > canvasWidth) {
 8             ctx.fillText(str.substring(lastSubStrIndex, i), leftWidth, initHeight); //绘制截取部分
 9             initHeight += 22; //22为 文字大小20 + 2
10             lineWidth = 0;
11             lastSubStrIndex = i;
12             titleHeight += 22;
13         }
14         if (i == str.length - 1) { //绘制剩余部分
15             ctx.fillText(str.substring(lastSubStrIndex, i + 1), leftWidth, initHeight);
16         }
17     }
18     // 标题border-bottom 线距顶部距离
19     titleHeight = titleHeight + 10;
20     return titleHeight;
21     },

　　4.把当前画布指定区域的内容导出生成指定大小的图片

 1     //  4.把当前画布指定区域的内容导出生成指定大小的图片
 2     tempFileImage() {
 3     let that = this
 4     uni.canvasToTempFilePath({
 5         canvasId: 'shareCanvas',
 6         success: (res) => {
 7             console.log(res, 'tempFileImage')
 8             uni.hideLoading()
 9             // 保存当前绘制图片
10             that.savePic(res.tempFilePath)
11         },
12         fail: function(err) {
13             console.log(err, '图片生成失败')
14         }
15     })
16 
17     },

　　5.保存图片到本地

 1     // 5.保存图片到本地
 2     savePic(filePath) {
 3     // #ifdef APP-PLUS
 4     uni.showLoading({
 5         title: '正在保存'
 6     });
 7     uni.saveImageToPhotosAlbum({
 8         filePath: filePath,
 9         success: function() {
10             uni.showToast({
11                 title: '图片保存成功～'
12             });
13         },
14         fail: function(e) {
15             console.log(e, '图片保存失败')
16         },
17         complete: function() {
18             uni.hideLoading()
19         }
20     });
21     // #endif
22     // #ifdef H5
23     // uni.saveImageToPhotosAlbum 并不兼容h5 写个兼容h5的方法 不一定有用
24     var oA = document.createElement('a');
25     oA.download = 'share';
26     oA.href = data.tempFilePath;
27     document.body.appendChild(oA);
28     oA.click();
29     oA.remove(); // 下载之后把创建的元素删除
30     // #endif
31     },

　　完工

posted on 2021-06-29 16:43 有点小九九阅读(4453) 评论(2) 编辑收藏举报