@~lisfan/vue-upyun-image-format
Version:
vue过滤器插件-又拍云图片处理工具：默认以指定的策略规则进行了处理优化
490 lines (221 loc) • 12.2 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home - 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">
<section class="readme">
<article><h1 id="vue-upyun-image-format">vue-upyun-image-format</h1>
<h2 id="vue-">vue过滤器插件-又拍云图片处理工具：默认以指定的策略规则进行了处理优化</h2>
<p><a href="https://lisfan.github.io/vue-upyun-image-format/">API documentation</a></p>
<h2 id="feature-">Feature 特性</h2>
<ul>
<li>利用又拍云的图片处理服务，提供最适当的图片默认优化策略</li>
</ul>
<h2 id="detail-">Detail 详情</h2>
<ul>
<li>图片优化依赖了又拍云的处理服务，相应的图片处理规则请参考<a href="http://docs.upyun.com/cloud/image/#webp">又拍云文档</a></li>
<li>根据当前设计稿和设备物理分辨率缩放比，及设备的DPR值，计算出实际的图片尺寸</li>
<li>由于 <a href="https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation">NetworkInformation API</a>支持力度差，所以需要外部额外传入一个获取网络制式的方式（比如平台入口是微信或支付宝的）</li>
<li>使用格式：<code><img :src="图片地址 | image-format([sizeOrConfig],[scale = 'both'],[format],[quality],[otherRules])" /></code></li>
</ul>
<h2 id="install-">Install 安装</h2>
<pre class="prettyprint source lang-bash"><code>npm install -S @~lisfan/vue-upyun-image-format</code></pre><h2 id="usage-">Usage 起步</h2>
<pre class="prettyprint source lang-js"><code>import Vue from 'vue'
import VueUpyunImageFormat from '@~lisfan/vue-upyun-image-format'
// 注册指令
// 以下是默认值
Vue.use(VueUpyunImageFormat, {
debug: true, // 开启调试模式
maxDPR: 3, // (>=4)g网络或者'unknow'未知网络下，DPR取值的最大数
draftRatio: 2, // UI设计稿尺寸与设备物理尺寸的比例
scale: 'both', // 又拍云图片尺寸缩放方式，默认宽度进行自适应，超出尺寸进行裁剪，若自定义尺寸大于原尺寸时，自动缩放至指定尺寸再裁剪
quality: 90, // 又拍云jpg格式图片压缩质量
rules: '', // 又拍云图片处理的其他规则
minWidth: global.document.documentElement.clientWidth * global.devicePixelRatio / 2, // 默认值是(当前设备的物理分辨率 * 当前实际设备像素比的) 二分之一
networkHandler() {
// 获取网络制式的处理函数，如果实在不知道怎么获取，建议返回4g
return '4g'
}
})</code></pre><pre class="prettyprint source lang-html"><code><!-- 无作何参数：使用原尺寸，内部使用默认优化策略，转换为jpg，压缩90%，并启用渐进载入 -->
<img :src="imageSrc | image-format">
<!-- 使用原尺寸，转换为png，并启用png压缩优化算法 -->
<img :src="imageSrc | image-format('200x300',null,'png')">
<!-- 裁剪为500宽500高的尺寸，转换为jpg，压缩80% -->
<img :src="imageSrc | image-format('500',null,null,80)">
<!-- 使用宽高适应缩放方式，以最小边为准，转换为jpg，不压缩质量 -->
<img :src="imageSrc | image-format('500x100','fwfh',null,100)">
<!-- 以字典方式进行配置 设置宽度为400px，不进行渐进载入，转换为jpg，压缩质量为50% -->
<img :src="imageSrc | image-format({
size:'400',
scale:'both',
progressive:false,
quality:50,
})">
<!-- 使用默认配置，但配置了一些其他规则：增加水印，你好 -->
<img :src="imageSrc | image-format(null,null,null,null,'/watermark/text/5L2g5aW977yB')"></code></pre><h2 id="-">附：又拍云图片处理的研究报告</h2>
<p><strong>注1：该测试是建立在使用又拍云的图片处理服务的，所以其他场景下结果会有不同，不要沿用</strong></p>
<p><strong>注2：本测试只考虑了图片的容量对加载速度的影响，并不考虑因图片格式的不同，而造成的浏览器渲染图片速度的问题</strong></p>
<p><strong>注3：但可能存在的一个规则是：图片数量级越多，图片容量越小，最终的渲染总时间消耗越少</strong></p>
<h3 id="-png-jpg-webp-">静态图源（<code>png/jpg/webp</code>）的对比（ 同一图源，相同尺寸下 ）</h3>
<ol>
<li>未使用任何优化的情况下<ul>
<li>png > 无损webp > jpg > 有损webp</li>
</ul>
</li>
<li>使用压缩优化(<code>compress/true</code>)的情况下：压缩后的png比未压缩优化约65%，压缩jpg比未压缩优化约5%<ul>
<li>png > 无损webp > 压缩png > jpg > 压缩jpg > 有损webp</li>
</ul>
</li>
<li>png设置了压缩优化后(<code>compress/true</code>)<ul>
<li>png -> png压缩算法，容量优化约65%</li>
</ul>
</li>
<li>png转jpg，png转webp<ul>
<li>png -> jpg，容量优化约70%</li>
<li>png -> webp，容量优化约95%</li>
</ul>
</li>
<li>jpg转webp<ul>
<li>jpg -> webp，容量优化约80%</li>
</ul>
</li>
<li>jpg设置了压缩质量(<code>quality/<number></code>)后<ul>
<li>jpg 90%的质量下，容量优化35%</li>
<li>jpg 80%的质量下，容量优化约60%</li>
</ul>
</li>
<li>png、webp、jpg图片质量相较时（纯肉眼判断）<ul>
<li>jpg格式的色彩饱和度最好，饱满靓丽</li>
<li>png和webp饱和度质量相差无几，整体偏灰，饱和底下降会比较明显</li>
<li>webp如果细看会有模糊感，细节会丢失</li>
<li>jpg在压缩质量90%情况下细节还原度还挺高，压缩质量80%的情况下细节丢失度还是挺严重的，但总体细节还原还是比webp好</li>
<li>所以针对于大尺寸图片，在质量和容量双重保证的情况下使用jpg格式，而对于小尺寸图片，则优先使用webp格式</li>
</ul>
</li>
</ol>
<h3 id="-gif-webp-">动态图源（gif/动态webp）的对比（ 同一图源，相同尺寸下 ）</h3>
<ol>
<li>未使用任何优化的情况下<ul>
<li>无损动态webp > gif > 有损动态webp</li>
</ul>
</li>
<li>gif转无损webp，gif转有损webp，<ul>
<li>gif -> 无损webp，容量增长约10%</li>
<li>gif -> 有损webp，容量优化约80%</li>
</ul>
</li>
<li>gif转换为有损webp，并没有明显的不适感</li>
</ol>
<h2 id="-">实行约定（也是该插件的内部默认优化策略）</h2>
<h3 id="-">图片格式</h3>
<p>默认情况下，根据浏览器对webp特性的支持情况，图片格式会按照以下不同的场景转换成webp或jpg</p>
<ul>
<li>(静态，支持webp，图片宽小于设备物理分辨率*dpr的2分之1时)，格式化为webp格式（又拍云api: <code>/format/webp</code>）</li>
<li>(静态，支持webp，图片宽大于设备物理分辨率*dpr的2分之1时)，格式化为jpg格式（又拍云api: <code>/format/jpg</code>）</li>
<li>(静态，不支持webp)，格式化为jpg格式（又拍云api: <code>/format/jpg</code>）</li>
<li>(动态，支持动态webp时)，格式化为webp格式（又拍云api: <code>/format/webp</code>）</li>
<li>(动态，不支持动态webp时)，格式化为gif格式，不作变动</li>
</ul>
<h3 id="-">图片质量</h3>
<ul>
<li>图片格式为 jpg 格式时，使用90%压缩质量（又拍云api: <code>/quality/90</code>）</li>
<li>图片格式为 png 格式时，使用压缩优化（又拍云api: <code>/compress/true</code>）</li>
<li>图片格式为 webp 格式时，使用有损webp</li>
<li>图片格式为 gif 格式时，不作变动</li>
</ul>
<h3 id="-">图片尺寸</h3>
<p>默认宽度进行自适应，超出尺寸进行<strong>裁剪</strong>，若自定义尺寸大于原尺寸时，自动缩放至指定尺寸再裁剪（又拍云api: <code>/both/宽x高</code>）</p>
<h3 id="-">其他优化</h3>
<p>图片格式为 jpg 格式时，启用模糊到清晰的<strong>渐进加载</strong>效果（又拍云api: <code>/progressive/true</code>）</p>
<h3 id="-">注意点</h3>
<p>图片格式为 jpg 格式时，同时使用<strong>渐进加载</strong>和<strong>压缩优化</strong>会有冲突，具体表现：渐进加载是一个从灰阶图片到彩色图片的渲染</p></article>
</section>
<section>
<header>
<h2>
index.js
</h2>
</header>
<article>
<div class="container-overview">
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="index.js.html">index.js</a>, <a href="index.js.html#line1">line 1</a>
</li></ul></dd>
<dt class="tag-version">Version:</dt>
<dd class="tag-version"><ul class="dummy"><li>2.0.0</li></ul></dd>
<dt class="tag-author">Author:</dt>
<dd class="tag-author">
<ul>
<li><a href="mailto:goolisfan@gmail.com">lisfan</a></li>
</ul>
</dd>
</dl>
<div class="description"><p>又拍云图片处理工具插件</p></div>
</div>
</article>
</section>
<section>
<header>
<h2>
utils/get-network-type.js
</h2>
</header>
<article>
<div class="container-overview">
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="utils_get-network-type.js.html">utils/get-network-type.js</a>, <a href="utils_get-network-type.js.html#line1">line 1</a>
</li></ul></dd>
</dl>
<div class="description"><p>获取网络制式</p></div>
</div>
</article>
</section>
<section>
<header>
<h2>
utils/webp-features-support.js
</h2>
</header>
<article>
<div class="container-overview">
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="utils_webp-features-support.js.html">utils/webp-features-support.js</a>, <a href="utils_webp-features-support.js.html#line1">line 1</a>
</li></ul></dd>
</dl>
<div class="description"><p>检测webp特性的支持程度</p></div>
</div>
</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>