Poster-editor NPM

poster-editor

海报编辑器
渲染模块支持ssr

Usage

// vue-cli 中配置如下，使用完整版的vue：
configureWebpack: {
    resolve: {
      alias: { 'vue$': 'vue/dist/vue.common.js' }
    },
}

// 依赖
import posterEditor from 'poster-editor'
import 'poster-editor/lib/posterEditor.css'

// 注册vuex state
store.registerModule('posterEditor', posterEditor.store)

// 外部依赖Element
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

// 覆盖数据接口，目前只有模板数据接口，其他素材的接口还未实现
export const editorApis = {
  /**
   * 模板详情
   * @param id
   * @return {{}} 返回示例：
   * {
   *   content: '', // 模板内容
   * }
   */
  async templateDetail ({
    id
  }) {
    // todo
    return null
  },
  /**
   * 模板列表，可分页
   * 返回值
   * @return {*[]} 返回示例：
   * [
   *    {
   *      id: , // 模板id
   *      width: , // 模板宽度
   *      height: , // 模板高度
   *      picUrl: , // 预览图
   *    }
   * ]
   */
  async templateList ({
    pageNo,
    pageSize
  }) {
    // todo
    const emptyArr = []
    emptyArr.total = 0
    return emptyArr
  }
}

...

/** 注意 **/
只用到htmlCanvas时不需要依赖Element和Vuex，
考虑到字体数据可配置，不能将字体数据作为前端的静态数据，需要通过请求获取。
字体是通过将css注入到页面中实现的，使用ssr时，需在后台将字体css渲染好。