函数说明

* 表示参数必填

makePoster 绘制海报

[系统支持：微信小程序、WEB]

function makePoster(obj)

@param { object } obj 绘制海报的内容

@return { PosterImage } base64海报相关信息

obj 参数说明

@param { Number } width canvas 宽度 *
@param { Number } height canvas 高度 *
@param { String } imageType 海报图类型（默认：jpeg）

支持： jpeg 、 jpg 、 png

@param { Number } quality 海报图片质量，范围0-1，质量越低图片越模糊（默认：0.9）
@param { Number } ratio 海报图片像素比，绘制的海报图片是canvas宽高的ratio倍（默认：1）
@param { Object/Array } content 海报绘制的内容，content 为一个Object/Array *

content 参数说明及示例

示例：

  makePoster({
            width: 100,
            height: 100,
            content: [
                {
                    type: "rect",
                    width: 100,
                    height: 100,
                    top: 0,
                    left: 0,
                    background: "#ff0000",
                },
                {
                    type: "rect",
                    width: 90,
                    height: 90,
                    top: 5,
                    left: 5,
                    background: "#ccc",
                },
                {
                    type: "image",
                    width: 10,
                    height: 10,
                    left: 10,
                    top: 10,
                    src: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffile02.16sucai.com%2Fd%2Ffile%2F2014%2F0829%2F372edfeb74c3119b666237bd4af92be5.jpg&refer=http%3A%2F%2Ffile02.16sucai.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664437574&t=ba1fc1cf987a93f8a80bfd6d99be8673",
                },
                {
                    type: "font",
                    width: 90,
                    height: 20,
                    left: 5,
                    top: 30,
                    text: "测试"
                }, {
                    type: "line",
                    location: [{
                        left: 10,
                        top: 50,
                    },
                    {
                        left: 20,
                        top: 50,
                    }, {
                        left: 20,
                        top: 60,
                    },
                    {
                        left: 30,
                        top: 60,
                    },
                    {
                        left: 30,
                        top: 50,
                    },
                    {
                        left: 40,
                        top: 50,
                    },
                    {
                        left: 40,
                        top: 70,
                    },
                    {
                        left: 10,
                        top: 70,
                    }, ],
                    background: "#ff0000"
                },
            ]
        }).then(res => {
            console.log(res.src)
        }).catch(err => {
            console.log(err)
        })

结果：

上面示例代码说明：

首先定义了一个100 * 100的canvas；先绘制了一个100 * 100的矩形，背景红色；在绘制了一个90 * 90的灰色矩形；然后绘制了一个10 * 10 的图片；最后绘制了一个凹形框

content 参数说明

@param { String } type 绘制的类型 *

支持：

image：图片

font：文字

rect：矩形

line：线
@param { Number } width 宽除了line线类型，其类型必填 *
@param { Number } height 高除了line线类型，其类型必填 *
@param { Number } left 距离左部距离除了line线类型，其他三种类型必填 *
@param { Number } top 距离顶部距离除了line线类型，其他三种类型必填 *
@param { String | Object/Array} background 背景颜色

line线类型该参数代表线的颜色；除line线类型外，其他类型该参数可为一个 Object/Array，用于绘制渐变；line线类型不可使用Object/Array类型

Object参数说明
- param { Number } scale 标尺范围0-1，作用类似于css 0%-100%
- param { String } color 渐变颜色
@param { Number/Array} linearGradient 当 background 为Object/Array 时，该参数必填，line线类型不可使用

Object参数说明
- linearGradient 是一个大小为4的数值数组；[0]-渐变开始点的 x 坐标，[1]-渐变开始点的 y 坐标，[2]-渐变结束点的 x 坐标，[3]-渐变结束点的 y 坐标,

示例：

makePoster({
            width: 100,
            height: 100,
            content: [
                {
                    type: "rect",
                    width: 100,
                    height: 100,
                    top: 0,
                    left: 0,
                    background: [{ scale: 0, color: "red" }, { scale: 1, color: "blue" }],
                    linearGradient: [0, 0, 100, 0],
                },  
                
            ]
        }).then(res => {
            console.log(res.src)
        }).catch(err => {
            console.log(err)
        })

结果：

{ Number/Array} borderRadius 圆角，line线类型不可使用

Object参数说明
- borderRadius 是一个大小为4的数值数组，对应圆角位置；[0]-左上，[1]-右上，[2]-右下，[3]-左下,
- 注：圆角弧度最大不会超过一个整圆

示例：

makePoster({
            width: 100,
            height: 100,
            content: [
                {
                    type: "rect",
                    width: 100,
                    height: 100,
                    top: 0,
                    left: 0,
                    background: [{ scale: 0, color: "red" }, { scale: 1, color: "blue" }],
                    linearGradient: [0, 0, 100, 0],
                    borderRadius: [10, 10, 10, 10],
                },  
                
            ]
        }).then(res => {
            console.log(res.src)
        }).catch(err => {
            console.log(err)
        })

结果：

{ Object} border 边框，line线类型不可使用
- param { Number } width 边框宽度
- param { String } color 边框颜色

示例：

makePoster({
            width: 100,
            height: 100,
            content: [
                {
                    type: "rect",
                    width: 90,
                    height: 90,
                    top: 5,
                    left: 5,
                    background: [{ scale: 0, color: "red" }, { scale: 1, color: "blue" }],
                    linearGradient: [0, 0, 100, 0],
                    borderRadius: [10, 10, 10, 10],
                    border: {
                        width: 4,
                        color: "#ffffff",
                    },
                },  
                
            ]
        }).then(res => {
            console.log(res.src)
        }).catch(err => {
            console.log(err)
        })

结果：

{ Object} shadow 阴影，line线类型不可使用

注：使用了圆角后，阴影不会生效

- param { Number } `blur` 模糊度

- param { Number } `left` 距离形状左部距离

- param { Number } `top` 距离形状顶部距离

- param { String } `color` 颜色

示例：

makePoster({
            width: 100,
            height: 100,
            content: [
                {
                    type: "rect",
                    width: 90,
                    height: 90,
                    top: 5,
                    left: 5,
                    background: [{ scale: 0, color: "red" }, { scale: 1, color: "blue" }],
                    linearGradient: [0, 0, 100, 0],
                    border: {
                        width: 4,
                        color: "#ffffff",
                    },
                    shadow:{
                        blur:20,
                        left:0,
                        top:0,
                        color: "#ffffff",
                    }
                },  
                
            ]
        }).then(res => {
            console.log(res.src)
        }).catch(err => {
            console.log(err)
        })

结果：

{ String} mode 图片显示方式；aspectFill 图片超出容器的边会被截取； aspectFit 图片完整展示在容器内；（默认：aspectFill）

注：仅image图片类型生效

{ String} text 文字内容

注：仅font文字类型生效；文字内容超出宽高会自动换行

{ String | Object/Array} color 字体颜色

注：仅font文字类型生效；开启hollow镂空效果后color可以为渐变写法；详见background渐变写法，且linearGradient参数必须存在

{ String | Number} fontWeight 文字比重加粗

注：仅font文字类型生效

{ Number } fontSize 文字大小；（默认：10）

注：仅font文字类型生效，行高应该大于一点文字大小

{ Number } lineHeight 文字行高；（默认：11）

注：仅font文字类型生效，行高应该大于一点文字大小

{ String } fontFamily 字体

注：仅font文字类型生效

{ String } fontStyle 字体风格；normal 默认； italic 斜体；oblique 斜体；（默认：normal）

注：仅font文字类型生效

{ String } fontVariant 字体变体；normal 默认； small-caps 英文大写，首个字母会大于后面字母；（默认：normal）

注：仅font文字类型生效

{ String } textAlign 字体对齐方式；center 居中对齐； left 左对齐； right 右对齐；（默认：left）

注：仅font文字类型生效

{ Boolean } hollow 字体是否镂空；true 镂空； false 不镂空；（默认：false）

注：仅font文字类型生效；开启镂空可以给文字添加渐变色，详见color背景渐变

示例：

makePoster({
            width: 100,
            height: 100,
            content: [
                {
                    type: "rect",
                    width: 100,
                    height: 100,
                    top: 0,
                    left: 0,
                    background:"#fff"
                },
                {
                    type: "font",
                    width: 90,
                    height: 20,
                    left: 0,
                    top:0,
                    fontSize:20,
                    lineHeight:22,
                    text: "测试",
                    background:"#ccc",
                    fontWeight:"bold",
                    hollow:true,
                    color: [{ scale: 0, color: "red" }, { scale: 1, color: "blue" }],
                    linearGradient: [0, 0, 0, 20],
                },
                
            ]
        }).then(res => {
            console.log(res.src)
        }).catch(err => {
            console.log(err)
        })

结果：

{ Object/Array } location 线点位置；线的绘制是根据每个点位连接而成

注：仅line线类型可用

Object参数说明

- param { Number } `left` 点距离左部位置

- param { Number } `top` 点距离顶部位置

{ Number } lineWidth 线宽；仅line线类型可用

示例：

makePoster({
            width: 100,
            height: 100,
            content: [
                {
                    type: "rect",
                    width: 100,
                    height: 100,
                    top: 0,
                    left: 0,
                    background: "#000"
                },
                {
                    type: "line",
                    location: [{
                        left: 10,
                        top: 50,
                    },
                    {
                        left: 20,
                        top: 50,
                    }, {
                        left: 20,
                        top: 60,
                    },
                    {
                        left: 30,
                        top: 60,
                    },
                    {
                        left: 30,
                        top: 50,
                    },
                    {
                        left: 40,
                        top: 50,
                    },
                    {
                        left: 40,
                        top: 70,
                    },
                    {
                        left: 10,
                        top: 70,
                    },],
                    background: "#ff0000"
                }
                
            ]
        }).then(res => {
            console.log(res.src)
        }).catch(err => {
            console.log(err)
        })

结果：

{ Number } zIndex 绘制层级

makePoster 绘制海报函数返回参数说明

该函数返回一个Promise，成功后获取到的是一个PosterImage海报图片信息类型

类型说明

{ String } src 海报base64
{ String } noPrefixSrc 无前缀的海报base64
{ String } imageType 海报图片类型
{ Number } width 海报宽
{ Number } height 海报高
{ Function } toFile 海报转文件方法

tingShe / js_common_tools

函数说明

* 表示参数必填

makePoster 绘制海报

obj 参数说明

content 参数说明及示例

content 参数说明

makePoster 绘制海报函数返回参数说明

类型说明

toFile返回一个本地文件、可append到FormData内用于上传服务器

简介

发行版

贡献者

近期动态

tingShe / js_common_tools .gitee-modal { width: 500px !important; }

函数说明

* 表示参数必填

makePoster 绘制海报

obj 参数说明

content 参数说明及示例

content 参数说明

makePoster 绘制海报函数返回参数说明

类型说明

toFile返回一个本地文件、可append到FormData内用于上传服务器

简介

发行版

贡献者

近期动态

搜索帮助

tingShe / js_common_tools