feat: set up cover when saving work

Author: ly525

front-end/h5/package.json

@@ -15,6 +15,7 @@
     "core-js": "^2.6.5",
     "element-ui": "^2.9.1",
     "font-awesome": "4.7.0",
+    "html2canvas": "^1.0.0-rc.3",
     "node-sass": "^4.12.0",
     "proxy-agent": "^3.1.0",
     "qrcode": "^1.4.1",

front-end/h5/src/components/core/editor/index.js

@@ -99,10 +99,7 @@ export default {
       pages: state => state.work.pages,
       work: state => state.work
     }),
-    ...mapState('loading', {
-      saveWork_loading: state => state.saveWork_loading,
-      setWorkAsTemplate_loading: state => state.setWorkAsTemplate_loading
-    })
+    ...mapState('loading', ['saveWork_loading', 'setWorkAsTemplate_loading', 'uploadWorkCover_loading'])
   },
   methods: {
     ...mapActions('editor', [
@@ -170,7 +167,7 @@ export default {
             style={{ lineHeight: '64px', float: 'right', background: 'transparent' }}
           >
             <a-menu-item key="1" class="transparent-bg"><a-button type="primary" size="small" onClick={() => { this.previewVisible = true }}>预览</a-button></a-menu-item>
-            <a-menu-item key="2" class="transparent-bg"><a-button size="small" onClick={() => this.saveWork()} loading={this.saveWork_loading}>保存</a-button></a-menu-item>
+            <a-menu-item key="2" class="transparent-bg"><a-button size="small" onClick={() => this.saveWork({ isSaveCover: true })} loading={this.saveWork_loading || this.uploadWorkCover_loading}>保存</a-button></a-menu-item>
             {/* <a-menu-item key="3" class="transparent-bg"><a-button size="small">发布</a-button></a-menu-item> */}
             <a-menu-item key="3" class="transparent-bg">
               <a-dropdown-button onClick={() => {}} size="small">

front-end/h5/src/store/modules/loading.js

@@ -4,7 +4,8 @@ const state = {
   fetchWorks_loading: false,
   setWorkAsTemplate_loading: false,
   fetchWorkTemplates_loading: false,
-  useTemplate_loading: false
+  useTemplate_loading: false,
+  uploadWorkCover_loading: false
 }
 
 // getters

front-end/h5/src/store/modules/work.js

@@ -4,6 +4,7 @@ import Page from '../../components/core/models/page'
 import Work from '../../components/core/models/work'
 import { AxiosWrapper } from '../../utils/http.js'
 import router from '@/router.js'
+import { takeScreenshot } from '../../utils/helper.js'
 
 export const actions = {
   previewWork ({ commit }, payload = {}) {
@@ -30,20 +31,30 @@ export const actions = {
     }
     commit('setWork', work)
   },
-  saveWork ({ commit, dispatch, state }, payload = {}) {
-    // update work with strapi
-    const work = {
-      ...state.work,
-      ...payload
+  /**
+   * isSaveCover {Boolean} 保存作品时，是否保存封面图
+   */
+  saveWork ({ commit, dispatch, state }, { isSaveCover = false } = {}) {
+    const fn = (callback) => {
+      new AxiosWrapper({
+        dispatch,
+        commit,
+        loading_name: 'saveWork_loading',
+        successMsg: '保存作品成功',
+        customRequest: strapi.updateEntry.bind(strapi)
+      }).put('works', state.work.id, state.work).then(callback)
     }
-
-    return new AxiosWrapper({
-      dispatch,
-      commit,
-      loading_name: 'saveWork_loading',
-      successMsg: '保存作品成功',
-      customRequest: strapi.updateEntry.bind(strapi)
-    }).put('works', state.work.id, work)
+    return new Promise((resolve, reject) => {
+      if (isSaveCover) {
+        takeScreenshot().then(file => {
+          dispatch('uploadCover', { file }).then(() => {
+            fn(resolve)
+          }) // uploadCover
+        }) // takeScreenshot
+      } else {
+        fn(resolve)
+      }
+    })
   },
   fetchWork ({ commit, state }, workId) {
     strapi.getEntry('works', workId).then(entry => {
@@ -158,11 +169,51 @@ export const actions = {
       loading_name: 'useTemplate_loading',
       successMsg: '使用模板成功'
     }).post(`/works/use-template/${workId}`)
+  },
+  uploadCover ({ commit, state, dispatch }, { file } = {}) {
+    const formData = new FormData()
+    formData.append('files', file, `${+new Date()}.png`)
+    formData.append('workId', state.work.id)
+    return new AxiosWrapper({
+      dispatch,
+      commit,
+      name: 'editor/setWorkCover',
+      loading_name: 'uploadWorkCover_loading',
+      successMsg: '上传封面图成功!'
+    // }).post(`/works/uploadCover/${state.work.id}`, formData)
+    }).post(`/upload/`, formData)
   }
 }
 
 // mutations
 export const mutations = {
+  /**
+   *
+   * @param {*} state
+   * @param {Object} payload
+   *
+    value example: [
+      {
+        "id": 1,
+        "name": "1567769149231.png",
+        "hash": "1660b11229e7473b90f99a9f9afe7675",
+        "sha256": "lKl7f_csUAgOjf0VRYkBZ64EcTjvt4Dt4beNIhELpTU",
+        "ext": ".png",
+        "mime": "image/png",
+        "size": "6.57",
+        "url": "/uploads/1660b11229e7473b90f99a9f9afe7675.png",
+        "provider": "local",
+        "public_id": null,
+        "created_at": "2019-09-06T11:25:49.255Z",
+        "updated_at": "2019-09-06T11:25:49.261Z",
+        "related": []
+      }
+    ]
+   */
+  setWorkCover (state, { type, value }) {
+    const [cover] = value
+    state.work.cover_image_url = cover.url
+  },
   /**
    * payload: {
    *  type:   @params {String} "editor/setWorks",

front-end/h5/src/utils/helper.js

@@ -0,0 +1,23 @@
+import html2canvas from 'html2canvas'
+
+/**
+ * 生成作品封面图(截图)
+ * @param {String} selector
+ * @param {文件名} fileName
+ */
+export function takeScreenshot (selector = '.canvas-wrapper', fileName = `${+new Date()}`) {
+  const el = document.querySelector(selector)
+  return new Promise((resolve, reject) => {
+    // html2canvas document: https://html2canvas.hertzen.com/configuration
+    // allowTaint: Whether to allow cross-origin images to taint the canvas
+    // if you use allowTaint: true, the cors image will taint the canvas, and canvas.toDataURL won't work
+    // 会对canvas造成污染，导致 canvas.toDataURL 无效
+    html2canvas(el, { allowTaint: true }).then(canvas => {
+      // document.body.appendChild(canvas) use this line to test the generated canvas
+      canvas.toBlob(blob => {
+        const file = new window.File([blob], fileName, { type: 'image/png' })
+        resolve(file)
+      })
+    })
+  })
+}

front-end/h5/vue.config.js

@@ -1,10 +1,5 @@
-// const ProxyAgent = require('proxy-agent')
 const isProd = process.env.NODE_ENV === 'production'
-
-const PROD_API_ORIGIN = 'https://luban-h5-api.herokuapp.com'
-const DEV_API_ORIGIN = 'http://localhost:1337'
-// const DEV_API_ORIGIN = 'https://luban-h5-api.herokuapp.com'
-
+const target = 'http://localhost:1337'
 module.exports = {
   runtimeCompiler: true,
   // 因为需要部署到 github pages，所以需要将 publicPath 设为 "/< GitHub Repo Name>/"
@@ -14,8 +9,12 @@ module.exports = {
     // proxy: API_ORIGIN
     proxy: {
       '/works': {
-        // agent: new ProxyAgent('socks5://127.0.0.1:1086'),
-        target: isProd ? PROD_API_ORIGIN : DEV_API_ORIGIN,
+        target,
+        changeOrigin: true,
+        ws: false
+      },
+      '/upload': {
+        target,
         changeOrigin: true,
         ws: false
       }

front-end/h5/yarn.lock

@@ -1974,6 +1974,11 @@ balanced-match@^1.0.0:
   resolved "https://registry.npm.taobao.org/balanced-match/download/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
   integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
 
+base64-arraybuffer@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.npm.taobao.org/base64-arraybuffer/download/base64-arraybuffer-0.2.0.tgz#4b944fac0191aa5907afe2d8c999ccc57ce80f45"
+  integrity sha1-S5RPrAGRqlkHr+LYyZnMxXzoD0U=
+
 base64-js@^1.0.2:
   version "1.3.0"
   resolved "https://registry.npm.taobao.org/base64-js/download/base64-js-1.3.0.tgz#cab1e6118f051095e58b5281aea8c1cd22bfc0e3"
@@ -3027,6 +3032,13 @@ css-declaration-sorter@^4.0.1:
     postcss "^7.0.1"
     timsort "^0.3.0"
 
+[email protected]:
+  version "1.1.1"
+  resolved "https://registry.npm.taobao.org/css-line-break/download/css-line-break-1.1.1.tgz#d5e9bdd297840099eb0503c7310fd34927a026ef"
+  integrity sha1-1em90peEAJnrBQPHMQ/TSSegJu8=
+  dependencies:
+    base64-arraybuffer "^0.2.0"
+
 css-loader@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npm.taobao.org/css-loader/download/css-loader-1.0.1.tgz#6885bb5233b35ec47b006057da01cc640b6b79fe"
@@ -5286,6 +5298,13 @@ html-webpack-plugin@^3.2.0:
     toposort "^1.0.0"
     util.promisify "1.0.0"
 
+html2canvas@^1.0.0-rc.3:
+  version "1.0.0-rc.3"
+  resolved "https://registry.npm.taobao.org/html2canvas/download/html2canvas-1.0.0-rc.3.tgz#1de88b073f6bcaa6954ca1edfb46da13b258b038"
+  integrity sha1-HeiLBz9ryqaVTKHt+0baE7JYsDg=
+  dependencies:
+    css-line-break "1.1.1"
+
 htmlparser2@^3.3.0:
   version "3.10.1"
   resolved "https://registry.npm.taobao.org/htmlparser2/download/htmlparser2-3.10.1.tgz#bd679dc3f59897b6a34bb10749c855bb53a9392f"