前端图片压缩上传
前端图片压缩上传
前端图片压缩上传
本文章主要是介绍了 上传图片压缩
主要分四步走
1.input上传
2.fileReader转base64预览
3.canvas压缩
4.转换成bold上传图片
1.图片上传，input普通上传
Document
//change获取到上传的文件内容
2.FileReader
FileReader这个对象是做什么的？
主要是用来读取file对象和Blob对象,file对象的对象，Blob是二进制对象
FileReader.onload钩子函数，在这里边处理
FileReader.readAsDataURL：读取方法，返回base64
var render = new FileReader()
render.readAsDataURL(file)
rener.onload=function(ev){console.log(ev)//ev.target.result就是获取到的base64
}
3.canvas
canvas压缩图片会用到两个方法drawImage，toDataURL。其中canvas.toDataURL可以实现图片的压缩，canvas.drawImage将选中的图片文件在画布上绘制出来
context.drawImage()经常用到的五个值
context.drawImage(image（上传的图片）, x（在画布上的横坐标）, sy（在画布上的纵坐标）, Width（在画布上的宽）, Height（在画布上的高）);
context.toDataURL(type,quality)type文件类型默认是image/png,可以自己定义，quality图片质量值在0-1范围内,越小图片压缩的倍数越大
//先创建canvas画布var canvas = document.createElement('canvas');//返回一个在画布上绘制2d图的环境对象var context = canvas.getContext('2d');context.drawImage(image, 0, 0, image.width, image.height);canvas.toDataURL(file.type, 0.4)
4.canvas的blob
canvas.toBlob(callback（回调返回blob）, Type（文件类型同toDataURL里边的）, quality（同toDataURL的图片质量）)
canvas.toBlob(function (blob) {console.log(blob)//这个时候就是缩小的图片},file.type,0.2);
整体代码为
Document
如有错误请指正
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！