公告列表
公告列表
收藏
评论

Painter 一款轻量级的小程序海报生成组件

生成海报相信大家有的人都做过，但是canvas绘图的坑太多。大家可以试试这个组件。然后附上楼下大哥做的可视化拖拽生成painter代码的工具：链接地址https://developers.weixin.qq.com/community/develop/article/doc/000e222d9bcc305c5739c718d56813

Painter

由于我们无法将小程序直接分享到朋友圈，但分享到朋友圈的需求又很多，业界目前的做法是利用小程序的 Canvas 功能生成一张带有二维码的图片，然后引导用户下载图片到本地后再分享到朋友圈。而小程序 Canvas 功能是很难用的，往往为了绘制一张简单图片，就得写上一堆 boilerplate code ，而且一不小心还会踩到 Canvas 的各种彩蛋（坑）。我想此时你的心情肯定是这样的。

这边说上几个小程序 Canvas 的坑

  1. Canvas 绘图是用的 px，而在小程序中我们一般使用 rpx 进行相对布局。
  2. 小程序 Canvas 中的 drawImage 方法，在 IDE 中可以直接设置网络图片进行绘制，但在真机上设置网络图片无用。
  3. canvasContext.clip 方法在 iOS 设备上的微信 6.6.6 版本及以下有 bug，会导致该 clip 下面使用的的 restore 方法失效。

画家计划

想到小程序中有如此大量的生成图片需求，而 Canvas 生成方法又是如此难用和坑爹。那我们就想到可不可以做一款可以很方便生成图片，并且还能屏蔽掉直接使用 Canvas 的一些坑的库呢？所以我们发起了 “画家计划— 通过 json 数据形式，来进行动态渲染并绘制出图片”。 Painter 库的整体架构如下：

整体架构

首先，我们定义了一套绘图 JSON 规范，开发者可以根据需求构建生成图片的 Palette（调色板），然后在程序运行过程中把调色板传入给 Painter（画家）。Painter 会调用 Pen（画笔），根据 Palette 内容绘制出对应的图片后返回。

How To Use

运行例子

git clone https://github.com/Kujiale-Mobile/Painter.git

代码下载后，用小程序 IDE 打开后即可使用。

注：请选择小程序项目，非小游戏，例子中无 appid，所以无法在手机上运行，如果需要真机调试，请在打开例子时，填上自己的小程序 id

使用 Painter

  1. 引入代码

    Painter 的核心代码在另一个 repo 中，https://github.com/Kujiale-Mobile/PainterCore.git 。你可以通过以下三种方式进行库的引入：

    一，直接下载代码，拷贝代码到你需要的库中。（不推荐）

    二，submodule 的方式。可以在主项目下执行以下命令。如后续需更新代码，则到对应目录下 pull 最新的代码即可。（推荐）

    git submodule add https://github.com/Kujiale-Mobile/PainterCore.git components/painter

    三，subtree 的方式。也一样是在主项目中执行命令。代码更新要复杂点，submodule 和 subtree 的区别请自行 Google。

    git subtree add --prefix=components/painter https://github.com/Kujiale-Mobile/PainterCore.git master

  2. 作为自定义组件引入，注意目录为第一步引入的代码所在目录

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

  3. 组件接收 palette 字段作为画图数据的数据源, 图案数据以json形式存在，推荐使用“皮肤模板”的方法进行传递，示例代码如下：

    <painter palette="{{data}}" bind:imgOK="onImgOK" />

  4. 数据传入后，则会自动进行绘图。绘图完成后，你可以通过绑定 imgOK 或 onImgErr 事件来获得成功后的图片 或失败的原因。

    bind:imgOK="onImgOK"
bind:imgErr="onImgErr"

Palette 规范

如你使用 wxss + wxml 规范进行绘制一样，Painter 需要根据一定的规范来进行图片绘制。当然 Painter 的绘制规范要比 wxml 简单很多。

调色板属性

一个调色板首先需要给予一些整体属性

background: 可以是颜色值，也可以为网络图片的链接，默认为白色
width: 宽度
height: 高度
borderRadius: 边框的圆角（该属性也同样适用于子 view）
views: 里面承载子 view

子 View 属性

当我们把整体的调色板属性构建起来后，里面就可以添加子 View 来进行绘制了。

