微信小程序:一个json帮助你分享朋友的图片（微信小程序与朋友分享图片）。

写在前面

最近在做小程序，发现制作图片分享到朋友圈是每个项目的必选项。坑很多，写起来很麻烦，也没有找到类似的组件，就自己写了一个。

证明

左侧由canvasdrawer绘制，右侧由UI绘制。

特点

易于使用的json画图

功能齐全——满足90%的使用场景。

绘制文本（换行符、超出省略号、中间线、下划线、粗体文本）

画幅画

画一个长方形

保存图片

多图绘图

...

少量代码

经验

git clone https://github.com/kuckboy1994/mp_canvas_drawer想在他的手机上配置他的appid。

编译模式已为您配置了两种常用模式:

普通绘图，绘制单一共享地图。

多图绘制，连续绘制共享图

使用

将https://github.com/kuckboy1994/mp_canvas_drawer复制到本地。

将组件中的canvasdrawer复制到您自己的项目中。

在使用页面上注册组件

{“using components“:{“canvas drawer“:“/components/canvas drawer/canvas drawer“} }将以下代码添加到页面**。wxml文件。

Painting是需要传入的json。GetImage方法是绘制后的回调函数，在event.detail中返回所绘制图片的地址。

栗子里的画简单展示一下。详细配置请参考API。

应用程序接口

数据对象的第一层需要三个参数:宽度、高度和视图。配置中的所有数字都没有单位。这意味着canvas绘制比例地图。具体的显示尺寸可以直接将返回的图像路径放入图像标签中。

目前，可以绘制三种类型的配置:图像、文本和矩形。配置的属性基本都用css的驼峰名，比较好理解。

图像（图片）

属性含义默认值可选值url图片地址，可以是本地图片，如:/images/1。从JPEG顶部的左上角到画板顶部的距离，从左下角到画板左侧的距离，要绘制的宽度，要绘制的0高度，0文本（文本）。

属性含义默认值可选值内容绘制的图片地址“”（空字符串）颜色blackfontSize文本对齐方式leftcenter，rightlineHeight行高，20rect（矩形，线条）仅在多行文本中有用。

属性含义默认值可选值背景颜色黑色从左上角到画板顶部的距离从左下角到画板左侧的距离16宽度绘制多宽0高度绘制多高0

问与答(Question and Answer)

最优方法

最好在绘图时锁定屏幕，例如在单击“绘图”时。

wx . show loading（{ title:& # 39；绘制共享图片& # 39；，mask: true}）绘制完成后。

Wx.hideLoading（）可以参考项目下的/pages/multiple了解详情。

1.二维码和小程序码怎么画？

二维码和小程序码可以通过调用微信官方接口生成，需要后端配合。

然后取类型:图像类型进行绘制。

2.绘图过程相关

视图数组中的顺序表示绘画的顺序，并且会有重叠。请用户注意。

3.如何实现圆形头像？

在画布中没有绘制圆形图片的方法，因此通过hack实现。当前效果可以通过在头像中间覆盖一个空心图片来实现。

4.为什么4.canvas drawer组件不直接显示画布画板及其内容？

考虑到大多数场景，我们使用它们在本地保存图片或显示图片。将它保存在本地并将临时文件返回给调用者一定是最好的解决方案。显示并转换为图片后，您可以使用image基本组件的所有显示模式，还可以设置宽度和高度。

推荐教程:微信小程序

以上是微信小程序:一个json帮你完成分享朋友圈图片的细节。更多内容请关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 微信小程序中echarts的用法以及你可能遇到的坑，快来收藏避雷吧！！（微信小程序echarts降低等级）
• 教你如何自定义微信小程序的底部导航栏(如何给微信小程序添加底部导航)
• 微信小程序中如何实现子对父的参数传递（页面沟通）（小程序父对子的价值传递）
• 详细讲解如何在微信小程序中安装和引用ECharts。(如何安装小程序示例)
• 手把手指导你在小程序中实现保存图片的功能（小程序申请保存图片到相册）

本文由主机参考刊发，转载请注明：微信小程序:一个json帮助你分享朋友的图片（微信小程序与朋友分享图片）。 https://zhujicankao.com/102901.html