From c89e0adaf3f38d73328445d5a8d1537fcb2334f8 Mon Sep 17 00:00:00 2001 From: "liu.shiyi" Date: Mon, 16 Oct 2023 14:38:54 +0800 Subject: [PATCH 1/3] =?UTF-8?q?fix:=E4=BF=AE=E5=A4=8D=E6=8E=A7=E5=88=B6?= =?UTF-8?q?=E5=8F=B0=E6=8A=A5=E9=94=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- data-room-ui/packages/BasicComponents/Numbers/index.vue | 9 ++++++--- data-room-ui/packages/BasicComponents/Texts/index.vue | 7 +++++-- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/data-room-ui/packages/BasicComponents/Numbers/index.vue b/data-room-ui/packages/BasicComponents/Numbers/index.vue index 7c28dd4a..a1cf5bd7 100644 --- a/data-room-ui/packages/BasicComponents/Numbers/index.vue +++ b/data-room-ui/packages/BasicComponents/Numbers/index.vue @@ -40,13 +40,16 @@ export default { // 通过表达式计算得来的值 getDataByExpression (config) { // 如果表达式是由其他组件的值构成的 - if (this.config.expressionCodes && this.config.expressionCodes.length) { - // eslint-disable-next-line no-new-func + const len = this.config.expressionCodes ? this.config.expressionCodes.length : 0 + const len1 = this.currentComputedDatas ? Object.keys(this.currentComputedDatas).length : 0 + const len2 = this.currentDataset ? Object.keys(this.currentDataset).length : 0 + if (len && len === len1 + len2) { + // eslint-disable-next-line no-new-func const result = new Function('dataset', 'computedDatas', this.config.expression) config.customize.title = result(this.dataset, this.computedDatas) // 同时将计算得来的值保存到公共的数据存储的地方 this.updateComputedDatas({ code: config.code, name: config.name, data: config.customize.title }) - // this.changeChartConfig(config) + // this.changeChartConfig(config) } }, dataFormatting (config, data) { diff --git a/data-room-ui/packages/BasicComponents/Texts/index.vue b/data-room-ui/packages/BasicComponents/Texts/index.vue index 7c28dd4a..4f24012d 100644 --- a/data-room-ui/packages/BasicComponents/Texts/index.vue +++ b/data-room-ui/packages/BasicComponents/Texts/index.vue @@ -40,7 +40,10 @@ export default { // 通过表达式计算得来的值 getDataByExpression (config) { // 如果表达式是由其他组件的值构成的 - if (this.config.expressionCodes && this.config.expressionCodes.length) { + const len = this.config.expressionCodes ? this.config.expressionCodes.length : 0 + const len1 = this.currentComputedDatas ? Object.keys(this.currentComputedDatas).length : 0 + const len2 = this.currentDataset ? Object.keys(this.currentDataset).length : 0 + if (len && len === len1 + len2) { // eslint-disable-next-line no-new-func const result = new Function('dataset', 'computedDatas', this.config.expression) config.customize.title = result(this.dataset, this.computedDatas) @@ -53,7 +56,7 @@ export default { // 文本数据配置原则：选择数据集则以后端返回的数据为主，否则以设置面板中标题设置为准 if (config.dataSource.businessKey) { config.customize.title = data && data.data && data.data.length ? data.data[0][config.dataSource.metricField] : '暂无数据' - config.option.data = data && data.data && data.data.length ? data.data :[] + config.option.data = data && data.data && data.data.length ? data.data : [] } return config } From 23aeb20dbbb9dc8813f4c1ada6875b2acfe46323 Mon Sep 17 00:00:00 2001 From: "wu.jian2" Date: Mon, 16 Oct 2023 14:50:23 +0800 Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9=E8=AE=BE?= =?UTF-8?q?=E8=AE=A1=E5=99=A8=E3=80=81=E7=BB=84=E4=BB=B6=E8=AE=BE=E8=AE=A1?= =?UTF-8?q?=E4=BF=9D=E5=AD=98=E7=9A=84=E5=8E=8B=E7=BC=A9=E5=9B=BE=E7=89=87?= =?UTF-8?q?=E8=B5=84=E6=BA=90=E9=80=BB=E8=BE=91=EF=BC=8C=E4=B8=8D=E5=86=8D?= =?UTF-8?q?=E4=BD=BF=E7=94=A8=E6=8F=92=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../BigScreenDesign/PageDesignTop.vue | 29 +++++++------ data-room-ui/packages/BizComponent/index.vue | 35 +++++++++------- data-room-ui/packages/js/utils/compressImg.js | 42 ++++++++++++++++++- 3 files changed, 77 insertions(+), 29 deletions(-) diff --git a/data-room-ui/packages/BigScreenDesign/PageDesignTop.vue b/data-room-ui/packages/BigScreenDesign/PageDesignTop.vue index b6e45349..3df59a92 100644 --- a/data-room-ui/packages/BigScreenDesign/PageDesignTop.vue +++ b/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 } diff --git a/data-room-ui/packages/BizComponent/index.vue b/data-room-ui/packages/BizComponent/index.vue index c01c6036..dc1c9471 100644 --- a/data-room-ui/packages/BizComponent/index.vue +++ b/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 } diff --git a/data-room-ui/packages/js/utils/compressImg.js b/data-room-ui/packages/js/utils/compressImg.js index da9bbb39..8080af7c 100644 --- a/data-room-ui/packages/js/utils/compressImg.js +++ b/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')) + } + }) +} From e2494c0bad7ec741b7947110d10c22ba58117261 Mon Sep 17 00:00:00 2001 From: "wu.jian2" Date: Mon, 16 Oct 2023 14:52:06 +0800 Subject: [PATCH 3/3] =?UTF-8?q?refactor:=20=E5=8E=BB=E9=99=A4image-convers?= =?UTF-8?q?ion=E6=8F=92=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- data-room-ui/package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/data-room-ui/package.json b/data-room-ui/package.json index 0bda615d..c850698a 100644 --- a/data-room-ui/package.json +++ b/data-room-ui/package.json @@ -64,7 +64,6 @@ "es6-promise": "4.2.8", "gc-vue-draggable-resizable": "^1.0.1", "html-to-image": "1.11.11", - "image-conversion": "^2.1.1", "insert-css": "^2.0.0", "jquery": "^3.6.4", "lodash": "4.17.21",