json2canvas:使用JSON生成小程序海报

栏目: Html5 · 发布时间: 4年前

内容简介:摘要:简单实用的开源工具。Fundebug经授权转载,版权归原作者所有。在项目里写过几个canvas生成分享海报页面后,觉得这是个重复且冗余的工作.于是就想有没有能通过类似json直接生成海报的库.

摘要:简单实用的开源工具。

Fundebug经授权转载,版权归原作者所有。

需求

在项目里写过几个canvas生成分享海报页面后,觉得这是个重复且冗余的工作.于是就想有没有能通过类似json直接生成海报的库.

然后就在github找到到两个项目:

然后就想着能不能自己再造个轮子.于是就有了这个项目 json2canvas ,你可以简单的理解为是mp_canvas_drawer的增强版吧.

json2canvas canvas绘制海报,写个json就够了.

项目的canvas绘制是基于 cax 实现的.所以天然的带来一个好处,json2canvas同时支持小程序和web

功能

  • 支持缩放. 如果设计稿是750,而画布只有375时.你不需要任何换算,只需要将scale设置为0.5即可.
  • 支持文本(长文本自动换行,感谢 coolzjy@v2ex 提供的正则 https://regexr.com/4f12l ,优化了换行的计算方式(不会粗暴的折断单词))
  • 支持图片(圆角)
  • 支持圆型,矩形,矩形圆角
  • 支持分组(cax里很好用的一个功能)
  • 同时支持小程序和web

示例

web-demo 界面左边的json,可以进行编辑,直接看效果哟~

小程序-demo

git clone https://github.com/willnewii/json2canvas.git
微信开发者 工具 导入项目 example/weapp/

小程序安装

npm i json2canvas
微信开发者工具->工具->构建npm

在需要使用的界面引入Component

{
  "usingComponents": {
    "json2canvas":"/miniprogram_npm/json2canvas/index"
  }
}

效果图

想要生成一个这样的海报,需要怎么做?(红框是图片元素,蓝框是文字元素,其余的是一张背景图。)

json2canvas:使用JSON生成小程序海报

一个json就搞定.具体支持的元素和参数,请查看项目 readme

{
        "width": 750,
        "height": 1334,
        "scale": 0.5,
        "children": [
            {
                "type": "image",
                "url": "http://res.mayday5.me/wxapp/wxavatar/tmp/bg_concerts_1.jpg",
                "width": 750,
                "height": 1334
            }, {
                "type": "image",
                "url": "http://res.mayday5.me/wxapp/wxavatar/tmp/wxapp_code.jpg",
                "width": 100,
                "x": 48,
                "y": 44,
                "isCircular": true,
            }, {
                "type": "circle",
                "r": 50,
                "lineWidth": 5,
                "strokeStyle": "#CCCCCC",
                "x": 48,
                "y": 44,
            }, {
                "type": "text",
                "text": "歌词本",
                "font": "30px Arial",
                "color": "#FFFFFF",
                "x": 168,
                "y": 75,
                "shadow": {
                    "color": "#000",
                    "offsetX": 2,
                    "offsetY": 2,
                    "blur": 2
                }
            }, {
                "type": "image",
                "url": "http://res.mayday5.me/wxapp/wxavatar/tmp/medal_concerts_1.png",
                "width": 300,
                "x": "center",
                "y": 361
            }, {
                "type": "text",
                "text": "一生活一场 五月天",
                "font": "38px Arial",
                "color": "#FFFFFF",
                "x": "center",
                "y": 838,
                "shadow": {
                    "color": "#000",
                    "offsetX": 2,
                    "offsetY": 2,
                    "blur": 2
                }
            }, {
                "type": "text",
                "text": "北京6场,郑州2场,登船,上班,听到你想听的歌了吗?",
                "font": "24px Arial",
                "color": "#FFFFFF",
                "x": "center",
                "y": 888,
                "shadow": {
                    "color": "#000",
                    "offsetX": 2,
                    "offsetY": 2,
                    "blur": 2
                }
            }, {
                "type": "rect",
                "width": 750,
                "height": 193,
                "fillStyle": "#FFFFFF",
                "x": 0,
                "y": "bottom"
            }, {
                "type": "image",
                "url": "http://res.mayday5.me/wxapp/wxavatar/tmp/wxapp_code.jpg",
                "width": 117,
                "height": 117,
                "x": 47,
                "y": 1180
            }, {
                "type": "text",
                "text": "长按识别小程序二维码",
                "font": "26px Arial",
                "color": "#858687",
                "x": 192,
                "y": 1202
            }, {
                "type": "text",
                "text": "加入五月天 永远不会太迟",
                "font": "18px Arial",
                "color": "#A4A5A6",
                "x": 192,
                "y": 1249
            }]
    }

问题反馈

有什么问题可以直接 提issue

关于Fundebug

Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和 Java 线上应用实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了10亿+错误事件,付费客户有阳光保险、核桃编程、荔枝FM、掌门1对1、微脉、青团社等众多品牌企业。欢迎大家免费试用!

json2canvas:使用JSON生成小程序海报

版权声明

转载时请注明作者 Fundebug 以及本文地址:

https://blog.fundebug.com/2019/06/29/json2canvas-wechat-miniprogram/

您的用户遇到BUG了吗?

体验Demo 免费使用

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

众妙之门

众妙之门

Smashing Magazine / 腾讯ISUX社交用户体验设计部 / 人民邮电出版社 / 2013-4 / 59.00元

《众妙之门——网站重新设计之道》是一本精彩、实用的网站UI设计宝典,其中的文章来自于世界知名WEB设计与开发博客Smashing Magazine。全书内容丰富,包括:网站重新设计的商业思考,HTML5与CSS3,重新认识JavaScript,构建更优用户体验的技术,移 动用户体验设计,等等。这些都是目前业内热度最高、从业人员最想了解的话题。无论是设计师还是开发人员,无论水平是高还是低,读者都能从......一起来看看 《众妙之门》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码