web前端面试题附答案013-你网站里的图片用webp格式了吗?(没用过怎么办)_xingyu_qie的博客-爱代码爱编程
一、面试官为什么这么问?
不是都说了吗,同样的图片,png和webp对比,webp明显是有优势的,那肯定回答用了啊,而且使用起来又不是那么费劲,就把后缀改了呗。
如果你这么回答,面试官紧接着就会问,所有的图片都是webp格式的吗?除了你说小图片用了base64,其他图片貌似也都符合场景,那面试官这个时候十有八九是在问webp图片的支持性是如何做的
二、关于webp图片的支持性
1、gif图片不支持webp,这个是大家比较熟知的吧
<script>
// 服务端下发图片的变量,暂时前端定义一下吧
let url = 'aa.gif';
let urlLastPointIndex = url.lastIndexOf('.');
if (url.slice(urlLastPointIndex).indexOf('gif') !== -1) {
// gif图片不支持webp格式
} else {
// 其他可支持
}
</script>
2、但重点还不是gif图片,重点在于webp图片对于某些浏览器是不支持的,而不是你针对某一个图片做判断,而是要有一个公共方法来判断浏览器的支持性
<script>
let supportWebp = document.createElement("canvas").
toDataURL("image/webp", .5).indexOf("data:image/webp")
if (supportWebp !== -1) {
// 表示当前浏览器支持webp格式,将原来服务端下发的图片再拼接.webp后缀即可
}
</script>
3、可以看一下创建的这个canvas在利用toDataURL以后是个什么内容,虽然内容很多,但重点是要识别如果转成功以后是否包含data:image/webp的字眼
document.createElement("canvas").toDataURL("image/webp", .5)
------------------------------------
------------------
------------------------------------
'data:image/webp;base64,UklGRtgCAABX
RUJQVlA4WAoAAAAwAAAAKwEAlQAASUNDUBgC
AAAAAAIYAAAAAAQwAABtbnRyUkdCIFhZWiAA
......
......
4wMAAAAAAAAAA=='