miniprogram-paint-poster v1.0.14

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

• 安装
• 开始
  • 示例图片
• API
  • 初始化
  • 绘制cavans背景色
  • 绘制图片
    • 绘制简单矩形图片
    • 绘制圆形裁切图片
    • 绘制圆形带边框裁切图片
    • 绘制圆角矩形图片
  • 绘制形状
    • 绘制圆形形状
    • 绘制矩形形状
  • 绘制文字
    • 绘制单行文字
    • 绘制多行自动折行文字
    • 绘制带环形边框文字居中
    • 绘制带环形形状文字居中
  • 预览绘制的海报图
  • 保存海报图到本地
• 开源协议

安装

可以有如下多种方法安装使用 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;

示例图片

API

初始化

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

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

绘制cavans背景色

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

绘制图片

绘制简单矩形图片

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

imginfo参数如下

绘制圆形裁切图片

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

imginfo参数如下

绘制圆形带边框裁切图片

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

imginfo参数如下

绘制圆角矩形图片

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

imginfo参数如下

绘制形状

绘制圆形形状

freePoster.paintCircleShape(shapeInfo<Object>)

shapeInfo参数如下

绘制矩形形状

freePoster.paintRectShape(shapeInfo<Object>)

shapeInfo参数如下

绘制文字

绘制单行文字

freePoster.paintOneLineText(textInfo<Object>)

textInfo的参数如下：

绘制多行自动折行文字

freePoster.paintMultiLine(textInfo<Object>)

textInfo的参数如下：

绘制带环形边框文字居中

freePoster.paintBorderCircularText(textInfo<Object>)

textInfo的参数如下：

绘制带环形形状文字居中

freePoster.paintCircularText(textInfo<Object>)

textInfo的参数如下：

预览绘制的海报图

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

保存海报图到本地

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

开源协议

MIT