在做小程序时候,我们经常会有一个需求,需要将小程序分享到朋友圈,但是朋友圈是不允许直接分享小程序,那我们还有其他的办法解决吗?答案肯定是有的,即 canvas 生成个性化海报分享图片到朋友圈
那可不可以开发一款生成海报的插件库呢?
以上的要求当然是可以的,曾经的我也想尝试开发一款出来,但是后来尝试了几款现成的工具之后就放弃了,毕竟轮子这个东西,是需要不断维护更新的,另外已经有这么多优秀现成的插件了,我为何还要费力去写呢,贡献代码岂不更美哉,以下是我收集的几款
唠了这么多,好像提供给大家插件就没我什么事情了...想走是不可能的 为了能够制作出更酷炫的海报,我思考了许久 虽然有了插件后,只需要提供配置代码就能够制作出一款海报来,但是我发现还是有些许问题
那我需要怎么做呢,请点击这个链接体验>>painter-custom-poster 点击左侧例子展示中的任意一个例子,然后导入代码就能看到效果图,这下你应该能猜到了我的想法了
目前工具一共分成4部分
用来将一些用户设计的精美海报显示出来,通过点击对应的例子并将代码导入画布中
显示真实的海报效果,画布里添加的元素,都可以直接用鼠标进行拖动,旋转,缩放操作
第一排四个按钮
第二排五个按钮
第三排
各种元素的详细设置参数
激活对象是指鼠标点击画布上的元素,该对象会被蓝色的边框覆盖,此时该对象被激活,可以执行拖动 旋转 缩放等操作 激活区只有对象被激活才会出来,用来设置激活对象的各种配置参数,修改value值后,实时更新当前激活对象的对应状态,点击其他区域,此模块将隐藏
属性 | 说明 | 默认 |
---|---|---|
rotate | 旋转,按照顺时针旋转的度数 | 0 |
width、height | view 的宽度和高度 | |
top、left | 如 css 中为 absolute 布局时的作用 | 0 |
background | 背景颜色 | rgba(0,0,0,0) |
borderRadius | 边框圆角 | 0 |
borderWidth | 边框宽 | 0 |
borderColor | 边框颜色 | #000000 |
shadow | 阴影 | '' |
可以同时修饰 image、rect、text 等 。在修饰 text 时则相当于 text-shadow;修饰 image 和 rect 时相当于 box-shadow
使用方法:
shadow: 'h-shadow v-shadow blur color';
h-shadow: 必需。水平阴影的位置。允许负值。
v-shadow: 必需。垂直阴影的位置。允许负值。
blur: 必需。模糊的距离。
color: 必需。阴影的颜色。
举例: shadow:10 10 5 #888888
你可以在画布的 background 属性中使用以下方式实现 css 3 的渐变色,其中 radial-gradient 渐变的圆心为 中点,半径为最长边,目前不支持自己设置。
linear-gradient(-135deg, blue 0%, rgba(18, 52, 86, 1) 20%, #987 80%)
radial-gradient(rgba(0, 0, 0, 0) 5%, #0ff 15%, #f0f 60%)
!!!注意:颜色后面的百分比一定得写。
属性 | 说明 | 默认 |
---|---|---|
times | 控制生成插件代码的宽度大小,比如画布宽100,times为2,生成的值为200 | 1 |
属性名称 | 说明 | 默认值 |
---|---|---|
text | 字体内容 | 别跟我谈感情,谈感情伤钱 |
maxLines | 最大行数 | 不限,根据 width 来 |
lineHeight | 行高(上下两行文字baseline的距离) | 1.3 |
fontSize | 字体大小 | 30 |
color | 字体颜色 | #000000 |
fontWeight | 字体粗细。仅支持 normal, bold | normal |
textDecoration | 文本修饰,支持none underline、 overline、 linethrough | none |
textStyle | fill: 填充样式,stroke:镂空样式 | fill |
fontFamily | 字体 | sans-serif |
textAlign | 文字的对齐方式,分为 left, center, right | left |
备注:
属性 | 说明 | 默认 |
---|---|---|
url | 图片路径 | |
mode | 图片裁剪、缩放的模式 | aspectFill |
mode参数详解
如果你设计的海报很好看,并且愿意开源贡献,可以贡献你的海报代码和缩略图,例子代码文件在example中,按顺序排列,例如现在库里例子是example2.js,那你添加example3.js和example3.jpg图片,事例可以参考一下文件夹中源码,然后在index.js中导出一下
代码不要格式化,会报错,请原模原样复制到json字段里
saveImgToLocal() {
const that = this;
setTimeout(() => {
wx.canvasToTempFilePath(
{
canvasId: 'k-canvas',
fileType: 'jpg',
quality: 0.2,
success: function(res) {
that.getImageInfo(res.tempFilePath);
},
fail: function(error) {
console.error(`canvasToTempFilePath failed, ${JSON.stringify(error)}`);
that.triggerEvent('imgErr', { error: error });
}
},
this
);
}, 300);
}
保存图片放入对应文件夹,提交代码等待合并
展示的时候使用html、css,这样用户看到的展示、编辑页面适配起来容易。最后生成图片的时候使用canvas,这个canvas是隐藏的,用户不可见,这样还有一个优点,最终生成的海报大小是固定的,跟手机屏幕大小无关。
项目需求写完有一段时间了,但是还是想回过来总结一下,一是对项目的回顾优化等,二是对坑的地方做个记录,避免以后遇到类似的问题。利用微信强大的社交能力通过小程序达到裂变的目的,拉取新用户。
在项目中经常会遇到需要将不同的二维码放到一张通用图片上,提供用户下载,简单来说,就是利用canvas将同等比例的二维码在图片上叠加,生成海报
小程序canvas的API并没有像其他的一样支持小程序独有的 rpx 自适应尺寸单位,在绘制内容时所应用的单位仍然是 px,那么如何实现不同尺寸屏幕的自适应呢?们的在开发中常用的参考屏幕尺寸(iPhone6)为:375*667;
最近开发中要实现一个需求,用户点击分享生成一个图片海报,可以供用户发朋友圈或者其他使用(感觉没人会用~),用到了小程序canvas,和web上的功能基本一样,记录一下。
在做小程序时候,我们经常会有一个需求,需要将小程序分享到朋友圈,但是朋友圈是不允许直接分享小程序,那我们还有其他的办法解决吗?答案肯定是有的,即 canvas 生成个性化海报分享图片到朋友圈
由于我们无法将小程序直接分享到朋友圈,但分享到朋友圈的需求又很多,业界目前的做法是利用小程序的 Canvas 功能生成一张带有二维码的图片,然后引导用户下载图片到本地后再分享到朋友圈
Fabric.js是一个可以简化Canvas程序编写的库。 Fabric.js为Canvas提供所缺少的对象模型, svg parser, 交互和一整套其他不可或缺的工具。Fabric.js可以做很多事情,如下:
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!