前端图片压缩库-前端图片压缩上传

image-conversion 是一个简单易用的 JS 图片转换工具,提供了多种 Image、Canvas、File 和 dataURL 之间的转换方法。

另外,image-conversion 可以指定大小来压缩图片。

1、将图像压缩到 200kb:

2、以 0.9 的质量压缩图像

image-conversion 提供了多种方法来实现 Image、Canvas、File 和 dataURL 之间的转换,如下:

1、imagetoCanvas(image[, config]) {Promise(Canvas)}

将图像对象转换为画布对象。

2、dataURLtoFile(dataURL[, type]) {Promise(Blob)}

将 dataURL

字符串

转换为 File(Blob) 对象,相当于把画布的内容转换成blob,type可以设置最终图片的格式。

type的值可以为:"image/png", "image/jpeg", "image/gif"

3、compress(file, config) {Promise(Blob)}

压缩文件(Blob)对象。

4、compressAccurately(file, config) {Promise(Blob)}

根据大小压缩文件(Blob)对象。

5、canvastoDataURL(canvas[, quality, type]) {Promise(string)}

将 Canvas 对象转换为 dataURL 字符串,该方法可以进行压缩。

6、canvastoFile(canvas[, quality, type]) {Promise(Blob)}

将 Canvas 对象转换为 Blob 对象,此方法可以进行压缩。

7、dataURLtoImage(dataURL) {Promise(Image)}

将 dataURL 字符串转换为图像对象。

8、downloadFile(file[, fileName])

下载图片到本地。

9、filetoDataURL(file) {Promise(string)}

将 File(Blob) 对象转换为 dataURL 字符串。

10、urltoBlob(url) {Promise(Blob)}

通过图像 url 加载所需的 Blob 对象。

11、urltoImage(url) {Promise(Image)}

通过图片 url 加载所需的 Image 对象。

觉得效果不错的请帮忙加个关注点个赞,经常分享前端实用开发技巧

最近公司有个需求,就是上传照片时需要先压缩。

其中上传原理是用ajax上传formdata数据,压缩是采用canvas进行处理。

利用canvas处理Image对象调整像素尺寸,输出base64格式,再将base64格式转换为blob对象,再放进formdata对象

上传文件用formdata,图像处理用canvas。

1、小图多可以用图标,例如阿里巴巴iconfont库

。

2、使用精灵图。

3、大图可以进行压缩,压缩网站eg:

/

。

4、图片懒加载,像淘宝或者京东这样的APP页面上有很多图片,当我们滑到下一屏时下一屏的图片才会加载,这就采用了图片懒加载的方式.图片懒加载,简单来说就是在页面渲染过程中,图片不会一次性全部加载,会在需要的时候加载,比如当滚动条滚动到某一个位置时触发事件加载图片,通过js将img标签的data-src属性赋值给src属性。

5、使用webp格式,缺点:浏览器支持度不够