需求:将图片压缩之后再进行预览和上传
一、大致的html和css
html
<img id="img" />
<input type="file" id="file" multiple="multiple" onchange="handleFile()">
css
#img{
display: block;
width: 100px;
height: 100px;
background-color: red;
}
页面效果
二、js代码实现
<script>
//点击上传按钮的事件
function handleFile() {
//获取图片文件对象
let fileObj = document.getElementById('file').files;
//执行压缩函数
let littlePic = picCompress(fileObj,2,2,callBack)
}
//图片压缩之后的回调函数
function callBack(obj){
//将Blob对象转换为DataUrl的形式
let imgSrc = window.URL.createObjectURL(obj)
//重新渲染到预览区
document.getElementById('img').src = imgSrc
console.log(obj)
}
/**
* @description: 将一个图片文件进行压缩
* @param: {obj} myFile 无默认值 图片文件
* @param: {fn} callBack 无默认值 图片压缩后的回调函数
* @param: {fn} xFactor 无默认值 图片宽的压缩倍率
* @param: {fn} YFactor 无默认值 图片长的压缩倍率
*/
function picCompress(myFile,xFactor,YFactor,callBack){
let fileObj = myFile[0]
console.log(fileObj)
let reader = new FileReader()
reader.readAsDataURL(fileObj) //转base64
console.log(reader)
reader.onload = function(e) {
let image = new Image() //新建一个img标签（还没嵌入DOM节点)
image.src = e.target.result
console.log(image.src)
image.onload = function () {
let canvas = document.createElement('canvas'), // 新建canvas
context = canvas.getContext('2d'),
imageWidth = image.width / xFactor, //压缩后图片的大小
imageHeight = image.height / YFactor,
data = ''
canvas.width = imageWidth
canvas.height = imageHeight
context.drawImage(image, 0, 0, imageWidth, imageHeight)
data = canvas.toDataURL('image/jpeg') // 输出压缩后的base64
console.log(data)
let arr = data.split(','), mime = arr[0].match(/:(.*?);/)[1], // 转成blob
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
let files = new window.File([new Blob([u8arr], {type: mime})], 'test.jpeg', {type: 'image/jpeg'}) // 转成file
callBack(files)
}
}
}
</script>
实现效果预览:
原图大小
压缩之后的效果预览
压缩后图片大小
需求完成.
<script>
//点击上传按钮的事件
function handleFile() {
//获取图片文件对象
let fileObj = document.getElementById('file').files;
//执行压缩函数
let littlePic = picCompress(fileObj,2,2,callBack)
}
//图片压缩之后的回调函数
function callBack(obj){
//将Blob对象转换为DataUrl的形式
let imgSrc = window.URL.createObjectURL(obj)
//重新渲染到预览区
document.getElementById('img').src = imgSrc
console.log(obj)
}
/**
* @description: 将一个图片文件进行压缩
* @param: {obj} myFile 无默认值 图片文件
* @param: {fn} callBack 无默认值 图片压缩后的回调函数
* @param: {fn} xFactor 无默认值 图片宽的压缩倍率
* @param: {fn} YFactor 无默认值 图片长的压缩倍率
*/
function picCompress(myFile,xFactor,YFactor,callBack){
let fileObj = myFile[0]
console.log(fileObj)
let reader = new FileReader()
reader.readAsDataURL(fileObj) //转base64
console.log(reader)
reader.onload = function(e) {
let image = new Image() //新建一个img标签（还没嵌入DOM节点)
image.src = e.target.result
console.log(image.src)
image.onload = function () {
let canvas = document.createElement('canvas'), // 新建canvas
context = canvas.getContext('2d'),
imageWidth = image.width / xFacto, //压缩后图片的大小
imageHeight = image.height / YFactor,
data = ''
canvas.width = imageWidth
canvas.height = imageHeight
context.drawImage(image, 0, 0, imageWidth, imageHeight)
data = canvas.toDataURL('image/jpeg') // 输出压缩后的base64
console.log(data)
let arr = data.split(','), mime = arr[0].match(/:(.*?);/)[1], // 转成blob
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
let files = new window.File([new Blob([u8arr], {type: mime})], 'test.jpeg', {type: 'image/jpeg'}) // 转成file
callBack(files)
}
}
}
</script>
