js图像压缩方法综述

首先，想想我们有什么需要大部分的时间，我们需要一个文件对象，文件对象的压缩图像到远程服务器；有时我们也需要一个base64字符串压缩再传递到远程数据库的Base64字符串；有时它也可能是一块帆布或帆布，是图像对象，或者只是一个图片的URL地址，我们需要把它们压缩到远程的；在这么多的需求面前，王简单地画个图：

替代文字

两。解决

如上所示，王21已经编写了七种方法，基本上覆盖了js中大多数文件类型的转换和压缩。

1、urltoimage（URL，FN）将荷载通过URL所需的图像对象，其中URL参数传递到图片的URL，FN是回调方法，并包含一个图像对象的参数。代码如下：
功能urltoimage（URL，FN）{
VaR img =新的图像（）；
img.src =网址；
img.onload =函数（）{
FN（IMG）；
}
}；
2、imagetocanvas（图像）将图像分成画布对象，在图像参数传递到一个图像对象和代码如下：
功能imagetocanvas（图像）{
VaR CVS = document.createelement（画布）；
VaR CTX = cvs.getcontext（二维的）；
cvs.width = image.width；
cvs.height = image.height；
ctx.drawimage（形象，0, 0，cvs.width，CVS。高度）；
返回CVS；
}；
3、canvasresizetofile（帆布，质量，FN）将画布压缩成一个BLOB类型的对象；画布画布对象参数；质量参数为一个0-1型数，图像的压缩质量表示；FN回调方法包含BLOB对象参数；代码如下：
功能canvasresizetofile（帆布，质量，FN）{
canvas.toblob（功能（BLOB）{）
FN（斑点）；
}，图像和JPEG，质量）；
}；
这里的blob对象代表一个不变的文件对象的原始数据。斑点表明它不一定是数据在Javaｓｃｒｉｐｔ中的原始形式。文件接口是基于斑点，斑点的继承功能和扩展支持用户系统上的文件，我们可以把它作为一个文件类型，并其他更具体的使用可以参考的MDN文档

4、canvasresizetodataurl（帆布、质量）将画布对象的压缩成一个dataurl字符串，在画布的参数传递给画布对象。质量参数被传递到一个0-1数字类型，这表明图像压缩的质量。代码如下：
methods.canvasresizetodataurl =功能（帆布、质量）{
返回canvas.todataurl（图像/ JPEG，质量）；
}；
的todataurl API可参阅MDN文档

5、filetodataurl（文件，FN）将文件（BLOB）文件到dataurl字符串、文件传递参数到一个文件（BLOB）类型文件；FN是回调方法，并包含了dataurl字符串参数。代码如下：
功能filetodataurl（文件，FN）{
VaR的读者= FileReader（）；
reader.onloadend =功能（e）{
FN（e.target。结果）；
}；
reader.readasdataurl（文件）；
}；
6、dataurltoimage（dataurl，FN）将一个字符串的字符串dataurl图像类型文件，在dataurl参数传递给一个dataurl字符串，FN是回调方法，并包含图像文件类型的参数。代码如下：
功能dataurltoimage（dataurl，FN）{
VaR img =新的图像（）；
img.onload =函数（）{
FN（IMG）；
}；
img.src = dataurl；
}；
7、dataurltofile（dataurl）将一个字符串的字符串转换为dataurl BLOB类型的对象，在dataurl参数传递给一个dataurl字符串，如下：
功能dataurltofile（dataurl）{
var arr = dataurl.split（''），ARR { 0 }。比赛（MIME =（。*）；{：{ 1 }），
BSTR =爱特伯（ARR { 1 }），n = bstr.length，u8arr =新uint8array（N）；
而（n）{
u8arr { } = bstr.charcodeat（N）；
}
返回新的BLOB（{ u8arr }，{类型：MIME }）；
}；
三。进一步的封装

对于要压缩到文件对象中的常用文件对象，我们可以再次引用上面的方法，参考下面的代码：
功能fileresizetofile（文件、质量，FN）{
filetodataurl（文件、函数（dataurl）{
DataURLtoImage（dataurl，函数（图像）{
canvasresizetofile（imagetocanvas（图像），质量，FN）；
}）
}）
}
其中，文件参数被传递到一个文件类型文件中，质量参数传递给一个0-1数字类型，它代表图片压缩质量；FN是回调方法，它包含一个参数类型的文件。

它像下面这样使用：
var文件= document.getelementbyid（'demo）。文件{ 0 }；
fileresizetofile（文件、0.6、功能（RES）{
console.log（RES）；
获取RES，使您想上载操作；
}）
这样，图像压缩和上传就可以很容易地解决。以上8种方法都被封装并放在GitHub上。如果我喜欢，我可以发挥明星哈哈，大力。

参考文献：

MDN

ps：下面，看看JS ISO压缩图片的方式
功能prodownimage（路径，imbj）{ / /压缩比的图像工具
/ /无功promaxheight = 185；
无功promaxheight = 300；
无功promaxwidth = 175；
var =新对象（）；
新图像（）；
image.src =路径；
image.attachevent onreadystatechange （
（功能）{ / /当加载状态变化时，该方法的执行，因为IMG加载延迟
如果（image.readystate = =完成）{ / /进入加载状态完全结束
如果（image.width > 0 image.height > 0）{
VaR WW promaxwidth / image.width；
VaR HH = promaxheight / image.height；
var（= HH）；
如果（速率< = 1）{
警报（图像宽度*率是：+ image.width *率）；
size.width = image.width *率；
size.height = image.height *率；
{人}
警报（图像宽度：+图像宽度）；
size.width = image.width；
size.height = image.height；
}
}
}
Imbj.attr（宽
Imbj.attr（高
}）；
}
总结

以上是JS在Xiaobian介绍了图像压缩方法的简要总结，希望能对你有帮助。如果你有任何问题，请给我留言，萧边会及时给您回复。谢谢您支持网站。