图片上传压缩校正

import Exif from ‘exif-js‘;/* eslint-disable func-names */function ImageProcess(file, callback) { ?let Orientation; ?// 去获取拍照时的信息，解决拍出来的照片旋转问题 ?Exif.getData(file, function () { ???Orientation = Exif.getTag(this, ‘Orientation‘); ?}); ?// console.log("Orientation", Orientation); ?// 看支持不支持FileReader ?if (!file || !window.FileReader) return; ?if (/^image/.test(file.type)) { ???// 创建一个reader ???const reader = new window.FileReader(); ???// 将图片2将转成 base64 格式 ???reader.readAsDataURL(file); ???// 读取成功后的回调 ???reader.onloadend = function () { ?????const img = new window.Image(); ?????img.src = this.result; ?????img.onload = function () { ???????// 压缩图片 ???????const data = ImageCompress(img, Orientation); ???????// console.log(dataURItoBlob(data)); ???????callback(data); ?????}; ???}; ?}}function ImageCompress(img, Orientation) { ?const canvas = document.createElement(‘canvas‘); ?const ctx = canvas.getContext(‘2d‘); ?// 瓦片canvas ?const tCanvas = document.createElement(‘canvas‘); ?const tctx = tCanvas.getContext(‘2d‘); ?let { width, height } = img; ?// 如果图片大于四百万像素，计算压缩比并将大小压至400万以下 ?let ratio = (width * height) / 4000000; ?if (ratio > 1) { ???ratio = Math.sqrt(ratio); ???width /= ratio; ???height /= ratio; ?} else { ???ratio = 1; ?} ?canvas.width = width; ?canvas.height = height; ?// 铺底色 ?ctx.fillStyle = ‘#fff‘; ?ctx.fillRect(0, 0, canvas.width, canvas.height); ?// 如果图片像素大于100万则使用瓦片绘制 ?let count = (width * height) / 1000000; ?if (count > 1) { ???// 计算要分成多少块瓦片 ???count = ~~(Math.sqrt(count) + 1); ???// 计算每块瓦片的宽和高 ???const nw = ~~(width / count); ???const nh = ~~(height / count); ???tCanvas.width = nw; ???tCanvas.height = nh; ???for (let i = 0; i < count; i += 1) { ?????for (let j = 0; j < count; j += 1) { ???????tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh); ???????ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh); ?????} ???} ?} else { ???ctx.drawImage(img, 0, 0, width, height); ?} ?// 修复ios上传图片的时候 被旋转的问题 ?if (Orientation && Orientation !== 1) { ???switch (Orientation) { ?????case 6: // 需要顺时针（向左）90度旋转 ???????rotateImg(img, ‘left‘, canvas); ???????break; ?????case 8: // 需要逆时针（向右）90度旋转 ???????rotateImg(img, ‘right‘, canvas); ???????break; ?????case 3: // 需要180度旋转 转两次 ???????rotateImg(img, ‘right‘, canvas); ???????rotateImg(img, ‘right‘, canvas); ???????break; ?????default: break; ???} ?} ?// 进行最小压缩 ?const ndata = canvas.toDataURL(‘image/jpeg‘, 0.5); ?// 清除canvas画布的宽高 ?tCanvas.width = 0; ?tCanvas.height = 0; ?canvas.width = 0; ?canvas.height = 0; ?// 打印压缩前后的大小，以及压缩比率 ?// const initSize = img.src.length; ?// console.log(‘压缩前：‘ + initSize); ?// console.log(‘压缩后：‘ + ndata.length); ?// console.log(‘压缩率：‘ + ~~(100 * (initSize - ndata.length) / initSize) + "%"); ?// console.log(ndata); ?return ndata;}function rotateImg(img, direction, cvs) { ?const canvas = cvs; ?// 最小与最大旋转方向，图片旋转4次后回到原方向 ?const minStep = 0; ?const maxStep = 3; ?if (img == null) return; ?// img的高度和宽度不能在img元素隐藏后获取，否则会出错 ?const { width, height } = img; ?let step = 2; ?if (step == null) { ???step = minStep; ?} ?if (direction === ‘right‘) { ???step += 1; ???// 旋转到原位置，即超过最大值 ???if (step > maxStep) step = minStep; ?} else { ???step -= 1; ???if (step < minStep) step = maxStep; ?} ?// 旋转角度以弧度值为参数 ?const degree = (step * 90 * Math.PI) / 180; ?const ctx = canvas.getContext(‘2d‘); ?switch (step) { ???case 0: ?????canvas.width = width; ?????canvas.height = height; ?????ctx.drawImage(img, 0, 0); ?????break; ???case 1: ?????canvas.width = height; ?????canvas.height = width; ?????ctx.rotate(degree); ?????ctx.drawImage(img, 0, -height); ?????break; ???case 2: ?????canvas.width = width; ?????canvas.height = height; ?????ctx.rotate(degree); ?????ctx.drawImage(img, -width, -height); ?????break; ???case 3: ?????canvas.width = height; ?????canvas.height = width; ?????ctx.rotate(degree); ?????ctx.drawImage(img, -width, 0); ?????break; ???default: break; ?}}function dataURItoBlob(dataURI) { ?const byteString = window.atob(dataURI.split(‘,‘)[1]); ?const mimeString = dataURI.split(‘,‘)[0].split(‘:‘)[1].split(‘;‘)[0]; ?// const ab = new ArrayBuffer(byteString.length); ?const ia = new Uint8Array(byteString.length); ?for (let i = 0; i < byteString.length; i += 1) { ???ia[i] = byteString.charCodeAt(i); ?} ?return new window.Blob([ia], { type: mimeString });}export default ImageProcess;