Skip to content
/ miniprogram-paint-poster Public

一个可以在小程序随意生成海报的小程序代码库

0 stars 0 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

shineSnow/miniprogram-paint-poster

BranchesTags

Repository files navigation

Day.js

miniprogram-paint-poster.js 一个Taro小程序绘制海报图 18.4kB 的解决方案，拥有强大绘图的 API


miniprogram-paint-poster.js 是一个解决小程序端绘制海报图的vanvas库,基于promise,支持自定义canvas背景颜色,图片,支持绘制多种格式文字,多种样式图片,多种图形.你可以随意组合这几种元素构根据业务需要构建出复杂的canvas海报图.可以满足90%以上的业务需要了!

安装

可以有如下多种方法安装使用 miniprogram-paint-poster.js:

  • NPM:
npm install miniprogram-paint-poster --save
  • Yarn:
yarn add miniprogram-paint-poster

开始

miniprogram-paint-poster并没有内置canvas,引用的canvas是开发者在页面上canvas,给予开发者更大的灵活性.以Taor(react)为例:

import React, {useEffect, useState} from "react";
import Taro,{useRouter,useShareAppMessage} from "@tarojs/taro";

// 导入依赖
import FreePoster from 'miniprogram-paint-poster'

const sharePage =  () => {

    // canvas样式 
    // 这里的宽高影响的实际的canvas宽高,虽然默认的宽高是750/1334
    const canvasStyle = {
        position: "absolute",
        left: 0,
        bottom: 0,
        width: "750PX",
        height: "750PX",
        transform: "translate3d(-9999rpx, 0, 0)"
    }

    const savePosterToAlbumText = async () =>{
        const {title,gender,category_title,birthday,desc,id_card,logo} = petInfo;
        const birthdayObj = birthday.split("-");
        const labelColor='#7387FF';
        const labelPosX = 60;
        const valueColor='#333333';
        const fontsize=26;
        const textPosY = (y) => y+37-150;

        // 初始化FreePoster构造函数
        const freePoster = new FreePoster({
            debug:true,
            globalEnv:Taro,
        });

        // 自定义canvas背景颜色
        freePoster.setCanvasBackground("#fff");

        // 绘制图片因为要请求图片涉及异步操作,需要使用await
        await freePoster.paintImg({ // canvas背景图
            width:750,
            height:750,
            x:0,
            y:0,
            src:'https://qiniu.ling7.net/image/petWorld/certificate_bg_share%402x.png?imageView2/1/w/750/h/750'
        });
        await freePoster.paintImg({
            width:690,
            height:400,
            x:30,
            y:30,
            src:'https://qiniu.ling7.net/image/petWorld/certificate_bg%402x.png'
        });
        await freePoster.paintImg({ // 宠物相片
            width:190,
            height:232,
            x:500,
            y:208-150,
            src:`https://qiniu.ling7.net/Fvt4eojNgtmY_OeeegJ4I9G26kmt?imageView2/1/w/190/h/232?imageView2/1/w/190/h/232|roundPic/radius/16`
        })
        // 绘制带边框的圆形裁切二维码
        await freePoster.drawPaddingCircleImg({ // 二维码
            width:180,
            height:180,
            padding:6,
            backgroundColor:'#FFF4CC',
            x:528,
            y:517,
            src:`https://qiniu.ling7.net/image/petWorld/page-home.png?roundPic/radius/16`
        })
        // 绘制单行文字
        freePoster.paintOneLineText({  // 姓名label
            txt: '姓名',
            font:'STHeiti',
            fontSize: fontsize,
            color:labelColor,
            x:labelPosX,
            y:textPosY(210) // 加上文字高度 37px
        })
        // 绘制环形图背景文字居中
        freePoster.paintCircularText({
            txt:'奇葩奶牛猫',
            fontSize:fontsize,
            color:labelColor,
            x:100,
            y:textPosY(274), // 加上文字高度 37px
            circularH:100,
            circularW:300,
            circularColor: "#CDFF76",
            circularY: 600
        })
        // 绘制多行可自动折行文本
        freePoster.paintMultiLine({
            txt: '似虎能缘木，如驹不伏辕。但知空鼠穴，无意为鱼餐。薄荷时时醉，氍毹夜夜温。前生旧童子，伴我老山村。',
            font:'STHeiti',
            fontSize: fontsize,
            color:valueColor,
            oneLineTextNum:12,
            lineDistance:40,
            x:140,
            y:textPosY(402)
        })

        // 绘制带环形边框的居中文字
        freePoster.paintBorderCircularText({
            circularX:56,
            circularY:590,
            circularW:310,
            circularH:36,
            borderColor:'#C5CDFF',
            txt:'签发机构：宠世界小程序',
            fontSize:22,
            color:'#7487FE',
            x:0,
            y:0
        })

        // 保存海报图到本地
        await freePoster.savePosterToPhoto()

        // 预览海报图
        await freePoster.previewPoster()
  };

return(
    <View>

        <View onClick={savePosterToAlbumText}>测试保存到相册</View>


        <!-------自定义canvas元素----------->
        <Canvas canvas-id='posterCanvasId' style={canvasStyle} id='posterCanvasId'></Canvas>
        
    </View>
)

}
export default sharePage;

