苹果Iphone |
您所在的位置：网站首页 › 不支持的图片格式 › 苹果Iphone |
|
webp支持的范围 截止到2021年7月27日，webp格式支持的范围如下图（最新webp格式支持的设备）： 如果项目是基于ios14.x以上的系统版本，那么可以放心的使用。 由于我手机IOS版本过低（13.3.1），打开嵌入有webp的页面，效果如下： 在安卓上的支持性，就非常的好了，我的一款华为畅享系列的手机都支持。所以在安卓上可以放心使用。 IOS不支持的原因iOS 这边：根据App Store 审核指南 - Apple Developer第 2.5.6 条：「如果 app 会浏览网页，则必须使用相应的 WebKit 框架和 WebKit Javascript」，上架 App Store 的应用不允许使用自己的浏览器内核iOS 的 WebView 基于 SafariSafari 不支持 WebP安卓这边：安卓不限制应用使用自己的浏览器内核，安卓微信用了腾讯自己的基于 WebKit 的 X5 内核：腾讯浏览服务安卓的 WebView 基于 ChromiumChromium 支持 WebP，所以即使微信直接使用系统的 WebView 也支持 WebP检测浏览器是否支持webp使用 canvas 的 toDataURL 进行判断经过真机测试，在IOS版本在14以上的设备上(即支持webp播放的设备上)，也会提示false，所以此方法还是有点问题。经测试，document.createElement('canvas').toDataURL('image/webp', 0.5)在ios手机上会打印data:image/png;base64,..（无论是否是14.x之上或者之下的版本），只有在PC和安卓上才会打印data:image/webp;base64,所以这个方法仅仅作为参考，或者快速筛选出ios机型。 toDataURL方法在MDN解释如下：HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI 。可以使用 type 参数其类型，默认为 PNG 格式。图片的分辨率为96dpi。如果画布的高度或宽度是0，那么会返回字符串“data:,”。如果传入的类型非“image/png”，但是返回的值以“data:image/png”开头，那么该传入的类型是不支持的。Chrome支持“image/webp”类型。toDataURL方法将图片转化为包含dataURI的DOMString，通过 base64 编码前面的图片类型值是image/webp进行判断。比如在谷歌浏览器使用toDataURL方法转成image/webp： 在 Safari 浏览器使用toDataURL方法转成image/webp： 可以发现在不支持 webp 的浏览器进行toDataURL，得到的图片类型并不是 webp，因此我们可以通过这个进行判断。 以下方法在IOS上判断会有错误，在IOS14.x支持webp的设备上也会得到false.试用时要特别注意，一定要进行真机测试，再决定是否使用。 var isSupportWebp = function () { try { return document.createElement('canvas') .toDataURL('image/webp', 0.5) .indexOf('data:image/webp') === 0; } catch(err) { return false; } }(); // 自执行通过加载一张 webp 图片进行判断const supportsWebp = ({ createImageBitmap, Image }) => { if (!createImageBitmap || !Image) return Promise.resolve(false); return new Promise(resolve => { const image = new Image(); image.onload = () => { createImageBitmap(image) .then(() => { resolve(true); }) .catch(() => { resolve(false); }); }; image.onerror = () => { resolve(false); }; image.src = 'data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA='; }); }; const webpIsSupported = () => { let memo = null; return () => { if (!memo) { memo = supportsWebp(window); } return memo; }; }; webpIsSupported()().then(res => { console.log("是否支持 webp", res) }).catch(err => { console.log(err) })此方法会加载一张 1x1 的白色的正方形背景图，用来测试浏览器是否支持 webp。 Google官方处理（推荐，无论什么机型都会得到正确结果）先加载一个WebP图片，如果能获取到图片的宽度和高度，就说明是支持WebP的，反之则不支持 function check_webp_feature(feature, callback) { var kTestImages = { lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA", lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==", alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==", animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA" }; var img = new Image(); img.onload = function () { var result = (img.width > 0) && (img.height > 0); callback(feature, result); }; img.onerror = function () { callback(feature, false); }; img.src = "data:image/webp;base64," + kTestImages[feature]; }应用： check_webp_feature('lossless', function(fea, res) { alert(res); // IOS-14之前的会显示false });PHP判断浏览器是否支持# 判断浏览器是否支持webp解析 1支持 0不支持 $webp = strpos($_SERVER['HTTP_ACCEPT'], 'image/webp'); define('IS_WEBP', $webp === false ? 0 : 1); echo IS_WEBP; 相关资料 【知乎】检测浏览器是否支持webp 【caniuse】最新webp格式支持 【知乎】为什么微信iOS端内置浏览器不支持webp格式的图片，而安卓支持？ |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |