JS中图片压缩的方法小结
首先想一想我们有哪些需求？大多时候我们需要将一个File对象压缩之后再变为File对象传入到远程图片服务器；有时候我们也需要将一个base64字符串压缩之后再变为base64字符串传入到远程数据库；有时候后它还有可能是一块canvas画布，或者是一个Image对象，或者直接就是一个图片的url地址，我们需要将它们压缩上传到远程；面对这么多的需求，王二索性画了一张图：
Alt text
二、解决办法
如上图所示，王二一共写了七个方法，基本覆盖了JS中大部分文件类型的转换与压缩，其中：
1、 urltoImage(url,fn) 会通过一个url加载所需要的图片对象，其中 url 参数传入图片的 url , fn 为回调方法,包含一个Image对象的参数，代码如下：
function urltoImage (url,fn){
var img = new Image();
img.src = url;
img.onload = function(){
fn(img);
}
};
2、 imagetoCanvas(image) 会将一个 Image 对象转变为一个 Canvas 类型对象，其中 image 参数传入一个Image对象，代码如下：
function imagetoCanvas(image){
var cvs = document.createElement("canvas");
var ctx = cvs.getContext('2d');
cvs.width = image.width;
cvs.height = image.height;
ctx.drawImage(image, 0, 0, cvs.width, cvs.height);
return cvs ;
};
3、 canvasResizetoFile(canvas,quality,fn) 会将一个 Canvas 对象压缩转变为一个 Blob 类型对象；其中 canvas 参数传入一个 Canvas 对象; quality 参数传入一个0-1的 number 类型，表示图片压缩质量; fn 为回调方法，包含一个 Blob 对象的参数;代码如下：
function canvasResizetoFile(canvas,quality,fn){
canvas.toBlob(function(blob) {
fn(blob);
},'image/jpeg',quality);
};
这里的 Blob 对象表示不可变的类似文件对象的原始数据。 Blob 表示不一定是 JavaScript 原生形式的数据。 File 接口基于 Blob ，继承了 Blob 的功能并将其扩展使其支持用户系统上的文件。我们可以把它当做File类型对待，其他更具体的用法可以参考MDN文档
4、 canvasResizetoDataURL(canvas,quality) 会将一个 Canvas 对象压缩转变为一个 dataURL 字符串,其中 canvas 参数传入一个 Canvas 对象; quality 参数传入一个0-1的 number 类型，表示图片压缩质量;代码如下：
methods.canvasResizetoDataURL = function(canvas,quality){
return canvas.toDataURL('image/jpeg',quality);
};
其中的 toDataURL API可以参考MDN文档
5、 filetoDataURL(file,fn) 会将 File （ Blob ）类型文件转变为 dataURL 字符串,其中 file 参数传入一个 File （ Blob ）类型文件; fn 为回调方法，包含一个 dataURL 字符串的参数;代码如下：
function filetoDataURL(file,fn){
var reader = new FileReader();
reader.onloadend = function(e){
fn(e.target.result);
};
reader.readAsDataURL(file);
};
6、 dataURLtoImage(dataurl,fn) 会将一串 dataURL 字符串转变为 Image 类型文件,其中 dataurl 参数传入一个 dataURL 字符串, fn 为回调方法，包含一个 Image 类型文件的参数，代码如下：
function dataURLtoImage(dataurl,fn){
var img = new Image();
img.onload = function() {
fn(img);
};
img.src = dataurl;
};
7、 dataURLtoFile(dataurl) 会将一串 dataURL 字符串转变为 Blob 类型对象，其中 dataurl 参数传入一个 dataURL 字符串,代码如下：
function dataURLtoFile(dataurl) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {type:mime});
};
三、进一步封装
对于常用的将一个 File 对象压缩之后再变为 File 对象,我们可以将上面的方法再封装一下，参考如下代码：
function fileResizetoFile(file,quality,fn){
filetoDataURL (file,function(dataurl){
dataURLtoImage(dataurl,function(image){
canvasResizetoFile(imagetoCanvas(image),quality,fn);
})
})
}
其中， file 参数传入一个 File （ Blob ）类型文件； quality 参数传入一个 0-1 的 number 类型，表示图片压缩质量； fn 为回调方法，包含一个 Blob 类型文件的参数。
它使用起来就像下面这样：
var file = document.getElementById('demo').files[0];
fileResizetoFile(file,0.6,function(res){
console.log(res);
//拿到res，做出你要上传的操作；
})
这样的话，图片压缩上传就能轻松地搞定了，以上的8个方法我已经封装好放到 github 上了，喜欢的话可以使劲的star哈。
参考文档：
ps：下面看下JS等比压缩图片的办法
function proDownImage(path,imgObj) { // 等比压缩图片工具
//var proMaxHeight = 185;
var proMaxHeight=300;
var proMaxWidth = 175;
var size = new Object();
var image = new Image();
image.src = path;
image.attachEvent("onreadystatechange",
function() { // 当加载状态改变时执行此方法,因为img的加载有延迟
if (image.readyState == "complete") { // 当加载状态为完全结束时进入
if (image.width > 0 && image.height > 0) {
var ww = proMaxWidth / image.width;
var hh = proMaxHeight / image.height;
var rate = (ww < hh) ? ww: hh;
if (rate <= 1) {
alert("imgage width*rate is:" + image.width * rate);
size.width = image.width * rate;
size.height = image.height * rate;
} else {
alert("imgage width is:" + image.width);
size.width = image.width;
size.height = image.height;
}
}
}
imgObj.attr("width",size.width);
imgObj.attr("height",size.height);
});
}
总结
以上所述是小编给大家介绍的JS中图片压缩的方法小结，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要为大家详细介绍了微信小程序视图容器（swiper）组件创建轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-08-08
本文对比分析了javascript中的null和underfined的相同点和不同点，算是一个小小的总结，希望对大家学习javascript能够有所帮助。2015-07-07
这篇文章主要介绍了微信小程序实现天气预报功能(附源码)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
这篇文章主要介绍了微信小程序tab切换可滑动切换导航栏跟随滚动实现代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-09-09
javascript 使用正则test( )第一次是 true,第二次是false
这篇文章主要介绍了使用正则test( )第一次是 true,第二次是false的相关资料,需要的朋友可以参考下2017-02-02
这篇文章主要介绍了教你30秒发布一个TypeScript包到NPM的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
JavaScript事件代理（委托）一般用于以下情况：1. 事件注册在祖先级元素上，代理其子级元素。可以减少事件注册数量，节约内存开销，提高性能。2. 对js动态添加的子元素可自动绑定事件。本文主要介绍用原生 js 实现该功能。下面跟着小编一起来看下吧2016-12-12
JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。这篇文章主要介绍了JavaScript组成、引入、输出、运算符基础知识讲解,需要的朋友可以参考下2016-12-12
下面小编就为大家带来一篇javascript获取指定区间范围随机数的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
Node.JS调试貌似比较麻烦,每次改完了要重启一下Node进程.GOOGLE上有个NPM模块,可以监控JS文件的更改,然后自动重启Node.但我下载后在windows里运行报错2012-01-01
最新评论