这里主要讲解决的思路。
首先要先了解图片转换的原理HTMLCanvasElement.toBlob()。
前提说明
输入的图片信息:1600x1000px的jpg图片,大小2M
输出的图片信息:高宽不变,大小在200Kb以内,并尽可能的接近200Kb
耗时:越小越好
第一种思路-递归查找:
01. 分别输出不同画质(10、20、30...100%)的10种档位的图片
02.然后再依次判断它们的size是否小于200Kb,如果是则输出
03.如果不是就接着判断这10图片的size哪个最接近200Kb,假如是30%(270Kb)这个档位最接近,就再细分10个档位(21%、22%、23%...29%)最后再重复此步骤递归下去
缺点:如果运气不好,最多的时候需要计算30次才能找出最佳输出,如下图所示。
第二种思路-预测输入图片的压缩比:
输入的图片很有可能是已经压缩过的,如果能预测这个压缩比,就可以根据比率大致计算出输出的size(270Kb)所需要的画质数值。最后在递增或递减1%画质来寻找最接近指定的大小
经过测试大部分图片在10次以内就能找出最佳的指定大小,很多时候5-6次即可完成。
// 具体步骤我发现我不知道怎么表述出来... 先标记 以后理清了在补充
demo:
浏览器输出指定大小的jpg图片codepen.io完整可用的:
webp2jpg-online-在线图片格式转化器(无需上传)-web2jpg-Online image format converter (no upload required)renzhezhilu.gitee.io-end