MiniProgramPosterCanvas 是一个在小程序中利用 Canvas 生成海报的工具

MiniProgramPosterCanvas 是一个在小程序中利用 Canvas 生成海报的工具

MiniProgramPosterCanvas

MiniProgramPosterCanvas is a tool to generate poster in MiniProgram with Canvas.

中文介绍

Overview

Demo

To run the example project manually, clone the repo, demos are in the 'Examples' folder;After you download the file, use the WeChatMiniProgramDevTool to open the file;pages/index/index.html is main function;You can change expressData in index.js to custom the poster.

Requirements

MiniProgramCanvas

Quick Start

1. Realization principle

Using JSON to make page configurable;Generate image with Canvas.

2. Request data description

expressData: { data: { // 这个是背景图 imgPath: "http://imgs-1253854453.cossh.myqcloud.com/fdbd20b19b6ab2ea2f12b4910ac91d45.png", // 这个是需要生成的二维码的信息 // code:需要转为二维码的数据 // width: 二维码宽度 // height：二维码高度 // x：x轴的坐标 // y：y轴的坐标 qrCodeUrl: { code: "jd.comfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf", width: 110, height: 110, x: 224, y: 370 }, // 页面其他元素 // type: 后端返回数据有两种，image（图片）和text（文本） // imgUrl: 图片元素的链接 // text：文本内容 // width：宽度 // height：高度 // x: x轴的坐标 // y: y轴的坐标 // isCircle: 判断是否是用户头像 // color： 文本的颜色 // font：字体大小与类型 list: [ { type: "image", imgUrl: "https://wx.qlogo-/mmopen/vi_32/DYAIOgq83eoFN9WMUV2y7un0hvsBbIc5W9Q94nuQlIhBso2Kib6vRXibgUia8pE60W1LTGmGOk4bC7BfsWBia3Xufw/132", width: 50, height: 50, x: 40, y: 53, isCircle: true }, { type: "image", imgUrl: "http://imgs-1253854453.cossh.myqcloud.com/0aa8a0e8f25a0f608deefb36c34be39f.jpg", width: 242, height: 242, x: 70, y: 120 }, { type: "text", text: "迪士尼儿童背带", color: "#f00", font: "24px Airal", x: 30, y: 400 }, { type: "text", text: "2081", color: "#000", font: "16px Airal", x: 90, y: 427 } ] } }

Contact

mingying，mingying@xiangwushuo.com; danchaofan，danchaofan@xiangwushuo.com.

License

MiniProgramPosterCanvas is available under the MIT license. See the LICENSE file for more info.

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。