type content description 自有css
image url 表示图片资源的地址，本地或网络
text text 文本的内容 fontSize: 文字大小，color: 字体颜色（默认为黑色）
rect 无 矩形 color: 颜色
qrcode content 画二维码 background: 背景颜色（默认为透明色），

布局属性

以上 View ，除去自己拥有的特别属性外，还有以下的通用布局属性

属性 意义
rotate 旋转，按照顺时针旋转的度数，默认不旋转
borderRadius 边界圆角程度，如果是正方形布局，该属性为一半宽或高时，则为圆形
top、right、bottom、left 如 css 中为 absolute 布局时的作用，默认 top 和 left 为 0
align center：中间对齐方式；right：右对齐方式；left：左对齐方式（默认，可不写）

尺寸即其他

1，目前 Painter 中支持两种尺寸单位，px 和 rpx，代表的意思和小程序中一致，此处就不多说。

2，目前子 view 的 css 属性支持 object 或 array。所以意味着，你可以把几个子 view 共用的 css 属性提取出来。做到让 Palette 更加简洁。

3，因为我们的 palette 是以 js 承载的 json，所以意味着你可以在每一个属性中很方便的加上自己的逻辑。也可以把某些属性单独提取出来，让多个 palette 共用，做到模块化。

举个栗子

{
  background: '#eee',
  width: '654rpx',
  height: '400rpx',
  borderRadius: '20rpx',
  views: [
  {
    type: 'image',
    url: 'https://qhyxpicoss.kujiale.com/r/2017/12/04/L3D123I45VHNYULVSAEYCV3P3X6888_3200x2400.jpg@!70q',
    css: {
      top: '48rpx',
      right: '48rpx',
      width: '192rpx',
      height: '192rpx',
    },
  }
  ...
  ],
}

绘制效果如下

License

Copyright (c) 2018 Kujiale

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
https://github.com/Kujiale-Mobile/Painter
最后一次编辑于  2019-09-27
收藏

