前端图片压缩插件-前端工程师都有用哪些比较靠谱的小工具

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 对象。

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

作为曾经的web前端工程师,来答一发。

jsonView Chrome插件

这是一个Chrome浏览器的json视图的插件。

这个插件非常强大的,不仅可以把你在浏览器输出的json数据格式化,也可以将浏览器的xml格式的文件格式化,非常非常的方便,尤其是前端同学在查看api数据的时候,无需再去各种json格式化网站逐个匹配了~~~~强烈推荐!!

WebStorm IDE开发工具

这是款前端开发的ide

。基本上前端开发中你能想到的,他都可以帮你实现了,语法高亮,代码补全提示,terminal终端连接,mysql操作功能,集成一体,甚至php都可以写,异常的强大,非常重的一个前端开发工具,推荐。

Hbuilder 一个可以云打包html5app的开发工具

Hbuilder是一个国内互联网公司DClound开发的ide

,这款ide非常的强大,专门为了Html5所打造的一款ide,如果你不想做原声的Android和iOS APP,那么你可以通过在Hbuilder上开发webapp,之后通过Hbuilder的云打包打包成自己的apk或者.ipa的文件,一秒钟可以打包你的安卓或者iOS APP。如果你不想云打包的话,你可以本地打包,可以下各种插件,是一款非常强大的免费前端H5的ide,强烈推荐!

SessionBox 可以随意切换你的Session的Chrome插件

sessionBox是一块可以让你随意切换你的session的Chrome插件

~ 用户还可以给不同的session设置各种颜色,方便地标识session;SessionBox只对那些把网页的状态保存到session中的才有效果。顺便提供一下SessionBox的官网:

;对于起那段同学来说,切换Sesssion几乎成了必不可少的一项工作,如果你使用了sessionbox,将会大大的减轻你的工作量,同时这个插件对于后端开发的RD同学也将是大大的帮助。

目前介绍了以上四款工具,建议题主可以尝试一下,都是非常不错的工具,虽然我现在不在是前端,但是对于除了webstorm之外的三款工具我都是经常会使用的;至于我为什么不使用webstorm是有原因的,因为我现在已经是作为一枚后端RD的存在,目前在公司开发机上只能用vim开发~~

我的理解应该是生成图片的时候,在不影响图片质量的情况下,尽量用体积小的格式,比如在不透明的情况下尽量把图片保存成png格式。

在css中有一种技术叫做图片精灵,就是把一些背景图做成集合的形式。图片只需加载一次。

最后网上好像是有插件(浏览器也有插件)可以对图片进行压缩处理。