uni-app分享海报

迷南。 2022-10-11 13:53 270阅读 0赞

uni-app分享，uni.share可以支持分享图片。但是他仅支持app分享

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0_size_16_color_FFFFFF_t_70][]

**小程序里面不能直接分享一个纯图片，是有个path的链接。分享出去的是一个网页。如果想分享图片可以自己下载到相册再去分享****。或者是长按图片就会有个分享给好友。**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0_size_16_color_FFFFFF_t_70 3][]

三个图分别是，展示页面-点击分享按钮-点击微信

主要思路就是：

你是把二维码base64的转为二进制文件，然后和背景一起使用canvas绘图。然后你就会获取一个绘图以后的全部图片的链接地址。

页面上写一个canvas绘图用但是，他可以不显示给用户看。只是为了绘图有个容器。

> //二维码base64的转为二进制文件的函数
> 
> base64ToSave(base64data, FILE\_BASE\_NAME = 'tmp\_base64src') \{  
>                 const fsm = uni.getFileSystemManager();  
>                 return new Promise((resolve, reject) => \{  
>                     //format这个跟base64数据的开头对应  
>                     const \[, format, bodyData\] = /data:image\\/(\\w+);base64,(.\*)/.exec(base64data) || \[\];  
>                     if (!format) \{  
>                         reject(new Error('ERROR\_BASE64SRC\_PARSE'));  
>                     \}  
>                     const filePath = \`$\{wx.env.USER\_DATA\_PATH\}/$\{FILE\_BASE\_NAME\}.$\{format\}\`;  
>                     const buffer = wx.base64ToArrayBuffer(bodyData);  
>                     fsm.writeFile(\{  
>                         filePath,  
>                         data: buffer,  
>                         encoding: 'binary',  
>                         success() \{  
>                             resolve(filePath);  
>                         \},  
>                         fail() \{  
>                             reject(new Error('ERROR\_BASE64SRC\_WRITE'));  
>                         \},  
>                     \});  
>                 \});  
>             \},

> //绘图
> 
>             genQrFile() \{  
>                 var urlQR = this.base64ToSave(this.qrBase64)//把this.qrBase64二维码的图片先转为二进制文件。  
>                 let that = this;  
>                 Promise.all(\[  
>                     urlQR  
>                 \]).then(res => \{  
>                       
>                     console.log(res\[0\])  
>                     that.qrUrl=res\[0\]  
>                     let ctx = uni.createCanvasContext('firstCanvas', this);  
>                     ctx.drawImage("/pages\_student/static/images/posterbg.png", 0, 0, 375, 812);//海报背景绘图  
>                     ctx.drawImage(res\[0\], 201.5 / 2.0, 1098.67 / 2,//二维码绘图  
>                         347.0 / 2.0, 347.0 / 2.0);  
>                     ctx.draw(false, () => \{  
>                         uni.canvasToTempFilePath(\{  
>                             x: 0,  
>                             y: 0,  
>                             width: 375,  
>                             height: 812,  
>                             destWidth: 375 \* 2,  
>                             destHeight: 812 \* 2,  
>                             canvasId: 'firstCanvas',  //canvas的id  
>                             success: function(res) \{  
>                                 that.imgurl = res.tempFilePath;//最终的绘图图片的src地址  
>                             \},  
>                             fail(e) \{
> 
>                             \}  
>                         \});  
>                     \});  
>                 \})                  
>             \},

>  //保存图片到相册
> 
> saveToAlbum() \{  
>           uni.saveImageToPhotosAlbum(\{  
>                             filePath: this.imgurl,  
>                             success: function() \{  
>                                 uni.showToast(\{  
>                                     title: '保存成功',  
>                                     icon: 'none'  
>                                 \});  
>                             \}  
>                         \});       
>  \},

主要的代码就是上面的内容 。先访问接口回去二进制的base64的图片地址，然后访问genQrFile()绘图，得到绘图后的图片路径。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0_size_16_color_FFFFFF_t_70]: /images/20221005/5cf79a100fba48109e5940e056ab799c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0_size_16_color_FFFFFF_t_70 1]: /images/20221005/398fd18becd94e29861ca10cd9a1a90b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0_size_16_color_FFFFFF_t_70 2]: /images/20221005/b03ac312b99e4fdc9bfb9103b568abcb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0_size_16_color_FFFFFF_t_70 3]: /images/20221005/77d05e684fab4856b1996c24a2211da6.png