微信小程序:一个json帮你分享朋友圈图片(小程序相册分享朋友圈)

写在前面

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

证明

左边是canvasdrawer画的，右边是UI给的图。

特点

简单易用的json画图工具

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

绘制文本(换行符、超出内容的省略号、中间线、下划线、粗体文本)

画画

绘制矩形

保存图片

多重绘图

...

少量代码

经验

git clone https://github.com/kuckboy1994/mp_canvas_drawer想要在移动电话上配置它的appid。

在编译模式下，为您配置了两种常见模式:

一般绘图，绘制单个共享图表。

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

使用

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

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

使用该页面注册组件。

{ 使用组件 :{ canvasdrawer : /components/canvasdrawer/canvasdrawer ；}}将以下代码添加到页面**。wxml文件

ltcanvasdrawer绘画= { {绘画} } bind:getImage = ；eventGetImage / gt；画画是需要传入的json。GetImage方法是绘制完成后的回调函数，在event.detail中返回完成图片的地址

栗子中的当前绘画简单展示。详情请参考API。

应用程序接口

第一层数据需要三个参数:宽度、高度和视图。配置中的所有数字都没有单位。这意味着canvas绘制了一个比例图。根据具体大小，将返回的图像路径直接放在图像标签中。

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

图像(图片)

属性默认值可选值url绘制的图片的地址可以是本地图片，如:/images/1 . JPEG顶部距画板顶部的距离左侧距画板左上角的距离宽度0高度0高度0text(文本)

属性默认值可选值内容图片地址绘制 # 39；'(空字符串)color color black fontsize font size 16t文本对齐方式leftcenter，rightlineHeight line height，20rect(矩形，线条)仅对多行文本有用。

属性默认值可选值背景背景颜色黑色距画板顶部的距离左上距画板左侧的距离16宽度0高度0高度0

问与答。A

最优方法

画图时最好锁定屏幕，比如点击画图时。

wx . show loading({ title: # 39；画画 # 39；，mask: true})绘制完成后

Wx.hideLoading()可以引用项目下的/pages/multiple。

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

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

然后取类型:图像类型来画。

2.绘图过程相关

视图数组中的顺序代表了绘画的顺序，会有叠加现象。请用户注意。

3.如何实现圆头？

没有办法在canvas里画圆形的图，所以用hack实现。用中间镂空的图片盖住头像，达到现在的效果。

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

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

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

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

• 微信小程序翻译功能上线：现已支持18种语言
• 如何使用微信小程序中的车牌号输入法（如何使用微信小程序中的车牌号输入法进行打印）
• 微信小程序无法获取位置信息怎么办？（微信小程序无法获取位置信息）
• 微信小程序如何实现九宫格跳（如何在小程序中配置九宫格抽奖）
• 如何调节微信小程序的亮度？

本文由主机参考刊发，转载请注明：微信小程序:一个json帮你分享朋友圈图片(小程序相册分享朋友圈) https://zhujicankao.com/77667.html