devbox
秋刀鱼在做梦
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

uniapp 微信小程序自定义分享图片_微信小程序分享图片

作者：秋刀鱼在做梦 | 2024-08-06 07:39:21

赞

踩

微信小程序分享图片

场景：微信小程序用户，点击小程序里商品的分享按钮时，想要不同的商品展示不用的分享内容，比如分享图片上展示商品的图片、价格等信息。分享的UI图如下： 

 

实现方法：

1. 分享按钮：<button open-type="share">和onShareAppMessage(OBJECT)

2. 自定义内容：因为onShareAppMessage的imageUrl参数的支持的是本地文件路径、代码包文件路径或者网络图片路径 ，所以这里实现自定义的分享的方法是结合canvas画布uni.createCanvasContext(canvasId, this)，将画好的内容利用uni.canvasToTempFilePath(object, component)导出生成指定大小的图片，再将返回的文件路径赋值给imageUrl，即可实现。

 具体可看官网：分享 | uni-app官网 、uni.createCanvasContext(canvasId, this) | uni-app官网、uni-app官网、uni.canvasToTempFilePath(object, component) | uni-app官网

代码：先贴上画布的代码，这里画了三种自定义分享的内容，样式在代码下方。

1. 新建一个组件文件：ShareCanvas.vue

  1. <template>
  2.   <view class="ShareCanvas">
  3.     <view class="canvas">
  4.       <canvas canvas-id="shareCanvas" />
  5.     </view>
  6.   </view>
  7. </template>
  8.  
  9. <script>
  10. export default {
  11.   name: 'ShareCanvas',
  12.   methods: {
  13.     // 订单分享
  14.     setOrderCanvas(info) {
  15.       return new Promise(async (resolve, reject) => {
  16.         console.log('订单分享-info', info);
  17.         try {
  18.           const ctx = uni.createCanvasContext('shareCanvas', this)
  19.           // 绘制背景图
  20.           ctx.setFillStyle('#19C161')
  21.           ctx.fillRect(0, 0, 211, 170) // 保证宽高比是 5:4
  22.  
  23.           // 绘制文本信息
  24.           ctx.setFontSize(21);
  25.           ctx.setTextAlign('left')
  26.           ctx.setFillStyle('#FFFFFF')
  27.           ctx.fillText('我买好啦！', 9, 32)
  28.  
  29.           // 浅绿色背景
  30.           this.setRadius(ctx, 10, 106, 11, 97, 27) // 加圆角
  31.           ctx.setFillStyle('#EFF9F1')
  32.           ctx.fill()
  33.           // ctx.fillRect(106, 11, 97, 27) // x, y, width, height
  34.  
  35.           ctx.setFontSize(14);
  36.           ctx.setTextAlign('center')
  37.           ctx.setFillStyle('#19C161')
  38.           ctx.fillText('跟团号：' + info.followNum, 155, 30)
  39.  
  40.           this.setRadius(ctx, 3, 9, 49, 194, 106)
  41.           ctx.setFillStyle('#FFFFFF')
  42.           ctx.fill()
  43.           // ctx.fillRect(9, 49, 194, 106) // 不设置圆角的时候这么画有背景色的矩形
  44.  
  45.           // 画商品图
  46.           ctx.save();
  47.           this.setRadius(ctx, 5, 17, 59, 85, 85)
  48.           ctx.clip();//画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内
  49.           try {
  50.             const { path } = await this.getImge(info.orderCartInfos[0].productImg)
  51.             ctx.drawImage(path, 17, 59, 85, 85)
  52.           } catch (error) {
  53.             console.error(error);
  54.           }
  55.           ctx.restore();
  56.  
  57.           if (info.teamLeaderUser && info.teamLeaderUser.avatar) {
  58.             // 团长头像
  59.             ctx.save();
  60.             this.setRadius(ctx, 5, 110, 60, 25, 25)
  61.             ctx.clip(); // 画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内
  62.             try {
  63.               const { path } = await this.getImge(info.teamLeaderUser.avatar)
  64.               ctx.drawImage(path, 110, 60, 25, 25)
  65.             } catch (error) {
  66.               console.error(error);
  67.             }
  68.             ctx.restore();
  69.           }
  70.  
  71.           if (info.teamLeaderUser && info.teamLeaderUser.nickname) {
  72.             // 团长昵称
  73.             ctx.setFontSize(12);
  74.             ctx.setTextAlign('left')
  75.             ctx.setFillStyle('#96999B')
  76.             ctx.fillText(info.teamLeaderUser.nickname.length > 4 ? info.teamLeaderUser.nickname.slice(0, 4) + '...' : info.teamLeaderUser.nickname, 140, 76)
  77.           }
  78.  
  79.           ctx.setFontSize(14);
  80.           ctx.setTextAlign('center')
  81.           ctx.setFillStyle('#FB7415')
  82.           ctx.fillText(`¥${info.orderCartInfos[0].unitPrice}`, 152, 105)
  83.  
  84.           this.setRadius(ctx, 10, 115, 118, 75, 26)
  85.  
  86.           const grd = ctx.createLinearGradient(115, 118, 115, 144)
  87.           grd.addColorStop(0, '#FDAC2F')
  88.           grd.addColorStop(0.5, '#FDA72C')
  89.           grd.addColorStop(1, '#FB5615')
  90.  
  91.           // 橙色按钮背景
  92.           ctx.setFillStyle(grd)
  93.           // ctx.fillRect(230/2, 218/2, 149/2, 53/2) // x, y, width, height
  94.           ctx.fill()
  95.  
  96.           ctx.setFontSize(12);
  97.           ctx.setTextAlign('center')
  98.           ctx.setFillStyle('#FFFFFF')
  99.           ctx.fillText('去看看 >', 152, 135)
  100.  
  101.           ctx.draw(false, (() => {
  102.             setTimeout(() => {
  103.               uni.canvasToTempFilePath({
  104.                 canvasId: 'shareCanvas',
  105.                 success: (res) => {
  106.                   return resolve(res.tempFilePath)
  107.                 },
  108.                 fail: function (error) {
  109.                   console.log('fail----fail', error);
  110.                   //TODO
  111.                   return reject(error)
  112.                 }
  113.               }, this)
  114.             }, 500);
  115.           }))
  116.         } catch (error) {
  117.           console.log('画图失败error', error);
  118.           return reject(error)
  119.         }
  120.       })
  121.     },
  122.     // 商品分享
  123.     setGoodsShareCanvas(info) {
  124.       console.log('商品分享--info', info);
  125.       return new Promise(async (resolve, reject) => {
  126.         try {
  127.           const ctx = uni.createCanvasContext('shareCanvas', this)
  128.           // 绘制背景图
  129.           ctx.setFillStyle('#FFFFFF')
  130.           ctx.fillRect(0, 0, 211, 170)
  131.  
  132.           // 团长头像
  133.           ctx.save();
  134.           this.setRadius(ctx, 5, 0, 0, 30, 30)
  135.           ctx.clip(); // 画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内
  136.           try {
  137.             const { path } = await this.getImge(info.avatar)
  138.             ctx.drawImage(path, 0, 0, 30, 30)
  139.           } catch (error) {
  140.             console.error(error);
  141.           }
  142.           ctx.restore();
  143.  
  144.           // 团长昵称
  145.           ctx.setFontSize(12);
  146.           ctx.setTextAlign('left')
  147.           ctx.setFillStyle('#96999B')
  148.           ctx.fillText(info.nickname.length > 11 ? info.nickname.slice(0, 11) + `${info.pinkId ? '...的团' : '...'}` : info.nickname + '的团', 35, 18)
  149.  
  150.           // 商品1图
  151.           ctx.save();
  152.           this.setRadius(ctx, 3, 0, 35, 211, 211)
  153.           ctx.clip(); // 画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内
  154.           try {
  155.             const { path } = await this.getImge(info.image)
  156.             ctx.drawImage(path, 0, 35, 211, 211)
  157.           } catch (error) {
  158.             console.error(error);
  159.           }
  160.           ctx.restore();
  161.  
  162.           // 绿色背景
  163.           ctx.setFillStyle('#19C161')
  164.           ctx.fillRect(0, 130, 131, 40) // x, y, width, height
  165.  
  166.           ctx.setFontSize(16);
  167.           ctx.setTextAlign('center')
  168.           ctx.setFillStyle('#FFFFFF')
  169.           ctx.fillText(`¥${info.pinkId ? info.pinkPrice : info.price}起`, 65, 130 + 18)
  170.  
  171.           ctx.setFontSize(12);
  172.           ctx.setTextAlign('center')
  173.           ctx.setFillStyle('#FFFFFF')
  174.           ctx.fillText(`¥${info.otPrice}`, 65, 130 + 34)
  175.  
  176.           // 划线
  177.           ctx.beginPath()
  178.           ctx.setLineWidth(1);
  179.           ctx.setStrokeStyle('#FFFFFF')
  180.           ctx.moveTo(40, 130 + 30)
  181.           ctx.lineTo(90, 130 + 30)
  182.           ctx.stroke()
  183.  
  184.           // 深绿色背景
  185.           ctx.setFillStyle('#19AF5C')
  186.           ctx.fillRect(131, 130, 211 - 131, 40)
  187.  
  188.           if (info.pinkId) {
  189.             // 立即跟团按钮
  190.             ctx.setFontSize(16);
  191.             ctx.setTextAlign('center')
  192.             ctx.setFillStyle('#FFFFFF')
  193.             ctx.fillText(`立即跟团`, 131 + (211 - 131) / 2, 130 + 26)
  194.           } else {
  195.             // 已团数量
  196.             ctx.setFontSize(12);
  197.             ctx.setTextAlign('center')
  198.             ctx.setFillStyle('#FFFFFF')
  199.             ctx.fillText(`已团 ${this.getSales(info.sales)} 件`, 131 + (211 - 131) / 2, 130 + 25)
  200.           }
  201.  
  202.           ctx.draw(false, (() => {
  203.             uni.canvasToTempFilePath({
  204.               canvasId: 'shareCanvas',
  205.               success: (res) => {
  206.                 return resolve(res.tempFilePath)
  207.               },
  208.               fail: function (error) {
  209.                 console.log('fail----fail', error);
  210.                 //TODO
  211.                 return reject(error)
  212.               }
  213.             }, this)
  214.           }))
  215.         } catch (error) {
  216.           uni.hideLoading()
  217.           console.log('画图失败error', error);
  218.           return reject(error)
  219.         }
  220.       })
  221.     },
  222.     // 团分享
  223.     setGroupShareCanvas(info) {
  224.       console.log('团分享-info', info);
  225.       return new Promise(async (resolve, reject) => {
  226.         try {
  227.           const ctx = uni.createCanvasContext('shareCanvas', this)
  228.           // 绘制背景图
  229.           ctx.setFillStyle('#FFFFFF')
  230.           ctx.fillRect(0, 0, 211, 170)
  231.  
  232.           if (info.productImageList.length == 1) {
  233.             // 团长头像
  234.             ctx.save();
  235.             this.setRadius(ctx, 5, 0, 0, 30, 30)
  236.             ctx.clip(); // 画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内
  237.             try {
  238.               const { path } = await this.getImge(info.avatar)
  239.               ctx.drawImage(path, 0, 0, 30, 30)
  240.             } catch (error) {
  241.               console.error(error);
  242.             }
  243.             ctx.restore();
  244.  
  245.             // 团长昵称
  246.             ctx.setFontSize(12);
  247.             ctx.setTextAlign('left')
  248.             ctx.setFillStyle('#96999B')
  249.             ctx.fillText((info.nickname.length > 11 ? info.nickname.slice(0, 11) + '...' : info.nickname) + '的团', 35, 18)
  250.  
  251.             // 商品1图
  252.             ctx.save();
  253.             this.setRadius(ctx, 3, 0, 35, 211, 211)
  254.             ctx.clip(); // 画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内
  255.             try {
  256.               const { path } = await this.getImge(info.productImageList[0])
  257.               ctx.drawImage(path, 0, 35, 211, 211)
  258.             } catch (error) {
  259.               console.error(error);
  260.             }
  261.             ctx.restore();
  262.           }
  263.  
  264.           if (info.productImageList.length >= 2) {
  265.             // 团长头像
  266.             ctx.save();
  267.             this.setRadius(ctx, 5, 0, 0, 42, 42)
  268.             ctx.clip(); // 画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内
  269.             try {
  270.               const { path } = await this.getImge(info.avatar)
  271.               ctx.drawImage(path, 0, 0, 42, 42)
  272.             } catch (error) {
  273.               console.error(error);
  274.             }
  275.             ctx.restore();
  276.  
  277.             // 团长昵称
  278.             ctx.setFontSize(12);
  279.             ctx.setTextAlign('left')
  280.             ctx.setFillStyle('#96999B')
  281.             ctx.fillText((info.nickname.length > 10 ? info.nickname.slice(0, 10) + '...' : info.nickname) + '的团', 47, 25)
  282.  
  283.             // 商品1图
  284.             ctx.save();
  285.             this.setRadius(ctx, 3, 0, 51, 69, 69)
  286.             ctx.clip(); // 画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内
  287.             try {
  288.               const { path } = await this.getImge(info.productImageList[0])
  289.               ctx.drawImage(path, 0, 51, 69, 69)
  290.             } catch (error) {
  291.               console.error(error);
  292.             }
  293.             ctx.restore();
  294.  
  295.             // 商品2图
  296.             ctx.save();
  297.             this.setRadius(ctx, 3, 69 + 2, 51, 69, 69)
  298.             ctx.clip(); // 画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内
  299.             try {
  300.               const { path } = await this.getImge(info.productImageList[1])
  301.               ctx.drawImage(path, 69 + 2, 51, 69, 69)
  302.             } catch (error) {
  303.               console.error(error);
  304.             }
  305.             ctx.restore();
  306.  
  307.             if (info.productImageList.length >= 3) {
  308.               // 商品3图
  309.               ctx.save();
  310.               this.setRadius(ctx, 3, 69 * 2 + 4, 51, 69, 69)
  311.               ctx.clip(); // 画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内
  312.               try {
  313.                 const { path } = await this.getImge(info.productImageList[2])
  314.                 ctx.drawImage(path, 69 * 2 + 4, 51, 69, 69)
  315.               } catch (error) {
  316.                 console.error(error);
  317.               }
  318.               ctx.restore();
  319.             }
  320.           }
  321.  
  322.           // 绿色背景
  323.           ctx.setFillStyle('#19C161')
  324.           ctx.fillRect(0, 128, 211, 42) // x, y, width, height
  325.  
  326.           ctx.setFontSize(16);
  327.           ctx.setTextAlign('center')
  328.           ctx.setFillStyle('#FFFFFF')
  329.           ctx.fillText(`立即跟团`, 211 / 2, 128 + 26)
  330.  
  331.           ctx.draw(false, (() => {
  332.             uni.canvasToTempFilePath({
  333.               canvasId: 'shareCanvas',
  334.               success: (res) => {
  335.                 return resolve(res.tempFilePath)
  336.               },
  337.               fail: function (error) {
  338.                 console.log('fail----fail', error);
  339.                 //TODO
  340.                 return reject(error)
  341.               }
  342.             }, this)
  343.           }))
  344.         } catch (error) {
  345.           console.log('画图失败error', error);
  346.           return reject(error)
  347.         }
  348.       })
  349.     },
  350.     /**
  351.      * 设置圆角矩形
  352.      *
  353.      * @param ctx 绘图上下文
  354.      * @param cornerRadius 圆角半径
  355.      * @param width 矩形宽度
  356.      * @param height 矩形高度
  357.      * @param x 矩形左上角的 x 坐标
  358.      * @param y 矩形左上角的 y 坐标
  359.      * @returns 无返回值
  360.      */
  361.     setRadius(ctx, cornerRadius, x, y, width, height) {
  362.       // 开始绘制路径
  363.       ctx.beginPath();
  364.       // 绘制最左侧的圆角
  365.       ctx.arc(x + cornerRadius, y + cornerRadius, cornerRadius, Math.PI, Math.PI * 1.5);
  366.       // 绘制顶部边缘
  367.       ctx.moveTo(x + cornerRadius, y);
  368.       ctx.lineTo(x + width - cornerRadius, y);
  369.       ctx.lineTo(x + width, y + cornerRadius);
  370.       // 绘制最右侧的圆角
  371.       ctx.arc(x + width - cornerRadius, y + cornerRadius, cornerRadius, Math.PI * 1.5, Math.PI * 2);
  372.       // 绘制右侧边缘
  373.       ctx.lineTo(x + width, y + height - cornerRadius);
  374.       ctx.lineTo(x + width - cornerRadius, y + height);
  375.       // 绘制最下侧的圆角
  376.       ctx.arc(x + width - cornerRadius, y + height - cornerRadius, cornerRadius, 0, Math.PI * 0.5);
  377.       // 绘制底部边缘
  378.       ctx.lineTo(x + cornerRadius, y + height);
  379.       ctx.lineTo(x, y + height - cornerRadius);
  380.       // 绘制最左侧的圆角
  381.       ctx.arc(x + cornerRadius, y + height - cornerRadius, cornerRadius, Math.PI * 0.5, Math.PI);
  382.       // 绘制左侧边缘
  383.       ctx.lineTo(x, y + cornerRadius);
  384.       ctx.lineTo(x + cornerRadius, y);
  385.       // 闭合路径
  386.       ctx.closePath();
  387.     },
  388.     // 获取图片地址
  389.     getImge(path) {
  390.       // 利用promise异步转同步，否则可能显示不了～
  391.       return new Promise((resolve, reject) => {
  392.         uni.getImageInfo({
  393.           src: path,
  394.           success: function (res) {
  395.             if (res && res.path) {
  396.               resolve(res)
  397.             } else {
  398.               reject(false)
  399.             }
  400.           },
  401.           fail: function (res) {
  402.             reject(res)
  403.           }
  404.         })
  405.       })
  406.     },
  407.     getSales(sales) {
  408.       return sales >= 10000 ? sales / 10000 + 'w+' : sales
  409.     },
  410.   }
  411. }
  412. </script>
  413.  
  414. <style lang="scss" scoped>
  415. // 隐藏画布
  416. .ShareCanvas {
  417.   position: absolute;
  418.   top: -200px;
  419.   z-index: -1;
  420.   opacity: 0;
  421.   .canvas canvas {
  422.     width: 211px;
  423.     height: 170px; // +16
  424.   }
  425. }
  426. </style>

