利用 canvas 进行图片压缩
思路:创立一个 canvas,将图片绘制在画布上,
通过设置 canvas 的宽度和品质,去调整图片大小
将 file 转化为 base64
这一步是为了创立一个 image,在 image 中获取宽高比
// 将 file 转化为 base64
function changeFileToBaseURL(file, fn) {var flieReader = new FileReader()
if(file == undefined) return fn(null)
flieReader.readAsDataURL(file);
flieReader.onload = function() {
var imgBase64Data = this.result;
fn(imgBase64Data)
}
}
将 base64 转换为 file
在 canvas 实现图片压缩之后,以 base64 格局导出
这个时候能够将 base64 转换为 file 不便回调函数操作
// 将 base64 转换为 file
function dataURLToFile(dataUrl, fileName) {var arr = dataUrl.split(','),
mine = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while(n--) {u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], fileName, {type: mine})
}
压缩图片的办法
/**
* canvas 压缩图片
* @param {参数 obj} param
* @param {文件二进制流} param.file 必传
* @param {指标压缩大小} param.targetSize 不传初始赋值 -1
* @param {输入图片宽度} param.width 不传初始赋值 -1,等比缩放不必传高度
* @param {输入图片名称} param.fileName 不传初始赋值 image
* @param {压缩图片水平} param.quality 不传初始赋值 0.92。值范畴 0~1
* @param {回调函数} param.succ(file, base64) 必传
*/
function imgCompress(param) {if(!(param && param.succ)) return
if(param.file == undefined) return
// param.targetSize = param.hasOwnProperty("targetSize") ? param.targetSize : -1
param.width = param.hasOwnProperty("width") ? param.width : -1
param.fileName = param.hasOwnProperty("fileName") ? param.fileName : 'image'
param.quality = param.hasOwnProperty("quality") ? param.quality : 0.92
var fileType = param.file.type
if(fileType.indexOf('image') == -1) {console.log("请抉择图片文件")
}
changeFileToBaseURL(param.file, function(base64) {if(base64) {var image = new Image();
image.src = base64
image.onload = function() {
// 图片的原始宽高比
var scale = this.width / this.height
var canvas = document.createElement('canvas')
var context = canvas.getContext('2d')
canvas.width = param.width == -1 ? this.width : param.width
canvas.height = param.width == -1 ? this.height : parseInt(param.width / scale)
context.drawImage(image, 0, 0, canvas.width, canvas.height)
// 将 canvas 转换为 base64 和 file 格局,作为回调参数
var newImageData = canvas.toDataURL(fileType, param.quality);
var resultFile = dataURLToFile(newImageData, param.fileName);
param.succ(resultFile, newImageData)
}
}
})
}
结语
这里尽管有 targetSize 的参数,然而这个参数并没有应用上,
起因是如果想要准确地将图片大小转换在某个数以下的话,须要用到递归去解决宽度,
这会对性能造成肯定累赘。我没有想到更好的办法 …
能够通过调整 width 和 quality 参数去满足接口大小限度。
调用
<div class="preview-box">
<img src=""alt="">
<p class="size"></p>
</div>
<input type="file" id="uploadBtn">
.preview-box{
width: 300px;
min-height: 300px;
}
img{width: 300px;}
var ipt = document.querySelector('#uploadBtn')
var previewEl = document.querySelector('.preview-box img')
var sizeEl = document.querySelector('.size')
ipt.onchange = function() {
imgCompress({file: this.files[0],
targetSize: 1024 * 1024 * 1,
width: 900,
// quality: 1,
fileName: 'imgCompress',
succ: function(file, base64) {previewEl.setAttribute('src', base64)
sizeEl.innerHTML = file.size / 1024 / 1024 + 'M'
console.log(file)
}
})
}