示例图片

canvas-demo

API

初始化

new FreePoster(params)构造函数的默认字段:

字段 默认值 说明
globalEnv window.wx canvasAPI能力提供对象(必须提供!)
quality 1 海报图质量(0->1)
canvasId 'posterCanvasId' canvas默认id
debug false 是否开启调试信息,默认关闭 
// 初始化FreePoster构造函数
const freePoster = new FreePoster({
    debug:true,
    globalEnv:Taro,
});

绘制cavans背景色

// 自定义canvas背景颜色
freePoster.setCanvasBackground("#fff");

绘制图片

绘制简单矩形图片

// 绘制图片因为要请求图片涉及异步操作,需要使用await
await freePoster.paintImg(imgInfo);

imginfo参数如下

字段 说明
x 相对canvas左上角的x坐标
y 相对canvas左上角的y坐标
width 宽度
height 高度
src 图片地址（本地或者网络图片）

绘制圆形裁切图片

// 绘制图片因为要请求图片涉及异步操作,需要使用await
await freePoster.paintCircleImage(imgInfo)

imginfo参数如下

字段 说明
x 图片相对canvas左上角的x坐标
y 图片相对canvas左上角的y坐标
width 图片宽度
height 图片高度
src 图片地址（本地或者网络图片）

绘制圆形带边框裁切图片

// 绘制图片因为要请求图片涉及异步操作,需要使用await
await freePoster.drawPaddingCircleImg(imgInfo)

imginfo参数如下

字段 说明
x 图片相对canvas左上角的x坐标
y 图片相对canvas左上角的y坐标
width 图片宽度
height 图片高度
src 图片地址（本地或者网络图片）
padding 边框大小
backgroundColor 边框颜色

绘制圆角矩形图片

// 绘制图片因为要请求图片涉及异步操作,需要使用await
await freePoster.paintRadiusImage(imgInfo)

imginfo参数如下

字段 说明
x 图片相对canvas左上角的x坐标
y 图片相对canvas左上角的y坐标
width 图片宽度
height 图片高度
src 图片地址（本地或者网络图片）
r 圆角所处圆的半径尺寸

绘制形状

绘制圆形形状

freePoster.paintCircleShape(shapeInfo<Object>)

shapeInfo参数如下

字段 说明
x 圆形的外切矩形的x坐标
y 圆形的外切矩形的y坐标
width 圆形的外切矩形宽度
height 圆形的外切矩形高度
backgroundColor 背景色

绘制矩形形状

freePoster.paintRectShape(shapeInfo<Object>)

shapeInfo参数如下

字段 说明
x 圆形的外切矩形的x坐标
y 圆形的外切矩形的y坐标
width 圆形的外切矩形宽度
height 圆形的外切矩形高度
backgroundColor 背景色

绘制文字

绘制单行文字

freePoster.paintOneLineText(textInfo<Object>)

textInfo的参数如下：

字段 说明
x 文字相对canvas左上角的x坐标
y 文字相对canvas左上角的y坐标
fontSize 文字字体大小
color 文本颜色
MaxTextNum 最多多少文字，超过这个范围截取文字并且用。。。代替
font 设置字体所有的属性，如果有front,则覆盖现有的字体大小，颜色。（font-style, font-variant, font-weight, font-size, line-height 和 font-family ）
txt 文本

绘制多行自动折行文字

freePoster.paintMultiLine(textInfo<Object>)

textInfo的参数如下：

字段 说明
txt 文本
x 文本第一行文字x坐标
y 文本第一行文字y坐标
fontSize 字体大小
color 字体颜色
lineDistance 行间距
oneLineTextNum 一行有几个文字

绘制带环形边框文字居中

freePoster.paintBorderCircularText(textInfo<Object>)

textInfo的参数如下：

字段 说明
txt 文本
fontSize 文字大小
color 文本颜色
borderColor 边框颜色
circularH 环形边框高度
circularW 环形边框宽度
circularX 环形x坐标
circularY 环形y坐标

绘制带环形形状文字居中

freePoster.paintCircularText(textInfo<Object>)

textInfo的参数如下：

字段 说明
txt 文本
fontSize 文字大小
color 文本颜色
circularColor 环形形状颜色
circularH 环形边框高度
circularW 环形边框宽度
circularX 环形x坐标
circularY 环形y坐标

预览绘制的海报图

// 预览海报图
await freePoster.previewPoster()

保存海报图到本地

// 保存海报图到本地
await freePoster.savePosterToPhoto()

开源协议

MIT

About

一个可以在小程序随意生成海报的小程序代码库

Resources

Readme
Activity

Stars

0 stars

Watchers

2 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages