@kqtec/image-compose
v1.1.4
Published
一个通用的前端图片合成库。可以用于活动海报的前端合成等场景。
Downloads
3
Readme
common__web__image2canvas
一个通用的前端图片合成库。可以用于活动海报的前端合成等场景。
image2Canvas
通过canvas将图片资源和文字合成在一张图片上,(注:本库适用将原始大小的图片合成,所以参数里面的宽高请选用图片本身的宽高。)
install
npm install image-compose --save
Usage
import image2canvas from "image-compose";
image2Canvas(base,image,text);
参数详解:
| 名称 | 是否可选 | 类型 | 解释 | | ------| ------| ------| ----- | | base | 是| Object | 合成图片的底图,如果为空则为白底 | | image | 否 | Array | 需要合成的图片,其数组元素为对象,如果没有需要合成的图片则穿空数组[] | | text | 否 | Array | 需要合成的文字,数组元素为对象 ,没有则穿空数组[]|
base
| 名称 | 是否可选 | 类型 | 解释 | | ------| ------| ------| ----- | | url | 可选 | String | 合成图片的底图,可以是地址或者图片base64数据 | | width | 必选 | Number | 合成图片的底图宽度| | height | 必选 | Number | 合成图片的底图高度|
image中元素的属性
| 名称 | 是否可选 | 类型 | 解释 | | ------| ------| ------| ----- | | url | 是 | String | 需要合成的图片,可以是地址或者图片base64数据 | | sx | 是 | Number | 图片左上角距离底图左上角的横轴距离 | | sy | 是 | Number | 图片左上角距离底图左上角的纵轴距离 |
text中元素的属性
| 名称 | 是否可选 | 类型 | 解释 | | ------| ------| ------| ----- | | content | 是 | String | 需要合成的文字 以'&&'作为换行符 | | sx | 是 | Number |文本中心相对于底图的 x坐标 | | sy | 是 | Number | 文本中心相对于底图的y坐标 | | color | 可选 |String | 文字颜色| | fontSize | 可选 | String | 文字大小。default:24 | | lineHeight | 可选 | String | 文字行高,default:30 |
###example var base = "./img/[email protected]"; var compose = "./img/[email protected]"; var qrCode = "./img/[email protected]";
image2canvas({
url:base,
width:750,
height:1206
},[{
url:compose,
width:605,
height:636,
sx:72,
sy:84,
},{
url:qrCode,
sx:322,
sy:520,
}],[
{
content:'xxx&&在意大利的朱丽叶故居,用意大利语许下&&了2019年的第一个关于XX的愿望。',
sx:375,
sy:160,
color:"#876746",
fontSize:30,
lineHeight:30,
},{
content:"Ta的愿望守护咒语是&&'L'Amore di dio con te'",
sx:375,
sy:382,
lineHeight:30,
}
]).then(data => {
console.log(data)
}).catch(err => {
console.log(err);
})