微信小程序朋友圈分享图片生成方案实现
在小程序界里,生成图片分享到朋友圈这个功能,是如此得光芒耀眼,以至于各个小程序都趋之若鹜地前来跪倒在她的石榴裙下。不幸的是,微信爸爸并没有提供给我们很好很便捷的相关工具;恰恰相反,屏幕截屏的功能被残忍丢进历史的垃圾桶,只留下一个Canvas组件以及围绕在其周围的深渊巨坑们。 所以我们准备了一套名为Painter的工具, 为开发者提供一种简单实用的“绘制”图片的解决思路,让开发者可以自由地生成自己想要的图片文件。 github传送门:?github.com/Kujiale-Mob… 如果直接使用canvas进行绘图,那绝对是很酸爽的一次体验,除了失控的代码,还有无数的天坑。先来列举一下canvas 中踩过的坑以及我们的解决(或绕过)的方法。 canvas的坑painter从实现上来讲,是用了小程序的canvas作为载体来实现以上功能的。而canvas有很多著名的坑。有的坑,我们小心翼翼地绕了过去;有的坑,我们还是痛快淋漓地一脚踩了下去……
Painter的功能如图所示 通过右边的类似于css又有点像json但其实上它是个js的寥寥几行代码,我们绘制出了左边的这样的图形,包含了背景图片、文字、图片、二维码这四种常用的元素。 Painter阅读完代码,绘制成图片以后,会将图片的链接返回给我们。此时,我们可以将图片上传、保存到本地或者显示在屏幕上。 它可以很方便地定制所需要的图片,还可以自由动态地给图片更换风格。 此外,小程序canvas.drawImage()方法在真机上不能绘制网络图片。而Painter 可以解决这个问题,如果有绘制网络图片的需求也可以考虑使用Painter。 Painter其它优势
使用demo下载demo项目使用submodule的方式进行管理,因此在clone时需要运行 git clone https://github.com/Kujiale-Mobile/Painter.git --recursive
clone完成后可以看到目录。其中,/pages/example中存放的是使用示例,/components/painter就是我们所引入的功能组件。此外还有一个palette目录,里面存放是我们所需要绘图代码。实际工作时,painter会调取card.js里的信息,在图片上绘制出相应的图形,就像一支画笔在调色板上调制蘸取了颜料,然后在画布上创作一样。 将Painter引入到自己的项目你可以直接将demo里的painter复制粘贴到自己的项目下,当然也可以更为优雅地运行一下这个代码: git submodule add https://github.com/Kujiale-Mobile/PainterCore.git painter
它会将Painter工具放置在你当前的目录下。我们推荐的做法是把它放在你的components下。 引入组件像其它的组件一样,在需要引入Painter的页面.json文件中添加: "usingComponents":{
"painter":"/components/painter/painter"
}
组件调用在页面的xml文件中调用painter组件,并传入pallete规则的数据,以及绘制结束以后的回调。 <painter palette="{{data}}" bind:imgOK="onImgOK" bind:imgErr="onImgErr"/>
palette即是我们的调色板数据,以json形式根据一定规范创建,详细信息请移步下文。 绘制回调"onImgOK"
"onImgErr"
数据传入后,painter就会开始绘制,无论绘制成功或是失败,都能在相应的回调方法里获取相关的信息,如: Pallette说到底,Painter是一支画笔工具,具体要让这支画笔画什么东西,还得由我们,天资聪颖的程序猿们,来告诉它。告诉它应该画什么,在哪里画,画的时候用什么姿势……等等。这需要用一些别的手段,因为科学的实验证明过,试图用普通话这门语言跟它进行沟通,是不会有任何效果的。 调色板属性每一块调色板都它自己的整体属性,它一般规定了整个绘图范围的大小、样式、背景等 它处于整个json文件的最外层,需要指定以下几个属性: 示例代码: {
background: 'https://qhyxpicoss.kujiale.com/2018/06/12/LMPUSDAKAEBKKOASAAAAAAY8_981x600.png',width: '654rpx',51); font-weight: 700;">height: '400rpx',51); font-weight: 700;">borderRadius: '20rpx',51); font-weight: 700;">views: []
}
view属性画完了调色板的整体属性以后,就可以向views中增加一些元素了。元素支持四种类型,用type字段进行区分分类。不同种类的view又要求提供有不同的数据,如image元素需要提供它的url,text元素需要提供text文字内容: 除了各view的私有属性之外,view还有一些公共属性可以设置: rotate控制元素的旋转,如下图,将一行文字顺时针旋转了6度。 {
type: 'text',51); font-weight: 700;">text: '酷家乐 移动前端',51); font-weight: 700;">css: {
left: top: '50rpx',51); font-weight: 700;">fontSize: '40rpx'
},},
效果: 代码(圆形): {
'image',51); font-weight: 700;">url: this.cardInfo.avatar,51); font-weight: 700;">css: {
'48rpx',0);">'448rpx',0);">'192rpx',51); font-weight: 700;">borderRadius:'96rpx',254);'>方角-->8rpx圆角-->圆形
|