112 个评论

  • 开水泡蒸馍
    开水泡蒸馍
    2019-07-12

    可以绘制表格吗？

    2019-07-12
    赞同
    回复 1
    • TNT
      TNT
      2019-10-04
      不支持
      2019-10-04
      赞
      回复
  • 执念
    执念
    2019-07-12

    请问大佬我不知道要生成的图片高度是多少应该，也就是说图片高度根据内容多少变化的要怎么弄呢


    2019-07-12
    赞同
    回复
  • 2019-07-04

    真机调试的时候错误

    ReferenceError: define is not defined

        at downloader.js:1

        at ContextifyScript.Script.runInContext (vm.js:59)

        at Object.runInContext (vm.js:120)

        at loadCode ([publib]:828)

        at handleInitUserCode ([publib]:812)

        at handleSetupContext ([publib]:1225)

        at handleProcessMessage ([publib]:1234)

        at WebSocket.ws.on ([publib]:1462)

        at emitOne (events.js:115)

        at WebSocket.emit (events.js:210)

    loadCode @ [publib]:834

    handleInitUserCode @ [publib]:812

    handleSetupContext @ [publib]:1225

    handleProcessMessage @ [publib]:1234

    ws.on @ [publib]:1462

    emitOne @ events.js:115

    emit @ events.js:210

    _receiver.onmessage @ C:\Users\文韬\AppData\Roaming\Tencent\微信web开发者工具\package.nw\node_modules\ws\lib\WebSocket.js:146

    dataMessage @ C:\Users\文韬\AppData\Roaming\Tencent\微信web开发者工具\package.nw\node_modules\ws\lib\Receiver.js:389

    getData @ C:\Users\文韬\AppData\Roaming\Tencent\微信web开发者工具\package.nw\node_modules\ws\lib\Receiver.js:330

    startLoop @ C:\Users\文韬\AppData\Roaming\Tencent\微信web开发者工具\package.nw\node_modules\ws\lib\Receiver.js:165

    add @ C:\Users\文韬\AppData\Roaming\Tencent\微信web开发者工具\package.nw\node_modules\ws\lib\Receiver.js:139

    _ultron.on @ C:\Users\文韬\AppData\Roaming\Tencent\微信web开发者工具\package.nw\node_modules\ws\lib\WebSocket.js:142

    emitOne @ events.js:115

    emit @ events.js:210

    addChunk @ _stream_readable.js:263

    readableAddChunk @ _stream_readable.js:250

    Readable.push @ _stream_readable.js:208

    onread @ net.js:595

    [publib]:834 ReferenceError: define is not defined

        at pen.js:1

        at ContextifyScript.Script.runInContext (vm.js:59)

        at Object.runInContext (vm.js:120)

        at loadCode ([publib]:828)

        at handleInitUserCode ([publib]:812)

        at handleSetupContext ([publib]:1225)

        at handleProcessMessage ([publib]:1234)

        at WebSocket.ws.on ([publib]:1462)

        at emitOne (events.js:115)

        at WebSocket.emit (events.js:210)

    loadCode @ [publib]:834

    handleInitUserCode @ [publib]:812

    handleSetupContext @ [publib]:1225

    handleProcessMessage @ [publib]:1234

    ws.on @ [publib]:1462

    emitOne @ events.js:115

    emit @ events.js:210

    _receiver.onmessage @ C:\Users\文韬\AppData\Roaming\Tencent\微信web开发者工具\package.nw\node_modules\ws\lib\WebSocket.js:146

    dataMessage @ C:\Users\文韬\AppData\Roaming\Tencent\微信web开发者工具\package.nw\node_modules\ws\lib\Receiver.js:389

    getData @ C:\Users\文韬\AppData\Roaming\Tencent\微信web开发者工具\package.nw\node_modules\ws\lib\Receiver.js:330

    startLoop @ C:\Users\文韬\AppData\Roaming\Tencent\微信web开发者工具\package.nw\node_modules\ws\lib\Receiver.js:165

    add @ C:\Users\文韬\AppData\Roaming\Tencent\微信web开发者工具\package.nw\node_modules\ws\lib\Receiver.js:139

    _ultron.on @ C:\Users\文韬\AppData\Roaming\Tencent\微信web开发者工具\package.nw\node_modules\ws\lib\WebSocket.js:142

    emitOne @ events.js:115

    emit @ events.js:210

    addChunk @ _stream_readable.js:263

    readableAddChunk @ _stream_readable.js:250

    Readable.push @ _stream_readable.js:208

    onread @ net.js:595

    [publib]:834 ReferenceError: define is not defined

        at qrcode.js:1

        at ContextifyScript.Script.runInContext (vm.js:59)

        at Object.runInContext (vm.js:120)

        at loadCode ([publib]:828)

        at handleInitUserCode ([publib]:812)

        at handleSetupContext ([publib]:1225)

        at handleProcessMessage ([publib]:1234)

        at WebSocket.ws.on ([publib]:1462)

        at emitOne (events.js:115)

        at WebSocket.emit (events.js:210)

    loadCode @ [publib]:834

    handleInitUserCode @ [publib]:812

    handleSetupContext @ [publib]:1225

    handleProcessMessage @ [publib]:1234

    ws.on @ [publib]:1462

    emitOne @ events.js:115

    emit @ events.js:210

    _receiver.onmessage @ C:\Users\文韬\AppData\Roaming\Tencent\微信web开发者工具\package.nw\node_modules\ws\lib\WebSocket.js:146

    dataMessage @ C:\Users\文韬\AppData\Roaming\Tencent\微信web开发者工具\package.nw\node_modules\ws\lib\Receiver.js:389

    getData @ C:\Users\文韬\AppData\Roaming\Tencent\微信web开发者工具\package.nw\node_modules\ws\lib\Receiver.js:330

    startLoop @ C:\Users\文韬\AppData\Roaming\Tencent\微信web开发者工具\package.nw\node_modules\ws\lib\Receiver.js:165

    add @ C:\Users\文韬\AppData\Roaming\Tencent\微信web开发者工具\package.nw\node_modules\ws\lib\Receiver.js:139

    _ultron.on @ C:\Users\文韬\AppData\Roaming\Tencent\微信web开发者工具\package.nw\node_modules\ws\lib\WebSocket.js:142

    emitOne @ events.js:115

    emit @ events.js:210

    addChunk @ _stream_readable.js:263

    readableAddChunk @ _stream_readable.js:250

    Readable.push @ _stream_readable.js:208

    onread @ net.js:595

    [publib]:834 ReferenceError: define is not defined

        at util.js:1

        at ContextifyScript.Script.runInContext (vm.js:59)

        at Object.runInContext (vm.js:120)

        at loadCode ([publib]:828)

        at handleInitUserCode ([publib]:812)

        at handleSetupContext ([publib]:1225)

        at handleProcessMessage ([publib]:1234)

        at WebSocket.ws.on ([publib]:1462)

        at emitOne (events.js:115)

        at WebSocket.emit (events.js:210)


    2019-07-04
    赞同
    回复 9
    • TNT
      TNT
      2019-07-04

      使用我的代码片段报错的吗？

      2019-07-04
      赞 2
      回复
    • 2019-07-04回复TNT

      對的


      2019-07-04
      赞
      回复
    • TNT
      TNT
      2019-07-04回复

      手机微信 哪个版本的吖 我运行跑了下 没报错，开发者工具与真机都正常。

      2019-07-04
      赞 2
      回复
    • TNT
      TNT
      2019-07-04回复

      真机调试报错 是微信开发者工具的问题。 换回老版本的 就正常了

      2019-07-04
      赞 2
      回复
    • 2019-07-04回复TNT

      我查明白了IDE損壞

      2019-07-04
      赞
      回复
    查看更多(4)
  • I do
    I do
    2019-06-28

    怎么让整个海报铺满整个屏幕


    2019-06-28
    赞同
    回复 3
    • TNT
      TNT
      2019-06-28

      具体是指？手机预览的时候吗？

      2019-06-28
      赞
      回复
    • I do
      I do
      2019-06-28回复TNT

      可以了

      2019-06-28
      赞
      回复
    • TNT
      TNT
      2019-06-28回复I do

      👌

      2019-06-28
      赞
      回复
  • 秋鸣
    秋鸣
    2019-06-21

    正打算做一个分享的功能，很有用，谢啦

    2019-06-21
    赞同
    回复 1
    • TNT
      TNT
      2019-06-25

      客气哈。

      2019-06-25
      赞 1
      回复
  • Destiny
    Destiny
    2019-06-18

    请问 在 uni-app 中如何使用

    2019-06-18
    赞同
    回复 4
    • TNT
      TNT
      2019-06-18

      uni-app么操作过。需要自行试下

      2019-06-18
      赞
      回复
    • Destiny
      Destiny
      2019-06-19回复TNT

      还望大佬指点迷津

      2019-06-19
      赞
      回复
    • TNT
      TNT
      2019-06-19回复Destiny

      额。我没用过。不过用法应该都差不多吧。你理清楚 我发你的代码片段的逻辑 就可以了。

      2019-06-19
      赞
      回复
    • 亢焜 lanjimu.com
      亢焜 lanjimu.com
      2019-11-02
      uni-app 好像还不行，正在调试
      2019-11-02
      赞
      回复
  • ＂
    ＂
    2019-06-05

    自己弄的海报在安卓机中只要生成的长度超过3 4千px就闪退，用这个插件能支持多大的尺寸呢?

    2019-06-05
    赞同
    回复 7
    • TNT
      TNT
      2019-06-05

      看你手机运存了。具体多少 我没操作过。你可以试试

      2019-06-05
      赞
      回复
    • ＂
      ＂
      2019-06-05回复TNT

      好的，我刚下载demo，有BUG：在真机上，生成的图片尺寸跟设置的尺寸不一致（安卓手机，苹果未测试，而开发工具上是正常的）

      2019-06-05
      赞
      回复
    • ＂
      ＂
      2019-06-13回复TNT

      谢谢  不是这个问题 是图片输出的尺寸的问题 已经解决了

      2019-06-13
      赞
      回复
    • TNT
      TNT
      2019-06-13回复＂

      好的

      2019-06-13
      赞
      回复
    • 执念
      执念
      2019-07-12
      请问大佬我不知道要生成的图片高度是多少应该，也就是说图片高度根据内容多少变化的要怎么弄呢
      2019-07-12
      赞
      回复
    查看更多(2)
  • 阿巴阿巴
    阿巴阿巴
    2019-05-28

    真棒

    2019-05-28
    赞同
    回复 3
  • 五行不缺木和土
    五行不缺木和土
    2019-03-05

    我在使用这个的时候一次生成5张图片，但是有时候生成出来的图片不完整，其中有几张会出现少了一些底部配图，或者插图的情况

    2019-03-05
    赞同
    回复 2
  • 君君
    君君
    2019-01-19

    还是有http域名的问题，我们的图片都是http的域名的，会报错

    2019-01-19
    赞同
    回复

正在加载...

请 登录 后发表内容