实现一个压缩图片功能

现在在线图片压缩的网站很多，我比较推荐熊猫压缩，于是参考熊猫压缩的样式自己也写了一个压缩图片的功能，效果：

有兴趣的可以试试：

http://wzdingzhi.top/system/compressimg

核心是通过创建canvas，调用canvas的toDataURL和toBlob实现压缩，可以从 0 到 1 的区间内选择图片的质量，并不是实现大小的百分比压缩，是根据质量，具体怎么算我就不知道了。这两个api可以去MDN看一下。本来想贴一些代码，想想还是直接看gitHub吧：

https://github.com/wade3po/system/blob/master/src/views/plugin/CompressImg.vue

这边说一下，本来toDataURL和toBlob是都可以实现压缩，一个直接转成blob，一个转成base64，转成base64的还要再转成blob实现下载，我也去找了一些文章，说是toBlob性能更好，但是实际上却出问题了，因为我没有限制图片大小和数量，图片稍微多一些，浏览器直接内存溢出崩了。而用toDataURL反而更快更稳定。代码里面两个方法都写了，有兴趣可以分别试试这两个方法。

最后就是下载，提供了单独下载和批量下载，单独下载就不说了，就是之前分享的学学文件对象里面就有模拟a链接点击下载，批量下载这边是用了jszip和file-saver，使用也挺简单的，jszip依赖file-saver，jszip的npm上的文档也没说，按道理既然依赖应该要内部实现依赖，我用的时候要自己安装和引用，不过也不确定，没有特地去实验就是了。

实现一个压缩图片功能相关推荐

使用squoosh网的压缩方法实现浏览器前端压缩图片功能
假如说你做的网站有需要用户自定义上传图片的功能,那么往往这些图片,都需要进行压缩,且往往是需要经过服务器端压缩的.同时如果说你不懂图片压缩原理的话,你还得去花钱使用他人的API进行图片压缩(例如tin ...
java压缩图片比例quality_Java实现的上传并压缩图片功能【可等比例压缩或原尺寸压缩】...
本文实例讲述了java实现的上传并压缩图片功能.分享给大家供大家参考,具体如下: 先看效果: 原图:1.33M 处理后:27.4kb 关键代码: package codeGenerate.util; ...
php压缩图片,PHP压缩图片功能的介绍
php程序开发中经常涉及到生成缩略图,利用php生成缩略图这个过程本身没难度,但是你知道php能够优化调节生成的缩略图的质量吗?也就是说php能够控制生成缩略图的清晰度以及生成后的缩略图的体积.下面我 ...
JavaScript前端实现压缩图片功能
通过原生的input标签拿到要上传的图片文件将图片文件转化成img元素标签在canvas上压缩绘制该HTMLImageElement 将canvas绘制的图像转成blob文件最后将该blob文件 ...
推荐一个压缩图片好用的网站-tinyPNG
在制作图片的过程中,会遇到图片太大的问题,如何把网页中要用到的图片压缩到最小,这是不时都会考虑的一个问题,试了很多种方法,折腾了很久,但图片太大的问题,仍是得不到解决,后来,在一位美工老师的推荐下,使 ...
如何批量压缩图片？这两种方法轻松批量压缩
怎么批量压缩图片呢?图片是我们日常生活中常用的一种文件形式,不管是游玩还是学习或办公,或多或少都会使用到图片.但是随着智能手机的相机功能越来越强大,像素越来越高,所拍摄出来的照片内存非常大,当使用的图 ...
上传时压缩图片-Picdict
上一篇:网站速度测试.分析上篇文章推荐了大家一款可以测试网页速度,定位网站优化方向的工具------PageSpeed,看我文章的想必都看到了,我的网页首要优化提升速度的就是提供压缩后的图片,所以我 ...
PHP 按一定比例压缩图片，保持清晰度
图片压缩是我们日常开发中经常使用的操作,在如今需求很多的情况往往,上传的一张图片会被压缩成不同比例的图片,每次去操作也是一件非常繁琐的事情,于是进行了封装了一个压缩图片的操作类,希望大家遇到后,不用再 ...
Java实现批量压缩图片裁剪压缩多种尺寸缩略图一键批量上传图片
10万+IT人都在关注的图片批量压缩上传方案(完整案例+代码) 背景需求:为了客户端访问图片资源时,加载图片更流畅,体验更好,通常不会直接用原图路径,需要根据不同的场景显示不同规格的缩略图,根据商品关 ...

实现一个压缩图片功能

实现一个压缩图片功能相关推荐

最新文章

热门文章