From b85c9880dce48e7878ff0ede385c5859b370a90b Mon Sep 17 00:00:00 2001 From: maplepie <9009008+maplepie@users.noreply.github.com> Date: Wed, 23 Sep 2020 09:42:29 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E9=BB=98=E8=AE=A4=E4=BD=BF=E7=94=A8?= =?UTF-8?q?=E5=85=BC=E5=AE=B9=E6=A8=A1=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 默认使用兼容模式，避免扯皮。 --- web/public/index.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/web/public/index.html b/web/public/index.html index cee31e39..c891a74d 100644 --- a/web/public/index.html +++ b/web/public/index.html @@ -3,6 +3,7 @@ + @@ -17,4 +18,4 @@ - \ No newline at end of file + From 430aa4ca9a9377812f10d10e082d1415aa9212a9 Mon Sep 17 00:00:00 2001 From: ccfish Date: Fri, 9 Oct 2020 13:22:28 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E5=9B=BE=E7=89=87=E4=B8=8A=E4=BC=A0?= =?UTF-8?q?=E5=8E=8B=E7=BC=A9=EF=BC=88=E5=89=8D=E7=AB=AF=EF=BC=89=E5=8F=8A?= =?UTF-8?q?=E7=A4=BA=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/src/components/upload/image.vue | 100 +++++++++++++++++++++++++ web/src/utils/image.js | 99 ++++++++++++++++++++++++ web/src/view/example/upload/upload.vue | 55 +++++++++----- 3 files changed, 235 insertions(+), 19 deletions(-) create mode 100644 web/src/components/upload/image.vue create mode 100644 web/src/utils/image.js diff --git a/web/src/components/upload/image.vue b/web/src/components/upload/image.vue new file mode 100644 index 00000000..8f854f97 --- /dev/null +++ b/web/src/components/upload/image.vue @@ -0,0 +1,100 @@ + + + + + + \ No newline at end of file diff --git a/web/src/utils/image.js b/web/src/utils/image.js new file mode 100644 index 00000000..d54088c6 --- /dev/null +++ b/web/src/utils/image.js @@ -0,0 +1,99 @@ +export default class ImageCompress { + constructor(file, fileSize, maxWH = 1920) { + this.file = file + this.fileSize = fileSize + this.maxWH = maxWH // 最大长宽 + } + + compress() { + // 压缩 + const fileType = this.file.type + const fileSize = this.file.size / 1024 + return new Promise(resolve => { + const reader = new FileReader(); + reader.readAsDataURL(this.file); + reader.onload = () => { + const canvas = document.createElement('canvas'); + const img = document.createElement('img'); + img.src = reader.result; + img.onload = () => { + const ctx = canvas.getContext('2d'); + let _dWH = this.dWH(img.width, img.height, this.maxWH) + canvas.width = _dWH.width + canvas.height = _dWH.height + + // 清空后, 重写画布 + ctx.clearRect(0, 0, canvas.width, canvas.height) + ctx.drawImage(img, 0, 0, canvas.width, canvas.height) + + let newImgData = canvas.toDataURL(fileType, 0.90) + + // 压缩宽高后的图像大小 + let newImgSize = this.fileSizeKB(newImgData) + + if (newImgSize > this.fileSize) { + console.log('图片尺寸太大!' + fileSize + " >> " + newImgSize) + reject(`图片尺寸太大!`) + } + + let blob = this.dataURLtoBlob(newImgData, fileType) + let nfile = new File([blob], this.file.name); + resolve(nfile) + }; + }; + }); + } + + /* + * 长宽等比缩小 + * 图像的一边(长或宽)为最大目标值 + * */ + dWH(srcW, srcH, dMax) { + + let defaults = { + width: srcW, + height: srcH + } + if (Math.max(srcW, srcH) > dMax) { + if (srcW > srcH) { + defaults.width = dMax + defaults.height = Math.round(srcH * (dMax / srcW)) + return defaults + } else { + defaults.height = dMax + defaults.width = Math.round(srcW * (dMax / srcH)) + return defaults + } + } else { + return defaults + } + } + + fileSizeKB(dataURL) { + let self = this + + let sizeKB = 0 + sizeKB = Math.round((dataURL.split(',')[1].length * 3 / 4) / 1024) + return sizeKB + } + + /* + * 转为Blob + * */ + dataURLtoBlob(dataURL, fileType) { + let self = this + + let byteString = atob(dataURL.split(',')[1]) + let mimeString = dataURL.split(',')[0].split(':')[1].split(';')[0] + let ab = new ArrayBuffer(byteString.length) + let ia = new Uint8Array(ab) + for (let i = 0; i < byteString.length; i++) { + ia[i] = byteString.charCodeAt(i) + } + if (fileType) { + mimeString = fileType + } + return new Blob([ab], { type: mimeString, lastModifiedDate: new Date() }) + } + +} \ No newline at end of file diff --git a/web/src/view/example/upload/upload.vue b/web/src/view/example/upload/upload.vue index 7e3eaa17..c1dfdec1 100644 --- a/web/src/view/example/upload/upload.vue +++ b/web/src/view/example/upload/upload.vue @@ -1,23 +1,33 @@