H5W3
当前位置:H5W3 > JavaScript > 正文

【JS】记录一次js图片压缩思路

利用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 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)
}
})
}

本文地址:H5W3 » 【JS】记录一次js图片压缩思路

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址