refactor: image compression algorithm

src/api/asset.js

@@ -61,7 +61,7 @@ export function getAssetUrl (keyName) {
 }
 
 const LIMIT_SIZE = 1024 * 1024
-export function getThumbnailUrl (item, ratio = 'x0.2,q30') {
+export function getThumbnailUrl (item, option) {
   let url
   if (item && typeof item === 'object') {
     const { size, keyName } = item
@@ -69,13 +69,24 @@ export function getThumbnailUrl (item, ratio = 'x0.2,q30') {
       return getAssetUrl(keyName)
     }
     url = getAssetUrl(keyName)
+    option = getImageProxyOption(option, size)
   } else {
     url = getAssetUrl(item)
+    option = getImageProxyOption(option)
   }
   if (url.charAt(0) === '/') {
     url = `${location.origin}${url}`
   }
-  return `${process.env.VUE_APP_THUMBNAIL}/${ratio}/${url}`
+  return `${process.env.VUE_APP_THUMBNAIL}/${option}/${url}`
+}
+
+function getImageProxyOption (option, size) {
+  switch (option) {
+    case 'size':
+      return size ? `q${Math.ceil(LIMIT_SIZE * 100 / size)}` : 'q60'
+    default:
+      return option || 'x0.2,q30'
+  }
 }
 
 export function submitAsset ({ keyName, originalName }) {

src/views/bigscreen/ast/core/widget/CImage.vue

@@ -114,17 +114,17 @@ export default {
     },
     slideStyles () {
       return {
-        'background-image': this.img ? `url(${getThumbnailUrl(this.img)})` : 'none'
+        'background-image': this.img ? `url(${getThumbnailUrl(this.img, 'size')})` : 'none'
       }
     },
     flipFrontStyles () {
       return {
-        'background-image': this.frontImage ? `url(${getThumbnailUrl(this.frontImage)})` : 'none'
+        'background-image': this.frontImage ? `url(${getThumbnailUrl(this.frontImage, 'size')})` : 'none'
       }
     },
     flipBackStyles () {
       return {
-        'background-image': this.backImage ? `url(${getThumbnailUrl(this.backImage)})` : 'none'
+        'background-image': this.backImage ? `url(${getThumbnailUrl(this.backImage, 'size')})` : 'none'
       }
     },
     isNormal () {

src/views/bigscreen/ast/core/widget/CMedia.vue

@@ -75,7 +75,7 @@ export default {
       return this.source?.type === AssetType.IMAGE
     },
     imageStyles () {
-      return this.isImage ? { 'background-image': `url(${getThumbnailUrl(this.source.keyName)})` } : null
+      return this.isImage ? { 'background-image': `url(${getThumbnailUrl(this.source, 'size')})` } : null
     },
     isVideo () {
       return this.source?.type === AssetType.VIDEO

src/views/bigscreen/ast/mixin.js

@@ -61,7 +61,7 @@ export default {
         const { backgroundImage, backgroundColor } = this.node
         return {
           'background-color': backgroundColor,
-          'background-image': backgroundImage[0] ? `url("${getThumbnailUrl(backgroundImage[0])}")` : 'none'
+          'background-image': backgroundImage[0] ? `url("${getThumbnailUrl(backgroundImage[0], 'size')}")` : 'none'
         }
       }
       return null