quanshi-poster

$3

``
海报模板设计端：
`
!输入图片说明
`
海报模板内容合成端：
`
!输入图片说明

模板端功能
`
1. 支持海报背景上传
2. 支持活动模板元素区域内任意拖动（需要参数配置）
3. 支持活动模板元素任意缩放（需要参数配置）
4. 支持活动元素内容的编辑（需要参数配置）
4. 支持重置模板元素位置
5. 智能记忆元素模板拖动位置
6. 支持生成海报模板截图
`
内容模板合成端功能
`
1. 支持海报内容与模板活动元素的融合。
2. 支持内容的人工调试，编辑（需要参数配置）
3. 支持最终海报生成截图
`


$3

第一步：
`
npm install quanshi-poster --save-dev
`
第二步：使用端引入组件
`
import {PosterDesigner, PosterTool} from 'quanshi-poster'

PosterDesigner： 为模板端组件
PosterTool: 为内容合成端组件
`
第三步： 模板端组件调用方法
`
PosterDesigner.show({
bizType: "designer", //业务类型: designer：模板设计端，composer：内容模板合成端，默认是设计端， 非必填参数
title: "编辑模板", //主标题
theme: "活动主题、活动时间、活动嘉宾、活动简介、活动二维码五个模块，可以拖拽改变位置",//副标题，描述信息
imageUrl: "",//海报背景图片地址
imageExt: ["png"],//海报底图类型白名单
thumbnail: {scale: 1, dpi: 48},//海报截图缩放比例，及质量
templateSize: {//海报区域的窗口尺寸
width: 344,
height: 612
},
activeElements: {//活动元素列表
"1": {//元素id-》需要与服务端共同约定，在模板与动态内容合成时需要进行匹配
id: "1",//元素id-》需要与服务端共同约定
content: "",//元素中填充的内容非必填
type: "text",//活动元素类型目前支持(type: text, image)
title: "活动主题",//活动元素属性标题
left : 22,//活动元素初始x坐标位置
top: 22,//活动元素初始y坐标位置
disableResize: false,//是否限制缩放 false: 不限制, true: 限制
disableEdit: true,//是否限制编辑 false: 不限制, true: 限制
maxHeight: 200,//内容编辑区域的最大高度限制
minWidth: 50,//内容编辑区域的最小宽度限制
minHeight: 30,//内容编辑区域的最小高度限制
disableDrag: false,//是否限制拖拽 false: 不限制, true: 限制
style: {//活动元素的css样式，方便后续可视化扩展
fontSize: "22px",
color: "#000",
width: 95,
height: 32
}
},
"2": {
id: "2",
content: "",//元素中填充的内容非必填
type: "text",
title: "活动时间",
left : 22,
top: 80,
disableEdit: true,
disableResize: false,
minWidth: 50,
minHeight: 20,
disableDrag: false,
style: {
fontSize: "12px",
width: 52,
height: 22
}
},
"3": {
id: "3",
content: "",//元素中填充的内容非必填
type: "text",
title: "活动嘉宾",
left : 22,
top: 126,
disableEdit: true,
disableResize: false,
minWidth: 50,
minHeight: 30,
disableDrag: false,
style: {
fontSize: "12px",
width: 52,
height: 22
}
},
"4": {
id: "4",
content: "",//元素中填充的内容非必填
type: "text",
title: "活动简介",
left : 22,
top: 172,
disableEdit: true,
disableResize: false,
minWidth: 50,
minHeight: 30,
disableDrag: false,
style: {
fontSize: "12px",
width: 52,
height: 22
}
},
"5": {//海报二维码Id固定是5否则会出问题
id: "5",
content: "",//必须为base64的海报二维码，否则截图可能会出问题
desc: "微信扫码参加活动",
type: "image",
title: "二维码",
left: 22,
top: 397,
disableResize: false,
disableDrag: false,
minWidth: 64,
minHeight: 64,
style: {
width: 64,
height: 64,
lineHeight: "64px",
textAlign: "center",
backgroundColor: "#FFF",
fontSize: "12px"
}
}
},
defaultActiveElements: {//同activeElements的数据格式，当用户点击重制位置的时候会使用这里的元素设置


},
onConfirm(data, image, confirmOk, confirmFail) {//确认按钮事件回调 data：活动元素位置信息，image：海报截图base64字符串，confirmOk 函数类型, 保存成功时调用, confirmFail 函数类型，出错的时候调用。
console.log(data, image);
},
uploadPic(file, setImageURL, err) {//海报上传事件的回调方法, file： 图片文件对象，setImageURL: 函数，开发者将图片云端地址回显到组件内, err: 图片上传错误结果对象
//例如 setImageURL("https://dss1.bdstatic.com/6OF1bjeh1BF3odCf/it/u=3204721291,2218979235&fm=218&app=92&f=PNG?w=121&h=75&s=27C8B34858FA3C9CA005455A0300C0D0");
}
});
`

第三步： 模板内容合成端组件调用方法
`
/*从服务端获取的模板元数据信息 /
let templalteData = {
bizType: "composer",
imageUrl: "",//海报底图云端图片地址
thumbnail: {scale: 1, dpi: 48},//海报截图缩略图，分辨率参数
templateSize: {//海报设计区域的尺寸，需要用户根据服务端模板数据进行二次合并
width: 270,
height: 480
},
activeElements: {//活动元素列表
"1": {
id: "1",
type: "text",
title: "活动主题:",
content: "农业与鸡蛋大会· 杭州国际博览农业展",//活动元素对应的具体内容, 需要从服务端获取后进行合并.
left : 22,
top: 22,
disableResize: true,
disableEdit: true,
maxHeight: 200,
minWidth: 50,
minHeight: 30,
disableDrag: true,
style: {
fontSize: "22px",
color: "#000"
}
},
"2": {
id: "2",
type: "text",
title: "活动时间:",
content: "2021-03-23 周三 10:30-12:00",
left : 22,
top: 100,
disableEdit: true,
disableResize: true,
minWidth: 50,
minHeight: 30,
disableDrag: true,
style: {
fontSize: "12px"
}
},
"3": {
id: "3",
type: "text",
title: "活动嘉宾:",
inputTips: "请输入嘉宾信息",//输入框提示文案
content: "",
left : 22,
top: 126,
disableEdit: false,
disableResize: false,
minWidth: 56,
minHeight: 22,
disableDrag: false,
style: {
fontSize: "12px",
height: 22
}
},
"4": {
id: "4",
type: "text",
title: "活动简介:",
inputTips: "请输入简介信息",
content: "你们你们你们你们你们你们你们你们你们你们你们你们",
left : 22,
top: 172,
disableEdit: false,
disableResize: false,
minWidth: 56,
minHeight: 30,
disableDrag: false,
style: {
fontSize: "12px",
height: 22
}
},
"5": {
id: "5",
type: "image",
title: "二维码",
content: "https://img1.baidu.com/it/u=3700526141,2671696428&fm=224&fmt=auto&gp=0.jpg",
left: 22,
top: 397,
disableResize: true,
disableDrag: false,
minWidth: 64,
minHeight: 64,
style: {
width: 64,
height: 64,
lineHeight: "64px",
textAlign: "center",
backgroundColor: "#FFF",
fontSize: "12px"
}
}
}
, designSize: {//不需要用户手动设置，主要用于编辑区域等比例缩放使用（使用者不用关心，会自动记录）
width: 270,
height: 480
}}
return (



);
`

$3

`
1. 截图
PosterTool.capturePic((base64)=> {

})
`
`
2. 获取json格式的海报元数据
let data = PosterTool.getResult()
``