添加图片修改

package.json

@@ -1,6 +1,6 @@
 {
   "name": "whiteboard_lyc",
-  "version": "0.1.3",
+  "version": "0.1.7",
   "description": "一个简单的在线白板",
   "authors": [
     {

src/Export.js

@@ -50,14 +50,13 @@ export default class Export {
   }
 
   // 导出为图片
-  async exportImage({
+  exportImage({
     type = 'image/png',
     renderBg = true,
     useBlob = false,
     paddingX = 10,
     paddingY = 10,
-    onlySelected,
+    onlySelected
-    backgroundColor
   } = {}) {
     // 计算所有元素的外包围框
     let { minx, maxx, miny, maxy } = getMultiElementRectInfo(
@@ -65,11 +64,6 @@ export default class Export {
     )
     let width = maxx - minx + paddingX * 2
     let height = maxy - miny + paddingY * 2
-	if(!width && !height){
-		width = this.app.width
-		height = this.app.height
-    backgroundColor = '#ffffff'
-	}
     // 创建导出canvas
     let { canvas, ctx } = createCanvas(width, height, {
       noStyle: true,
@@ -79,12 +73,12 @@ export default class Export {
     this.saveAppState()
     this.changeAppState(minx - paddingX, miny - paddingY, ctx)
     // 绘制背景颜色
-    if (renderBg && backgroundColor ? backgroundColor : this.app.state.backgroundColor) {
+    if (renderBg && this.app.state.backgroundColor) {
       this.app.background.canvasAddBackgroundColor(
         ctx,
         width,
         height,
-		backgroundColor
+        this.app.state.backgroundColor
       )
     }
     // 绘制元素到导出canvas
@@ -102,9 +96,7 @@ export default class Export {
         }, type)
       })
     } else {
-
+      return canvas.toDataURL(type)
-	  return await this.compressImg(canvas.toDataURL(type), 1, 0.2,type)
-
     }
   }
   /**
@@ -119,78 +111,75 @@ export default class Export {
    * @returns {Promise<string>} - 返回压缩后的图片的base64编码
    */
 
-	
+  compressImg(base64, multiple, quality, format = 'image/webp', min, max) {
-	compressImg(base64, multiple, quality, format = "image/webp", min, max) {
     return new Promise((resolve, reject) => {
       try {
         // 如果base64为空，则直接返回
         if (!base64) {
-	            return;
+          return
         }
         // 创建一个新的Image对象
-	        let newImage = new Image();
+        let newImage = new Image()
         // 设置Image对象的src为传入的base64编码
-	        newImage.src = base64;
+        newImage.src = base64
         // 设置crossOrigin属性为'Anonymous'，用于处理跨域图片
-	        newImage.setAttribute('crossOrigin', 'Anonymous');
+        newImage.setAttribute('crossOrigin', 'Anonymous')
 
         // 定义图片的宽度、高度和缩放比例
-	        let imgWidth, imgHeight, proportion;
+        let imgWidth, imgHeight, proportion
 
         // 当图片加载完成后执行的操作
-	        newImage.onload = function() {
+        newImage.onload = function () {
           // 计算缩放后的宽度
-	            proportion = this.width * multiple;
+          proportion = this.width * multiple
           // 记录原始宽度和高度
-	            imgWidth = this.width;
+          imgWidth = this.width
-	            imgHeight = this.height;
+          imgHeight = this.height
 
           // 创建一个canvas元素
-	            let canvas = document.createElement('canvas');
+          let canvas = document.createElement('canvas')
           // 获取canvas的2D渲染上下文
-	            let ctx = canvas.getContext('2d');
+          let ctx = canvas.getContext('2d')
 
           // 设置canvas的宽高，按照等比例缩放
           // 等比例缩小放大
-	            canvas.width = proportion;
+          canvas.width = proportion
-	            canvas.height = proportion * (imgHeight / imgWidth);
+          canvas.height = proportion * (imgHeight / imgWidth)
 
           // 清除canvas上的内容
-	            ctx.clearRect(0, 0, canvas.width, canvas.height);
+          ctx.clearRect(0, 0, canvas.width, canvas.height)
 
           // 在canvas上绘制缩放后的图片
-	            ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
+          ctx.drawImage(this, 0, 0, canvas.width, canvas.height)
 
           // 将canvas转换为base64编码的图片
-	            let smallBase64 = canvas.toDataURL(format, quality);
+          let smallBase64 = canvas.toDataURL(format, quality)
 
           // 如果设置了最小KB大小，并且压缩后的图片大小小于最小KB大小，则增加质量并重新压缩
           if (min && smallBase64.length / 1024 < min) {
             while (smallBase64.length / 1024 < min) {
-	                    quality += 0.01;
+              quality += 0.01
-	                    smallBase64 = canvas.toDataURL(format, quality);
+              smallBase64 = canvas.toDataURL(format, quality)
             }
           }
           // 如果设置了最大KB大小，并且压缩后的图片大小大于最大KB大小，则减小质量并重新压缩
           else if (max && smallBase64.length / 1024 > max) {
             while (smallBase64.length / 1024 > max) {
-	                    quality -= 0.01;
+              quality -= 0.01
-	                    smallBase64 = canvas.toDataURL(format, quality);
+              smallBase64 = canvas.toDataURL(format, quality)
             }
           }
 
           // 将压缩后的图片的base64编码作为Promise的解决值返回
-	            resolve(smallBase64);
+          resolve(smallBase64)
-	        };
+        }
       } catch (error) {
         reject(error)
-	        throw new Error(error);
+        throw new Error(error)
       }
-	 });
+    })
   }
 
-
-
   // 保存app类当前状态数据
   saveAppState() {
     let { width, height, state, ctx } = this.app

src/ImageEdit.js

@@ -71,17 +71,23 @@ export default class ImageEdit extends EventEmitter {
       img.onload = () => {
         let width = img.width
         let height = img.height
-        // 图片过大，缩小宽高
+        
+        let appWidth = this.app.width
+        let appHeight = this.app.height
+        if(width > appWidth && height > appHeight){
+          let ratio = (appWidth / width) - 0.2
+          console.log(ratio)
+          this.app.setZoom(ratio)
+        }
+        if(height > appHeight && width <= appWidth){
+          let ratio = (appHeight / height) 
+          this.app.setZoom(ratio)
+        }
+        if(width >= appWidth && height <= appHeight){
+          let ratio = (appWidth / width) - 0.2
+          this.app.setZoom(ratio)
+        }
         let ratio = img.width / img.height
-        if (img.width > this.maxWidth || img.height > this.maxHeight) {
-          if (ratio > this.maxRatio) {
-            width = this.maxWidth
-            height = this.maxWidth / ratio
-          } else {
-            height = this.maxHeight
-            width = this.maxHeight * ratio
-          }
-        }
         resolve({
           imageObj: img,
           size: {