refactor: change default picture compression ratio

src/api/asset.js

@@ -39,7 +39,7 @@ export function getAssetUrl (keyName) {
   return `${process.env.VUE_APP_MINIO}/${keyName}`
 }
 
-export function getThumbnailUrl (keyName, ratio = 'x0.1') {
+export function getThumbnailUrl (keyName, ratio = 'x0.2,q30') {
   let url = getAssetUrl(keyName)
   if (url.charAt(0) === '/') {
     url = `${location.origin}${url}`

src/views/bigscreen/core/base.js

@@ -30,6 +30,7 @@ export default {
       scale: 100,
       minScale: 100,
       maxScale: 100,
+      padding: 0,
       selectedWidgetIndex: -1,
       node: null,
       bgm: '',
@@ -149,8 +150,8 @@ export default {
     checkRatio () {
       const wrapper = this.$refs.wrapper
       if (wrapper && this.node) {
-        const width = wrapper.offsetWidth
-        const height = wrapper.offsetHeight
+        const width = wrapper.offsetWidth - this.padding * 2
+        const height = wrapper.offsetHeight - this.padding * 2
         const { width: cWidth, height: cHeight } = this.node
         const wScale = width / cWidth
         const hScale = height / cHeight
@@ -286,7 +287,7 @@ export default {
     },
     snap () {
       this.snapping = true
-      return domToImage.toJpeg(this.$refs.wrapper, {
+      return domToImage.toJpeg(this.$refs.canvas, {
         filter (node) {
           const { tagName } = node
           if (tagName === 'CANVAS') {

src/views/bigscreen/designer/index.vue

@@ -173,11 +173,11 @@
         </el-tooltip>
       </div>
       <div
+        ref="wrapper"
         class="c-designer__content"
         @mousedown="onScreenClick"
       >
         <div
-          ref="wrapper"
           class="c-designer__wrapper"
           :style="wrapperStyles"
         >
@@ -417,6 +417,7 @@ export default {
   mixins: [base],
   data () {
     return {
+      padding: 10,
       tabIndex: 0,
       optionIndex: 0,
       widgetConfigs: widgets,
@@ -620,7 +621,7 @@ export default {
     transformImage (asset) {
       return {
         ...asset,
-        url: getThumbnailUrl(asset.keyName, 'x0.2,q30')
+        url: getThumbnailUrl(asset.keyName)
       }
     },
     editAssets (attr) {

src/views/bigscreen/viewer/index.vue

@@ -140,7 +140,7 @@ export default {
           this.sources = sources.map(source => {
             return {
               ...source,
-              url: getThumbnailUrl(source.keyName, 'x0.2,q30')
+              url: getThumbnailUrl(source.keyName)
             }
           })
         } else {