189 8069 5689
这篇文章主要讲解了“web前端图片压缩、方向纠正、预览、上传插件的方法是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“web前端图片压缩、方向纠正、预览、上传插件的方法是什么”吧！
成都创新互联专业为企业提供曲靖网站建设、曲靖做网站、曲靖网站设计、曲靖网站制作等企业网站建设、网页设计与制作、曲靖企业网站模板建站服务，10多年曲靖做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。
实现原理
压缩图片并且上传主要用到filereader、canvas 以及 formdata 这三个h6的api和插件EXIF.js。逻辑并不难。整个过程就是：
（1）用户使用input file上传图片的时候，用filereader读取用户上传的图片数据（base64格式）
（2）把图片数据传入img对象，然后将img绘制到canvas上，用EXIF.js对图片方向进行纠正，再调用canvas.toDataURL对图片进行压缩，获取到压缩后的base64格式图片数据，转成二进制
（3）获取到压缩后的图片二进制数据，预览。
（4）将压缩后的图片二进制数据塞入formdata，再通过XmlHttpRequest提交formdata
如此四步，就完成了图片的压缩、方向纠正、预览和上传。
插件设计思考
考虑到在实际项目中，可能用不同的开发框架（vue.js/JQ/react.js/angular.js/anu.js等），图片预览的UI样式也可能不同，图片数据上传方法可能不同。因为图片压缩和方向纠正这两块的逻辑多变性比较低，我们这里把图片压缩和方向纠正抽离出来，封装为一个插件库。
【一】获取图片数据
先是获取图片数据，也就是监听input file的change事件，然后获取到用来压缩上传的文件对象files，将files传到【图片压缩、方向纠正插件】中进行处理。
这时候根据每个人的需求，也可以预览未压缩的图片。
//监听上传组件input的onchange事件，压缩图片，纠正图片方向，同时获取压缩后的图片
filechooser.onchange = function () {
var fileList = this.files;
//预览压缩前的图片
var files = Array.prototype.slice.call(fileList);
files.forEach(function (file, i) {
var reader = new FileReader();
reader.onload = function () {
var li = document.createElement("li")
li.style.backgroundImage = 'url('+this.result+')';
document.querySelector('.img_list').appendChild(li)
}
reader.readAsDataURL(file);
});
//处理图片列表，getCompressiveFileList接受处理后的图片数据列表
//下面两行代码为图片压缩、方向纠正插件的用法，具体实现细节请继续往下阅读 ~_~ ↓↓↓
var process = window.lzImgProcess();
process(fileList, getCompressiveFileList);
}【二】图片压缩、方向纠正插件实现
上面做完图片数据的获取后，就可以做process压缩图片的方法了。而压缩图片也并不是直接把图片绘制到canvas再调用一下toDataURL就行的。
在IOS中，canvas绘制图片是有两个限制的：
首先是图片的大小，如果图片的大小超过两百万像素，图片也是无法绘制到canvas上的，调用drawImage的时候不会报错，但是你用toDataURL获取图片数据的时候获取到的是空的图片数据。
再者就是canvas的大小有限制，如果canvas的大小大于大概五百万像素（即宽高乘积）的时候，不仅图片画不出来，其他什么东西也都是画不出来的。
应对上面两种限制，我把图片宽度、高度压缩控制在1000px以内，这样图片最大就不超过两百万像素了。在前端开发中，1000px*1000px基本可以满足绝大部分的需求了。当然了还有更完美的瓦片式绘制的方法，我们这里就说瓦片式绘制方法了。
如此一来就解决了IOS上的两种限制了。
除了上面所述的限制，还有两个坑，一个就是canvas的toDataURL是只能压缩jpg的（这句话的详细解释可以看下面的Tip讲解），当用户上传的图片是png的话，就需要转成jpg，也就是统一用canvas.toDataURL('image/jpeg', 0.5) ， 类型统一设成jpeg，而压缩比就自己控制了。
另一个就是如果是png转jpg，绘制到canvas上的时候，canvas存在透明区域的话，当转成jpg的时候透明区域会变成黑色，因为canvas的透明像素默认为rgba(0,0,0,0)，所以转成jpg就变成rgba(0,0,0,1)了，也就是透明背景会变成了黑色。解决办法就是绘制之前在canvas上铺一层白色的底色。
在压缩图片之前，我们判断图片角度，如果图片角度不正确，还需要用EXIF.js把图片角度纠正过来。
压缩完图片，把base64的图片数据转成二进制数据存储到暂存区中，等待被getBlobList获取使用。
Tip: canvas的toDataURL是只能压缩jpg这句话我可能说的不清楚，我想表达的意思是这个api无论是jpeg还是png，最后导出的时候，都跟jpeg没啥差别了。因为png图片的透明性质在canvas中是无效的，会被canvas添加默认的黑色背景，我在文中讲解的时候，用白色背景处理了，所以最后导出的图片，无论你设置的是png还是jpeg都跟jpeg没啥区别了，因为无法保持png的透明度性质了
(function(window) {
/**
*
* 作者：混沌传奇
*
* 邮箱地址：iot-pro_lizeng@foxmail.com
*
* 日期：2017-10-26
*
* 插件功能：压缩图片&&纠正图片方向&&返回二进制(Blob)图片元数据组成的列表
*
*/
window.lzImgProcess = function () {
var Orientation = '', //图片方向角
blobList = [], //压缩后的二进制图片数据列表
canvas = document.createElement("canvas"), //用于压缩图片（纠正图片方向）的canvas
ctx = canvas.getContext('2d'),
file_type = 'image/jpeg', //图片类型
qlty = 0.5, //图片压缩品质，默认是0.5，可选范围是0-1的数字类型的值，可配置
imgWH = 1000; //压缩后的图片的最大宽度和高度，默认是1000px，可配置
/**
* @actionName process,
* 方法功能：压缩图片&&纠正图片方向&&返回二进制(Blob)图片元数据
*
* @param fileList,传入函数的文件列表对象，fileList对象是来自用户在一个元素上选择文件后返回的FileList对象
* 注意：图片类型必须是jpeg||png
* 比如：Exif.js 提供了 JavaScript 读取图像的原始数据的功能扩展，例如：拍照方向、相机设备型号、拍摄时间、ISO 感光度、GPS 地理位置等数据。
Exif.js官方github 仓库地址：
github.com/exif-js/exi…
【三】获取压缩后的图片二进制数据，预览图片
完成图片压缩后，就可以获取压缩后的图片二进制数据了，把获取到的图片二进制数据存起来；获取到数据后，可以拿来预览。
由于实际项目中，每个项目的UI样式设计可能不一样，开发者可以根据自己的UI样式来预览图片。
//获取压缩后的图片
function getCompressiveFileList(fileList) {
blobFileList = fileList;
// console.log('fileBlobList:', fileList);
fileList.forEach(function (blob) {
var reader = new FileReader();
reader.onload = function () {
var li = document.createElement("LI")
li.style.backgroundImage = 'url('+this.result+')';
document.querySelector('.imgCompress_list').appendChild(li)
}
reader.readAsDataURL(blob);
})
}【四】提交图片数据到后台
new一个formdata对象，将上一步获取到的 blobFileList 图片二进制数据 append 到 formdata中，用任意你喜欢的ajax库进行上传。当然也可以用原生ajax上传。
//将压缩后的二进制图片数据流append到formdata对象中上传到后台服务器 //注意：上传的是formdata对象，后台接口接收的时候，也要从formdata对象中读取二进制数据流 function formUpData(blobFiles){ var formData = new FormData(); formData.append("files", blobFiles); var xhr = new XMLHttpRequest(); //链接你自己上传图片接口即可，这里的接口地址，是我写的示例，不可真实使用，讲解意义更大 xhr.open('post', 'http://xxx/welcome/index/'); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { console.log('上传成功！'); } }; xhr.send(formData); }
感谢各位的阅读，以上就是“web前端图片压缩、方向纠正、预览、上传插件的方法是什么”的内容了，经过本文的学习后，相信大家对web前端图片压缩、方向纠正、预览、上传插件的方法是什么这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！