@~lisfan/vue-upyun-image-format
Version:
vue过滤器插件-又拍云图片处理工具：默认以指定的策略规则进行了处理优化
150 lines (113 loc) • 4.05 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>utils/webp-features-support.js - Documentation</title>
<script src="scripts/prettify/prettify.js"></script>
<script src="scripts/prettify/lang-css.js"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/prettify.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
</head>
<body>
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
<div class="navicon"></div>
</label>
<label for="nav-trigger" class="overlay"></label>
<nav>
<h2><a href="index.html">Home</a></h2><h3>Global</h3><ul><li><a href="global.html#install">install</a></li><li><a href="global.html#image-format">image-format</a></li></ul>
</nav>
<div id="main">
<h1 class="page-title">utils/webp-features-support.js</h1>
<section>
<article>
<pre class="prettyprint source linenums"><code>/**
* @file 检测webp特性的支持程度
*/
import validation from '@~lisfan/validation'
import Logger from '@~lisfan/logger'
const logger = new Logger({
name: 'webp-features',
debug: false
})
// 将检测结果存储在sessionStorage中，期间只检测一次，避免重复求值
const storageName = 'WEBP_FEATURES'
const WEBP_FEATURES = JSON.parse(global.sessionStorage.getItem(storageName)) || {
lossy: undefined,
lossless: undefined,
animation: undefined
}
const IMAGES_SOURCE = {
// 有损图片
lossy: "data:image/webp;base64,UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
// 无损图片
lossless: "data:image/webp;base64,UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
// 支持alpha通道图片
// alpha:
// "data:image/webp;base64,UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
// 动态webp图片
animation: "data:image/webp;base64,UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"
}
/**
* 检测webp特性的支持程度
* @ignore
* @param {string} feature - 特性值
* @returns {Promise}
*/
function checkWebpFeatures(feature) {
return new Promise((resolve, reject) => {
let $image = new Image()
$image.onload = function () {
($image.width > 0) && ($image.height > 0) ? resolve(true) : reject(false)
}
$image.onerror = function () {
reject(false)
}
$image.src = IMAGES_SOURCE[feature]
})
}
// 发起检测
Object.entries(WEBP_FEATURES).forEach(([feature, isSupport]) => {
// 如果已经从缓存中先进知了支持结果，则不再处理
if (validation.isBoolean(isSupport)) {
logger.log('sessionStorage already existed test result:', feature, isSupport)
return
}
logger.log(`checking webp ${feature} feature`)
checkWebpFeatures(feature).then(() => {
WEBP_FEATURES[feature] = true
logger.log(`so lucky! support ${feature} feature`)
}).catch(() => {
WEBP_FEATURES[feature] = false
logger.log(`sorry! unsupport ${feature} feature`)
}).finally(() => {
// 存储检测成功后的结果
global.sessionStorage.setItem(storageName, JSON.stringify(WEBP_FEATURES))
})
})
export default {
/**
* 是否支持对应的webp特性
*
* @param {string} feature - 特性值
* @returns {boolean}
*/
support(feature) {
return WEBP_FEATURES[feature]
}
}
</code></pre>
</article>
</section>
</div>
<br class="clear">
<footer>
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Tue Nov 07 2017 17:34:19 GMT+0800 (CST) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
</footer>
<script>prettyPrint();</script>
<script src="scripts/linenumber.js"></script>
</body>
</html>