怎么用JS压缩图片

本篇内容主要讲解“怎么用JS压缩图片”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么用JS压缩图片”吧!在实际应用中有可能使用的情境：大多时候我们直接读取用户上传的File对象，读写到画布（canvas）上，利用Canvas的API进行压缩，完成压缩之后再转成File（Blob）对象，上传到远程图片服务器；不妨有时候我们也需要将一个base64字符串压缩之后再变为base64字符串传入到远程数据库或者再转成File（Blob）对象。一般的，它们有如下转化关系：下面将按照转化关系图中的转化方法一一实现。用户通过页面标签上传的本地图片直接转化data URL字符串形式。可以使用FileReader文件读取构造函数。FileReader对象允许Web应用程序异步读取存储在计算机上的文件（或原始数据缓冲区）的内容，使用File或Blob对象指定要读取的文件或数据。该实例方法readAsDataURL读取文件内容并转化成base64字符串。在读取完后，在实例属性result上可获取文件内容。Data URL由四个部分组成：前缀（data:）、指示数据类型的MIME类型、如果非文本则为可选的base64标记、数据本身：比如一张png格式图片，转化为base64字符串形式：data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAgAElEQVR4XuxdB5g。若想将用户通过本地上传的图片放入缓存并img标签显示出来，除了可以利用以上方法转化成的base64字符串作为图片src，还可以直接用URL对象，引用保存在File和Blob中数据的URL。使用对象URL的好处是可以不必把文件内容读取到JavaScript中 而直接使用文件内容。为此，只要在需要文件内容的地方提供对象URL即可。注意：要创建对象URL，可以使用window.URL.createObjectURL()方法，并传入File或Blob对象。如果不再需要相应数据，最好释放它占用的内容。但只要有代码在引用对象URL，内存就不会释放。要手工释放内存，可以把对象URL传给URL.revokeObjectURL()。通过图片链接（url）获取图片Image对象，由于图片加载是异步的，因此放到回调函数callback回传获取到的Image对象。利用drawImage()方法将Image对象绘画在Canvas对象上。drawImage有三种语法形式：参数：image绘制到上下文的元素；sx绘制选择框左上角以Image为基准X轴坐标；sy绘制选择框左上角以Image为基准Y轴坐标；sWidth绘制选择框宽度；sHeight绘制选择框宽度；dxImage的左上角在目标canvas上X轴坐标；dyImage的左上角在目标canvas上Y轴坐标；dWidthImage在目标canvas上绘制的宽度；dHeightImage在目标canvas上绘制的高度；HTMLCanvasElement对象有toDataURL(type, encoderOptions)方法，返回一个包含图片展示的data URL。同时可以指定输出格式和质量。参数分别为：type图片格式，默认为image/png。encoderOptions在指定图片格式为image/jpeg或image/webp的情况下，可以从0到1的区间内选择图片的质量。如果超出取值范围，将会使用默认值0.92，其他参数会被忽略。图片链接也可以是base64字符串，直接赋值给Image对象src即可。将data URL字符串转化为Blob对象。主要思路是：先将data URL数据（data） 部分提取出来，用atob对经过base64编码的字符串进行解码，再转化成Unicode编码，存储在Uint8Array（8位无符号整型数组，每个元素是一个字节） 类型数组，最终转化成Blob对象。HTMLCanvasElement有toBlob(callback, [type], [encoderOptions])方法创造Blob对象，用以展示canvas上的图片；这个图片文件可以被缓存或保存到本地，由用户代理端自行决定。第二个参数指定图片格式，如不特别指明，图片的类型默认为image/png，分辨率为96dpi。第三个参数用于针对image/jpeg格式的图片进行输出图片的质量设置。为兼容低版本浏览器，作为toBlob的polyfill方案，可以用上面data URL生成Blob方法dataUrl2Blob作为HTMLCanvasElement原型方法。将Blob对象转化成data URL数据，由于FileReader的实例readAsDataURL方法不仅支持读取文件，还支持读取Blob对象数据，这里复用上面file2DataUrl方法即可：将Blob对象转化成Image对象，可通过URL对象引用文件，也支持引用Blob这样的类文件对象，同样，这里复用上面file2Image方法即可：上传图片（已压缩），可以使用FormData传入文件对象，通过XHR直接把文件上传到服务器。也可以使用FileReader读取文件内容，转化成二进制上传在熟悉以上各种图片转化方法的具体实现，将它们封装在一个公用对象util里，再结合压缩转化流程图，这里我们可以简单实现图片压缩了：
首先将上传图片转化成Image对象，再将写入到Canvas画布，最后由Canvas对象API对图片的大小和尺寸输出调整，实现压缩目的。这个简易图片压缩方法调用和入参：如果看到这里的客官不嫌弃这个demo太简单可以戳这里试试水。如果你有足够的耐心多传几种类型图片就会发现还存在如下问题：压缩输出图片寸尺固定为原始图片尺寸大小，而实际可能需要控制输出图片尺寸，同时达到尺寸也被压缩目的；png格式图片同格式压缩，压缩率不高，还有可能出现“不减反增”现象；有些情况，其他格式转化成png格式也会出现“不减反增”现象；大尺寸png格式图片在一些手机上，压缩后出现“黑屏”现象；俗话说“罗马不是一天建成的”，通过上述实验，我们发现了很多不足，下面将逐条问题分析，寻求解决方案。为了避免压缩图片变形，一般采用等比缩放，首先要计算出原始图片宽高比aspectRatio，用户设置的高乘以aspectRatio，得出等比缩放后的宽，若比用户设置宽的小，则用户设置的高为为基准缩放，否则以宽为基准缩放。输出图片的尺寸确定了，接下来就是按这个尺寸创建一个Canvas画布，将图片画上去。这里可以将上面提到的image2Canvas方法稍微做一下改造：一般的，不建议将png格式图片压缩成自身格式，这样免费云主机、域名压缩率不理想，有时反而会造成自身质量变得更大。因为我们在“具体实现”中两个有关压缩关键API：toBlob(callback, [type], [encoderOptions])参数encoderOptions用于针对image/jpeg格式的图片进行输出图片的质量设置；toDataURL(type, encoderOptions参数encoderOptions在指定图片格式为image/jpeg或image/webp的情况下，可以从0到1的区间内选择图片的质量。均未对png格式图片有压缩效果。有个折衷的方案，我们可以设置一个阈值，如果png图片的质量小于这个值，就还是压缩输出png格式，这样最差的输出结果不至于质量太大，在此基础上，如果压缩后图片大小 “不减反增”，我们就兜底处理输出源图片给用户。当图片质量大于某个值时，我们压缩成jpeg格式。由于各大浏览器对Canvas最大尺寸支持不同如果图片尺寸过大，在创建同尺寸画布，再画上图片，就会出现异常情况，即生成的画布没有图片像素，而画布本身默认给的背景色为黑色，这样就导致图片“黑屏”情况。这里可以通过控制输出图片最大宽高防止生成画布越界，并且用透明色覆盖默认黑色背景解决解决“黑屏”问题：到此，相信大家对“怎么用JS压缩图片”有了更深的了解，不妨来实际操作一番吧！这里是云技术网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

相关推荐: react和vuejs有哪些区别

这篇文章给大家分享的是有关react和vuejs有哪些区别的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。 区别：1、vue是双向绑定，react不是；2、React使用JSX，Vue使用HTML模板创建视图；3、React用Flux…