海报生成器 react版

发布者: xiaozhimn

功能介绍

海报模板设计端:

输入图片说明

海报模板内容合成端:

输入图片说明

模板端功能

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: "活动主题、活动时间、活动嘉宾、活动简介、活动二维码五个模块,可以拖拽改变位置",//副标题,描述信息
        width: 600,//弹层宽度
        height: 590,//弹层高度  
        imageUrl: "",//海报背景图片地址
        imageSize: {width: 750, height: 1334},//海报底图尺寸限制
        imageRatio: 9 / 16,//海报底图比例限制
        imageExt: ["png"],//海报底图类型白名单   
        thumbnail: {scale: 1, dpi: 48},//海报截图缩放比例,及质量
        templateSize: {//海报区域的窗口尺寸
          width: 270,
          height: 480
        },
        activeElements: {//活动元素列表
            "1": {//元素id-》需要与服务端共同约定
              id: "1",//元素id-》需要与服务端共同约定
              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",
            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",
            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",
            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",
             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" 
             } 
           }
        },
        onConfirm(data, image, hideModal) {//确认按钮事件回调 data:活动元素位置信息,image:海报截图base64字符串,hideModal 函数类型, 由开发者调用关掉弹层。
            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");
        },
        onResult(result) {//实时返回活动元素的位置信息 

        }
      }); 

第三步: 模板内容合成端组件调用方法

 /**从服务端获取的模板元数据信息 */
  let templalteData = {
                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
  }}
  function onResult(result) {//活动元素实时位置结果回调

  }
return (
    <div className="App">
        <PosterTool {...templalteData} onResult={onResult}></PosterTool>
    </div>
  );
0赞