添加图片修改

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,94 +96,89 @@ export default class Export {
         }, type)
       })
     } else {
-
+      return canvas.toDataURL(type)
-	  return await this.compressImg(canvas.toDataURL(type), 1, 0.2,type)
-
     }
   }
-	/**
+  /**
-	 * 压缩base64图片的函数
+   * 压缩base64图片的函数
-	 *
+   *
-	 * @param {string} base64 - 图片的base64编码
+   * @param {string} base64 - 图片的base64编码
-	 * @param {number} multiple - 缩放比例
+   * @param {number} multiple - 缩放比例
-	 * @param {number} quality - 输出图片的质量（0.0到1.0之间）
+   * @param {number} quality - 输出图片的质量（0.0到1.0之间）
-	 * @param {string} format - 输出图片的格式，默认为"image/webp" 可选参数 image/png、image/jpeg、image/webp 等
+   * @param {string} format - 输出图片的格式，默认为"image/webp" 可选参数 image/png、image/jpeg、image/webp 等
-	 * @param {number} min - 压缩后图片的最小KB大小
+   * @param {number} min - 压缩后图片的最小KB大小
-	 * @param {number} max - 压缩后图片的最大KB大小
+   * @param {number} max - 压缩后图片的最大KB大小
-	 * @returns {Promise<string>} - 返回压缩后的图片的base64编码
+   * @returns {Promise<string>} - 返回压缩后的图片的base64编码
-	 */
+   */
 
+  compressImg(base64, multiple, quality, format = 'image/webp', min, max) {
+    return new Promise((resolve, reject) => {
+      try {
+        // 如果base64为空，则直接返回
+        if (!base64) {
+          return
+        }
+        // 创建一个新的Image对象
+        let newImage = new Image()
+        // 设置Image对象的src为传入的base64编码
+        newImage.src = base64
+        // 设置crossOrigin属性为'Anonymous'，用于处理跨域图片
+        newImage.setAttribute('crossOrigin', 'Anonymous')
 
-	compressImg(base64, multiple, quality, format = "image/webp", min, max) {
+        // 定义图片的宽度、高度和缩放比例
-	  return new Promise((resolve, reject) => {
+        let imgWidth, imgHeight, proportion
-	    try {
-	        // 如果base64为空，则直接返回
-	        if (!base64) {
-	            return;
-	        }
-	        // 创建一个新的Image对象
-	        let newImage = new Image();
-	        // 设置Image对象的src为传入的base64编码
-	        newImage.src = base64;
-	        // 设置crossOrigin属性为'Anonymous'，用于处理跨域图片
-	        newImage.setAttribute('crossOrigin', 'Anonymous');
 
-	        // 定义图片的宽度、高度和缩放比例
+        // 当图片加载完成后执行的操作
-	        let imgWidth, imgHeight, proportion;
+        newImage.onload = function () {
+          // 计算缩放后的宽度
+          proportion = this.width * multiple
+          // 记录原始宽度和高度
+          imgWidth = this.width
+          imgHeight = this.height
 
-	        // 当图片加载完成后执行的操作
+          // 创建一个canvas元素
-	        newImage.onload = function() {
+          let canvas = document.createElement('canvas')
-	            // 计算缩放后的宽度
+          // 获取canvas的2D渲染上下文
-	            proportion = this.width * multiple;
+          let ctx = canvas.getContext('2d')
-	            // 记录原始宽度和高度
-	            imgWidth = this.width;
-	            imgHeight = this.height;
 
-	            // 创建一个canvas元素
+          // 设置canvas的宽高，按照等比例缩放
-	            let canvas = document.createElement('canvas');
+          // 等比例缩小放大
-	            // 获取canvas的2D渲染上下文
+          canvas.width = proportion
-	            let ctx = canvas.getContext('2d');
+          canvas.height = proportion * (imgHeight / imgWidth)
 
-	            // 设置canvas的宽高，按照等比例缩放
+          // 清除canvas上的内容
-	            // 等比例缩小放大
+          ctx.clearRect(0, 0, canvas.width, canvas.height)
-	            canvas.width = proportion;
-	            canvas.height = proportion * (imgHeight / imgWidth);
 
-	            // 清除canvas上的内容
+          // 在canvas上绘制缩放后的图片
-	            ctx.clearRect(0, 0, canvas.width, canvas.height);
+          ctx.drawImage(this, 0, 0, canvas.width, canvas.height)
 
-	            // 在canvas上绘制缩放后的图片
+          // 将canvas转换为base64编码的图片
-	            ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
+          let smallBase64 = canvas.toDataURL(format, quality)
-	
-	            // 将canvas转换为base64编码的图片
-	            let smallBase64 = canvas.toDataURL(format, quality);
-	
-	            // 如果设置了最小KB大小，并且压缩后的图片大小小于最小KB大小，则增加质量并重新压缩
-	            if (min && smallBase64.length / 1024 < min) {
-	                while (smallBase64.length / 1024 < min) {
-	                    quality += 0.01;
-	                    smallBase64 = canvas.toDataURL(format, quality);
-	                }
-	            }
-	            // 如果设置了最大KB大小，并且压缩后的图片大小大于最大KB大小，则减小质量并重新压缩
-	            else if (max && smallBase64.length / 1024 > max) {
-	                while (smallBase64.length / 1024 > max) {
-	                    quality -= 0.01;
-	                    smallBase64 = canvas.toDataURL(format, quality);
-	                }
-	            }
-	
-	            // 将压缩后的图片的base64编码作为Promise的解决值返回
-	            resolve(smallBase64);
-	        };
-	    } catch (error) {
-	        reject(error)
-	        throw new Error(error);
-	    }
-	 });
-	}
 
+          // 如果设置了最小KB大小，并且压缩后的图片大小小于最小KB大小，则增加质量并重新压缩
+          if (min && smallBase64.length / 1024 < min) {
+            while (smallBase64.length / 1024 < min) {
+              quality += 0.01
+              smallBase64 = canvas.toDataURL(format, quality)
+            }
+          }
+          // 如果设置了最大KB大小，并且压缩后的图片大小大于最大KB大小，则减小质量并重新压缩
+          else if (max && smallBase64.length / 1024 > max) {
+            while (smallBase64.length / 1024 > max) {
+              quality -= 0.01
+              smallBase64 = canvas.toDataURL(format, quality)
+            }
+          }
 
+          // 将压缩后的图片的base64编码作为Promise的解决值返回
+          resolve(smallBase64)
+        }
+      } catch (error) {
+        reject(error)
+        throw new Error(error)
+      }
+    })
+  }
 
   // 保存app类当前状态数据
   saveAppState() {

src/ImageEdit.js

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