avatar

tetsai

原创声明

本文由tetsai原创,转载请注明来源

webpjs-0.0.2.min.js 下载

文件下载地址:https://gitee.com/tetsai_net/FileShare/raw/master/webpjs-0.0.2.min.js

-来自:https://gitee.com/tetsai_net/FileShare/tree/master

顺便鄙视一下CSDN把这种开源库拿到下载站付费下载的行为

使用方法

对使用webp图片的网页添加下面的代码

这段js会检测是否支持webp,如果不支持就用js算法对webp数据进行解析

<script>
(function(){var WebP=new Image();WebP.onload=WebP.onerror=function(){
if(WebP.height!=2){var sc=document.createElement('script');sc.type='text/javascript';sc.async=true;
var s=document.getElementsByTagName('script')[0];sc.src='https://gitee.com/tetsai_net/FileShare/raw/master/webpjs-0.0.2.min.js';s.parentNode.insertBefore(sc,s);}};
WebP.src='data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';})();
</script>

已知问题

个别webp图片解析不出来,比如

https://tetsai.net/private_blog/wp-content/uploads/2019/06/cropped-20190606112105_978446c434bf1969d7e156abec5e110d.png

不知道为什么,可能是bug

如果你的背景图片也用了webp

因为网页的背景图片写在了css里,这个webpjs无法很好的识别,可以写成img的形式

<img style="display:none;" src="当前背景图片地址" onload="document.body.style.backgroundImage='url('+this.src+')'" />

这段代码的意思就是,读取背景图片,如果背景图片成功加载,就把src的内容设为当前背景图

因为webpjs本质上就是解码webp为png图片然后修改src

所以当webpjs修改src后必然会导致onload执行,就可以把src的内容传给document.body.style.backgroundImage实现背景图的显示

发表评论

电子邮件地址不会被公开。 必填项已用*标注