用小程序生成海报图片时,通常会用canvas生成图片,但是canvas需要调整坐标,计算,并不算非常友好,于是我在项目中使用了Painter,下面就介绍它的使用。

1. 先行准备

① 下载

在Github上下载代码,代码包里打开component目录,复制下面的整个painter文件夹,到小程序项目的component目录下。
由于painter本身比较大,如果放在主包里可能在编译预览及上传时会提示 超出文件大小限制 的错误,所以建议将painter放在子包里面。(使用分包)

② 引用组件

在需要绘制海报的页面.json中添加:

{  "usingComponents": {   "painter":"../components/painter/painter}
}

③ 使用组件

  1. .wxml添加:
<painter palette="{{template}}" bind:imgOK="onImgOK" bind:imgErr="onImgErr"
/>
<!-- style="position:fixed;top:-9999rpx" !-->
  1. 获得界面样式的json数据
    可以打开 Painter海报生成Json工具 网站,例如先导入左边的模板,然后点击导出Json,再点击复制代码,即可得到生成的Json样式数据。
  2. 新建一个放海报样式的文件夹
    如下是我的练手项目的目录结构,Painter和海报数据都放在分包里。
    新建一个js文件,例如card.js,将第二个步骤的json数据粘贴进去。

    如果数据是动态的,或者图片是本地图片,那么就需要再修改json数据中的值。
    在最前面的palette()方法中添加参数 params,它是object
export default class LastMayday {      palette(params) {

在需要动态赋值的地方修改为:${params.company}

"text": "公司名:"+`${params.company}`,

本地图片路径:一定不能用../形式,不然会出现file not found错误

 "type": "image",      "url": "/wxsocial/palette/images/tp1.jpg",

cloud://开头的云存储FileID也可以存入,跟上面一样。但是要显示cloud://图片还需要修改Painter的源码,这个在后面介绍。

小程序码:存入图片地址,type用image:

 "type": "image",      "url": `${qrcodePath}`,

qrcodePath是小程序码接口返回的路径,我这里是 http://usr/qrcode.png

准备工作做完了,接下来进入页面的js。

4 .js:

1> 引入 card.js

import Card from '../../palette/card';

2> 实例化并赋值

this.setData({       template: new Card().palette(params)
});

其中params就是要传入card.js的数据:

let params = {      "company": this.data.company,      "contact": this.data.contact,      "image1": this.data.image1,      "image2": this.data.image2
}

template赋值之后,海报会自动开始绘制,绘制完毕后会在 imgOK() 得到回调结果,如果绘制失败则是在 imgErr() 方法中。 绘制完成后海报则会显示。
如果不希望一直绘制,下载图片,在 imgOK() 里可以保存图片的路径,下一次直接显示图片。

5. 对于cloud://图片的显示

如果用到云开发,有时候我们会将图片保存在云存储里,而微信返回的是一个FileID,而不是一个具体的下载地址,那么这种情况下要怎么将cloud://地址传入Painter呢?
Painter默认是下载http图片的,但是在查看Painter.js源码时发现,它的下载工具是wx.downloadFile,而在判断是下载图片还是打开本地图片时,有一个正则表达判断是否为http(s)开头,因此只要拦截这个判断,并添加 cloud:// 开头的判断,如果是云ID图片,则下载云储存图片,否则走正常的下载http图片。

小程序组件Painter的使用心得相关推荐

  1. uniapp开发微信小程序使用painter绘制海报

    uniapp开发微信小程序使用painter绘制海报 参考文章: 1.简书大佬文章https://www.jianshu.com/p/e9cab600cf6c 2.CSDN大佬文章https://bl ...

  2. 微信小程序-运用painter插件生成海报分享朋友圈--比canvas好用

    微信小程序-运用painter插件生成海报–比canvas好用 先放插件地址:https://github.com/Kujiale-Mobile/Painter 还有个可视化把海报生成代码的地址:ht ...

  3. android img标签属性_微信小程序 组件叠加效果(如 Android 中的添加蒙层)

    实现的效果如下: 可以看出这是由image组件和text组件叠加到一块组成的蒙层效果. 在小程序中实现这个效果主要用到z-index属性和position属性 z-index的使用必须是双方组件都设置 ...

  4. 微信小程序组件间通信(二)

    2019独角兽企业重金招聘Python工程师标准>>> 一.微信小程序中通过事件,实现子组件向父组件中传递数据或操作 注:子组件向父组件中传递通过事件传递操作 通过事件参数对象det ...

  5. web 小程序 ch4 小程序组件

    文章目录 考试: 小程序组件 组件介绍 语法格式 id等属性 组件分类 视图容器 分类 view基础视图 滚动视图 scroll-view 滑块swiper-view 需配合swiper-item,且 ...

  6. f2 柱状图滚动 钉钉小程序_详解钉钉小程序组件之自定义模态框(弹窗封装实现)...

    背景 开发钉钉小程序中需要用到模态框 文档里也没有 自己搞一个- 效果大概长这个样 点击指定按钮,弹出模态框,里面的内容可以自定义,可以是简单的文字提示,也可以输入框等复杂布局.操作完点击取消或确定关 ...

  7. wepyjs小程序组件调用pages页面的方法

    大家下午好,转眼一个星期又要过去了,每天都在对手头的项目进行修修改改时间也是过的很快,那么就有了接下要说的'小程序组件去调用pages页面的方法'是怎么调用的问题,之前一直都没在意这个方法,也可能是痴 ...

  8. 小程序组件库开发之车牌号专属键盘

    小程序开发过程中可能会碰到和车牌信息相关的开发,这时候就需要输入车牌号,传统的键盘输入车牌号,需要打出汉字,再选择相应的字母数字,并不是特别方便,这里笔者专门开发了车牌号键盘,可以任意选择修改省份,数 ...

  9. 小程序组件库开发之抽奖游戏组件

    笔者在之前写了一篇关于小程序抽奖游戏组件的文章,当时的设计比较粗糙,组件的可复用性也不是很好,这里笔者新开发了一个抽奖小游戏组件,表现形式上和可复用性上都相对之前有了不小的提升. 读者朋友可以先看一下 ...

最新文章

  1. C语言4行7列星星,如何使用C++循环语句实现星号塔5行每行分别是1,3,5,7,9个星星?...
  2. 数字电路中的竞争与冒险
  3. 如何用python计算工资-手把手用Python教你分析运筹学薪资状况
  4. [LintCode] Single Number 单独的数字
  5. spring admin mysql_easyadmin: 简易的java后台管理框架,基于SpringBoot+FreeMark+ace admin+mysql...
  6. mysql 8.0认证失败_Node.js无法对MySQL 8.0进行身份验证
  7. Linux系统下软件包管理六
  8. 基于Docker快速搭建ELK
  9. idea修改jdk的版本号
  10. pandas 字段操作
  11. python, numpy
  12. 使用SimpleDateFormat出现时差
  13. C#设计模式--工厂方法模式
  14. Mysql备份策略-完成备份+增量备份shell
  15. UE4.26官方文档网页浏览录屏打包下载版
  16. 创基为您介绍目前市面上的主流蓝牙方案
  17. 项目,项目集与项目组合的关系
  18. 该文件没有程序与之关联来执行该操作问题的解决
  19. Python OpenCV _1基本操作(画图,循环播放图像,鼠标事件,读取中文路径中的图片)
  20. DeviceIOControl具体解释-各个击破

热门文章

  1. 传统客服压力山大,如何应用智能客服打造直击痛点的解决方案?
  2. C语言while和do-while练习题
  3. py sel采集部署linux报错
  4. admi后台 vue_vue-admin
  5. 事物认识分析基本方法(转)
  6. 2022/1/17 位运算
  7. 域名中不应出现下划线
  8. mysql列按照中文拼音排序
  9. uni-app配置搜索框
  10. 炫“库“行动—人大金仓有奖征文——金仓数据库安装教程