2. 在分享按钮的页面使用这个画布组件。

onShareAppMessage 方法的内容：

注意：

  1. onShareAppMessage 方法要和 onLoad 等生命周期函数同级
  2. 因为里面画布生成图片是异步的，我在上面用Promise处理了，这里需要async await接收～
  1. async onShareAppMessage(res) {
  2.     const { id, title, avatar, nickname, productDetailList } = this.detailInfo
  3.     if (res.target && res.target.id) { // 分享商品
  4.       console.log('分享商品');
  5.       const item = productDetailList.find(p => p.id == res.target.id) || {}
  6.       try {
  7.         uni.showLoading({ title: '分享信息生成中', mask: true })
  8.         const imageUrl = await this.$refs.ShareCanvas.setGoodsShareCanvas({ ...item, avatar, nickname, pinkId: id }) // 用不同的画布画样式，就调对应的方法名，注意里面需要的参数要传对
  9.         uni.hideLoading()
  10.         return {
  11.           title: item.storeName || '好物多多，快来选购啦～',
  12.           path: '/pages/home/index', // 这里是你的分享里面的跳转地址
  13.           imageUrl: imageUrl || ''
  14.         }
  15.       } catch (error) {
  16.         uni.hideLoading()
  17.       }
  18.     } else {
  19.       // 分享团
  20.       console.log('分享团', productDetailList);
  21.       try {
  22.         uni.showLoading({ title: '分享信息生成中', mask: true })
  23.         const productImageList = productDetailList.map(item => item.image)
  24.         const imageUrl = await this.$refs.ShareCanvas.setGroupShareCanvas({ avatar, nickname, productImageList }) // 用不同的画布画样式，就调对应的方法名，注意里面需要的参数要传对
  25.         uni.hideLoading()
  26.         return {
  27.           title: title || '好物多多，快来选购啦～',
  28.           path: '/pages/home/index', // 这里是你的分享里面的跳转地址
  29.           imageUrl: imageUrl || ''
  30.         }
  31.       } catch (error) {
  32.         uni.hideLoading()
  33.       }
  34.     }
  35.   },

setOrderCanvas()方法的样式 

 

setGoodsShareCanvas()方法的样式

setGroupShareCanvas()方法的样式

画画的时候，要是找不准xy的位置，可以从这三种样式里选一个样式接近的再慢慢修改～

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/秋刀鱼在做梦/article/detail/936439
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号