import React from 'react';//import logo from './logo.svg';
import './App.css';functionApp() {
const handleChange= e =>{
e.persist()//为了看到原生file的内容,不加这句,原生file内容会被react隐藏
let fileObj = e.target.files[0]//console.log(e)
console.log(fileObj)//设定标准上限为1MB,进行压缩处理
compress(fileObj, 1024, (data) =>{
console.log(data)
})
}//异步读取图片的promise
const loadImageAsync = (url) =>{return new Promise(function(resolve, reject) {
const image= newImage()
image.οnlοad= function() {
resolve(image)
};
image.οnerrοr= function() {
reject(new Error('Could not load image at ' +url))
};
image.src=url
})
}//异步转换成base64编码的promise
const fileToImgAsync = (file) =>{return new Promise(function(resolve, reject) {
const reader= newFileReader()
reader.οnlοad= function(e) {
resolve(e.target.result);
};
reader.οnerrοr= function() {
reject(new Error('readAsDataURL:fail'))
};
reader.readAsDataURL(file)
});
}
const downloadFileByBlob= (blobUrl, filename) =>{
const a= document.createElement('a')
a.download=filename
a.style.display= 'none'a.href=blobUrl//触发点击
document.body.appendChild(a)
a.click()//然后移除
document.body.removeChild(a)
}//async 搭配 promise 使用
const compress = async (file, maxSizeKB, succFunc) =>{if (file.size > maxSizeKB * 1024) {
let rate= 0 //压缩率
//文件转图片
const dataUrl =await fileToImgAsync(file)//图片转画布
const image =await loadImageAsync(dataUrl)//console.log(dataUrl, image)
//文件大小KB, file.size给的是字节Byte
const fileSizeKB = file.size / 1024console.log(fileSizeKB)//当图片大小超标,才进行压缩
if (fileSizeKB >maxSizeKB) {//计算压缩率
rate = (fileSizeKB - maxSizeKB) /fileSizeKB
console.log('压缩率:', rate)
console.log('压缩后文件大小:', fileSizeKB * (1 - rate), 'kb')
}//纠正因子,不加会导致压缩出的文件太小
const factor = 0.2
//画布执行压缩
let canvas = document.createElement('canvas')
let context= canvas.getContext('2d')
const cvWidth= image.width * (1 - rate +factor)
const cvHeight= image.height * (1 - rate +factor)
console.log(image.width, image.height, cvWidth, cvHeight)
canvas.height=cvHeight
canvas.width=cvWidth
context.clearRect(0, 0, cvWidth, cvHeight)
context.drawImage(image,0, 0, cvWidth, cvWidth)//导出图片
canvas.toBlob((blob) =>{//方式一:下载到本地
const blobUrl =window.URL.createObjectURL(blob)
downloadFileByBlob(blobUrl, file.name)//方式二:生成网页可读取的对象
//const newImage = new File([blob], file.name, { type: file.type });
//succFunc(newImage)
});
}
}return(
);
}
exportdefault App;