JS中图片压缩的方法小结

首先想一想我们有哪些需求？大多时候我们需要将一个File对象压缩之后再变为File对象传入到远程图片服务器；有时候我们也需要将一个base64字符串压缩之后再变为base64字符串传入到远程数据库；有时候后它还有可能是一块canvas画布，或者是一个Image对象，或者直接就是一个图片的url地址，我们需要将它们压缩上传到远程；面对这么多的需求，王二索性画了一张图：

Alt text

二、解决办法

如上图所示，王二一共写了七个方法，基本覆盖了JS中大部分文件类型的转换与压缩，其中：

1、 urltoImage(url,fn) 会通过一个url加载所需要的图片对象，其中 url 参数传入图片的 url , fn 为回调方法,包含一个Image对象的参数，代码如下：

?

1 2 3 4 5 6 7

function urltoImage (url,fn){   var img = new Image();   img.src = url;   img.onload = function(){     fn(img);   } };

2、 imagetoCanvas(image) 会将一个 Image 对象转变为一个 Canvas 类型对象，其中 image 参数传入一个Image对象，代码如下：

?

1 2 3 4 5 6 7 8

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(ca