功能介绍

海报模板设计端：

海报模板内容合成端：

模板端功能

1. 支持海报背景上传
2. 支持活动模板元素区域内任意拖动（需要参数配置）
3. 支持活动模板元素任意缩放（需要参数配置）
4. 支持活动元素内容的编辑（需要参数配置）
4. 支持重置模板元素位置
5. 智能记忆元素模板拖动位置
6. 支持生成海报模板截图

内容模板合成端功能

1. 支持海报内容与模板活动元素的融合。
2. 支持内容的人工调试，编辑（需要参数配置）
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 (
    <div className="App">
        <PosterTool {...templalteData} style={{}}></PosterTool>
    </div>
  );

PosterTool API

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

})

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