feat: 支持制作海报(导出静态图、封面图) !#en: support download poster; #135

ly525
1 parent c2233d22
Showing 6 changed files with 59 additions and 6 deletions
front-end/h5/src/components/core/editor/fixed-tools/index.js
front-end/h5/src/components/core/editor/fixed-tools/options.js
front-end/h5/src/components/core/store/modules/work.js
front-end/h5/src/locales/lang/en-US.js
front-end/h5/src/locales/lang/zh-CN.js
front-end/h5/src/utils/canvas-helper.js
@@ -9,7 +9,12 @@ export default {
     })
   },
   methods: {
-    ...mapActions('editor', ['pageManager', 'elementManager', 'updateScaleRate'])
+    ...mapActions('editor', [
+      'pageManager',
+      'elementManager',
+      'updateScaleRate',
+      'downloadPoster'
+    ])
   },
   render () {
     return (
@@ -56,6 +56,11 @@ const fixedTools = [
     i18nTooltip: 'editor.fixedTool.issues',
     icon: 'question',
     action: function () { window.open('https://github.com/ly525/luban-h5/issues/110') }
+  },
+  {
+    i18nTooltip: 'editor.fixedTool.poster',
+    icon: 'camera',
+    action: function () { this.downloadPoster() }
   }
 ]
  
@@ -4,7 +4,7 @@ import Page from &#39;core/models/page&#39;
 import Work from 'core/models/work'
 import { AxiosWrapper } from '@/utils/http.js'
 // import router from '@/router.js'
-import { takeScreenshot } from '@/utils/canvas-helper.js'
+import { takeScreenshot, downloadPoster } from '@/utils/canvas-helper.js'
  
 function setLoading (commit, loadingName, isLoading) {
   commit('loading/update', { type: loadingName, payload: isLoading }, { root: true })
@@ -199,6 +199,9 @@ export const actions = {
       successMsg: '上传封面图成功!'
     // }).post(`/works/uploadCover/${state.work.id}`, formData)
     }).post(`/upload/`, formData)
+  },
+  downloadPoster ({ commit, state, dispatch }) {
+    downloadPoster()
   }
 }
  
@@ -78,7 +78,8 @@ export default {
       importPSD: 'Import PSD',
       zoomIn: 'Zoom In{hotkey}',
       zoomOut: 'Zoom Out{hotkey}',
-      issues: 'Issues'
+      issues: 'Issues',
+      poster: 'Screenshot'
     },
     editPanel: {
       tab: {
@@ -87,7 +87,8 @@ export default {
       importPSD: '导入PSD',
       zoomIn: '缩小{hotkey}',
       zoomOut: '放大{hotkey}',
-      issues: '常见问题'
+      issues: '常见问题',
+      poster: '下载海报'
     },
     editPanel: {
       tab: {
@@ -30,7 +30,11 @@ function dataURItoBlob (dataURI) {
  * @param {String} selector
  * @param {文件名} fileName
  */
-export function takeScreenshot (selector = '.canvas-wrapper', fileName = `${+new Date()}`) {
+export function takeScreenshot ({
+  selector = '.canvas-wrapper',
+  fileName = `${+new Date()}`,
+  type = 'file'
+} = {}) {
   const el = document.querySelector(selector)
   return new Promise((resolve, reject) => {
     // html2canvas document: https://html2canvas.hertzen.com/configuration
@@ -42,7 +46,20 @@ export function takeScreenshot (selector = &#39;.canvas-wrapper&#39;, fileName = `${+new
       const dataUrl = canvas.toDataURL('image/jpeg', 0.6)
       const blob = dataURItoBlob(dataUrl)
       const file = new window.File([blob], fileName, { type: 'image/png' })
-      resolve(file)
+      switch (type) {
+        case 'canvas':
+          resolve(canvas)
+          break
+        case 'blob':
+          resolve(blob)
+          break
+        case 'dataUrl':
+          resolve(dataUrl)
+          break
+        default:
+          resolve(file)
+          break
+      }
       // canvas.toBlob(blob => {
       //   const file = new window.File([blob], fileName, { type: 'image/png' })
       //   resolve(file)
@@ -50,3 +67,24 @@ export function takeScreenshot (selector = &#39;.canvas-wrapper&#39;, fileName = `${+new
     })
   })
 }
+
+/**
+ *
+ * @param {*} canvas
+ * @param {*} name
+ */
+export function downLoadCanvas (canvas, name) {
+  var a = document.createElement('a')
+  a.href = canvas.toDataURL()
+  a.download = name
+  a.click()
+}
+
+/**
+ * 下载海报
+ */
+export function downloadPoster () {
+  takeScreenshot({ type: 'canvas' }).then(canvas => {
+    downLoadCanvas(canvas, new Date())
+  })
+}