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中图片压缩的方法小结,希望对大家有所帮助
上一篇: 便秘的原因 5大因素是元凶
下一篇: Yii2框架数据验证操作实例详解
推荐阅读
-
MySQL中describe命令的使用方法小结_MySQL
-
js中call apply方法的使用介绍
-
[前端] js中call方法的理解和思考
-
js正则查询匹配语句里面的“凋谢”、“鼓掌”等替换成图片的方法
-
电商网站列表页中图片的展示,一般是通过什么方法防止图片变形的?
-
PHPExcel读取EXCEL中的图片并保存到本地的方法_PHP
-
js将iframe中控件的值传到主页面控件中的实现方法_javascript技巧
-
在CorelDRAW中将图片放置入表格中的几种方法
-
IE浏览器中图片onload事件无效的解决方法_javascript技巧
-
node.js中的fs.linkSync方法使用说明_node.js