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", 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 } 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')) + } + }) +}