From 863092b21bb09ac9b7339010d74d97327ad91c5e Mon Sep 17 00:00:00 2001 From: lyc Date: Thu, 14 Nov 2024 16:58:27 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=9B=BE=E7=89=87=E4=BF=AE?= =?UTF-8?q?=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- src/Export.js | 179 ++++++++++++++++++++++------------------------- src/ImageEdit.js | 26 ++++--- 3 files changed, 101 insertions(+), 106 deletions(-) diff --git a/package.json b/package.json index cf839f5..3bb84e2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "whiteboard_lyc", - "version": "0.1.3", + "version": "0.1.7", "description": "一个简单的在线白板", "authors": [ { diff --git a/src/Export.js b/src/Export.js index 5b7afd8..ef7a844 100644 --- a/src/Export.js +++ b/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, - backgroundColor + onlySelected } = {}) { // 计算所有元素的外包围框 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 await this.compressImg(canvas.toDataURL(type), 1, 0.2,type) - + return canvas.toDataURL(type) } } - /** - * 压缩base64图片的函数 - * - * @param {string} base64 - 图片的base64编码 - * @param {number} multiple - 缩放比例 - * @param {number} quality - 输出图片的质量（0.0到1.0之间） - * @param {string} format - 输出图片的格式，默认为"image/webp" 可选参数 image/png、image/jpeg、image/webp 等 - * @param {number} min - 压缩后图片的最小KB大小 - * @param {number} max - 压缩后图片的最大KB大小 - * @returns {Promise} - 返回压缩后的图片的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'); - - // 定义图片的宽度、高度和缩放比例 - let imgWidth, imgHeight, proportion; - - // 当图片加载完成后执行的操作 - newImage.onload = function() { - // 计算缩放后的宽度 - proportion = this.width * multiple; - // 记录原始宽度和高度 - imgWidth = this.width; - imgHeight = this.height; - - // 创建一个canvas元素 - let canvas = document.createElement('canvas'); - // 获取canvas的2D渲染上下文 - let ctx = canvas.getContext('2d'); - - // 设置canvas的宽高，按照等比例缩放 - // 等比例缩小放大 - canvas.width = proportion; - canvas.height = proportion * (imgHeight / imgWidth); - - // 清除canvas上的内容 - ctx.clearRect(0, 0, canvas.width, canvas.height); - - // 在canvas上绘制缩放后的图片 - ctx.drawImage(this, 0, 0, canvas.width, canvas.height); - - // 将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); - } - }); - } - + /** + * 压缩base64图片的函数 + * + * @param {string} base64 - 图片的base64编码 + * @param {number} multiple - 缩放比例 + * @param {number} quality - 输出图片的质量（0.0到1.0之间） + * @param {string} format - 输出图片的格式，默认为"image/webp" 可选参数 image/png、image/jpeg、image/webp 等 + * @param {number} min - 压缩后图片的最小KB大小 + * @param {number} max - 压缩后图片的最大KB大小 + * @returns {Promise} - 返回压缩后的图片的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') + + // 定义图片的宽度、高度和缩放比例 + let imgWidth, imgHeight, proportion + + // 当图片加载完成后执行的操作 + newImage.onload = function () { + // 计算缩放后的宽度 + proportion = this.width * multiple + // 记录原始宽度和高度 + imgWidth = this.width + imgHeight = this.height + + // 创建一个canvas元素 + let canvas = document.createElement('canvas') + // 获取canvas的2D渲染上下文 + let ctx = canvas.getContext('2d') + + // 设置canvas的宽高，按照等比例缩放 + // 等比例缩小放大 + canvas.width = proportion + canvas.height = proportion * (imgHeight / imgWidth) + + // 清除canvas上的内容 + ctx.clearRect(0, 0, canvas.width, canvas.height) + + // 在canvas上绘制缩放后的图片 + ctx.drawImage(this, 0, 0, canvas.width, canvas.height) + + // 将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) + } + }) + } // 保存app类当前状态数据 saveAppState() { diff --git a/src/ImageEdit.js b/src/ImageEdit.js index 82b14e9..4642898 100644 --- a/src/ImageEdit.js +++ b/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 - 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 - } + + 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 resolve({ imageObj: img, size: {