feat: 修改设计器、组件设计保存的压缩图片资源逻辑，不再使用插件

data-room-ui/packages/BigScreenDesign/PageDesignTop.vue

@@ -131,10 +131,9 @@ import icons from 'data-room-ui/assets/images/alignIcon/export'
 import IconSvg from 'data-room-ui/SvgIcon'
 import {
   showSize,
-  dataURLtoBlob,
-  translateBlobToBase64
+  compressImage
 } from 'data-room-ui/js/utils/compressImg'
-import * as imageConversion from 'image-conversion'
+// import * as imageConversion from 'image-conversion'
 export default {
   name: 'PageTopSetting',
   components: {
@@ -449,15 +448,21 @@ export default {
           }
           if (dataUrl) {
             if (showSize(dataUrl) > 200) {
-              const url = dataURLtoBlob(dataUrl)
-              // 压缩到500KB,这里的500就是要压缩的大小,可自定义
-              const imgRes = await imageConversion.compressAccurately(url, {
-                size: 200, // 图片大小压缩到100kb
-                width: 1280, // 宽度压缩到1280
-                height: 720 // 高度压缩到720
-              })
-              const base64 = await translateBlobToBase64(imgRes)
-              pageInfo.coverPicture = base64.result
+              // const newData = compressImage(dataUrl, 800)
+              // console.log(111, newData)
+              // const url = dataURLtoBlob(dataUrl)
+              // // 压缩到500KB,这里的500就是要压缩的大小,可自定义
+              // const imgRes = await imageConversion.compressAccurately(url, {
+              //   size: 200, // 图片大小压缩到100kb
+              //   width: 1280, // 宽度压缩到1280
+              //   height: 720 // 高度压缩到720
+              // })
+              // const base64 = await translateBlobToBase64(imgRes)
+              // pageInfo.coverPicture = base64.result
+              this.$message.info('由于封面图片过大，进行压缩中')
+              const compressCoverPicture = await compressImage(dataUrl, { width: 1280, height: 720, size: 400, quality: 1 })
+              console.log(showSize(compressCoverPicture))
+              pageInfo.coverPicture = compressCoverPicture
             } else {
               pageInfo.coverPicture = dataUrl
             }

data-room-ui/packages/BizComponent/index.vue

@@ -156,10 +156,11 @@ import 'codemirror/mode/vue/vue.js'
 
 import {
   showSize,
-  dataURLtoBlob,
-  translateBlobToBase64
+  compressImage
+  // dataURLtoBlob,
+  // translateBlobToBase64
 } from 'data-room-ui/js/utils/compressImg'
-import * as imageConversion from 'image-conversion'
+// import * as imageConversion from 'image-conversion'
 
 export default {
   name: 'BizComponentDesign',
@@ -354,20 +355,22 @@ export default {
       }
       if (dataUrl) {
         if (showSize(dataUrl) > 200) {
-          const url = dataURLtoBlob(dataUrl)
+          // const url = dataURLtoBlob(dataUrl)
           // 压缩到500KB,这里的500就是要压缩的大小,可自定义
-          imageConversion.compressAccurately(
-            url,
-            {
-              size: 200, // 图片大小压缩到100kb
-              width: 1280, // 宽度压缩到1280
-              height: 720 // 高度压缩到720
-            }
-          ).then((res) => {
-            translateBlobToBase64(res, (e) => {
-              this.form.coverPicture = e.result
-            })
-          })
+          // imageConversion.compressAccurately(
+          //   url,
+          //   {
+          //     size: 200, // 图片大小压缩到100kb
+          //     width: 1280, // 宽度压缩到1280
+          //     height: 720 // 高度压缩到720
+          //   }
+          // ).then((res) => {
+          //   translateBlobToBase64(res, (e) => {
+          //     this.form.coverPicture = e.result
+          //   })
+          // })
+          this.$message.info('由于封面图片过大，进行压缩中')
+          this.form.coverPicture = await compressImage(dataUrl, { width: 1280, height: 720, size: 400, quality: 1 })
         } else {
           this.form.coverPicture = dataUrl
         }

data-room-ui/packages/js/utils/compressImg.js

@@ -19,7 +19,7 @@ export function showSize (base64url) {
     // 判断后两位是否为00，如果是则删除00
     return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2)
   }
-  return size
+  return Number(size)
 }
 
 export function dataURLtoFile (dataurl, filename) {
@@ -58,3 +58,43 @@ export function translateBlobToBase64 (blob, callback) {
   reader.readAsDataURL(blob)
   // 读取后，result属性中将包含一个data:URL格式的Base64字符串用来表示所读取的文件
 }
+
+// 压缩方法
+export function compressImage (base64, { width: w = 1280, height: h = 720, size = 200, quality = 1 }) {
+  return new Promise((resolve, reject) => {
+    const newImage = new Image()
+    newImage.src = base64
+    newImage.setAttribute('crossOrigin', 'Anonymous')
+    let imgWidth, imgHeight
+    newImage.onload = function () {
+      imgWidth = 1280
+      imgHeight = 720
+      const canvas = document.createElement('canvas')
+      const ctx = canvas.getContext('2d')
+      if (Math.max(imgWidth, imgHeight) > w) {
+        if (imgWidth > imgHeight) {
+          canvas.width = w
+          canvas.height = w * imgHeight / imgWidth
+        } else {
+          canvas.height = w
+          canvas.width = w * imgWidth / imgHeight
+        }
+      } else {
+        canvas.width = imgWidth
+        canvas.height = imgHeight
+        quality = 1
+      }
+
+      ctx.clearRect(0, 0, canvas.width, canvas.height)
+      ctx.drawImage(this, 0, 0, canvas.width, canvas.height)
+      let compressedBase64 = canvas.toDataURL('image/jpeg', quality) // 压缩语句
+      if (showSize(compressedBase64) > Number(size)) {
+        compressedBase64 = canvas.toDataURL('image/jpeg', quality - 0.2 > 0.4 ? quality - 0.2 : 0.4)
+      }
+      resolve(compressedBase64)
+    }
+    newImage.onerror = function () {
+      reject(new Error('Failed to load image'))
+    }
+  })
+}