Skip to content

Commit e1b8803

Browse files
banrikunGuangHui Ren
banrikun
authored and
GuangHui Ren
committedMay 9, 2017
change options: - disableWebp, + format, + fallback (#1)
·
2.11.02.7.0
1 parent 2c22aa8 commit e1b8803

File tree

7 files changed

+106
-41
lines changed

7 files changed

+106
-41
lines changed
 

‎README.md

+10-9
Original file line numberDiff line numberDiff line change
@@ -51,15 +51,16 @@ VueImg.getSrc({ ... }) // [Function] 获取图片地址
5151

5252
名称 | 描述 | 全局配置 | 指令参数 | getSrc 函数
5353
--- | --- | --- | --- | ---
54-
hash | [String] 图片哈希（必填）| 不支持 | 支持 | 支持
55-
width | [Number] 宽度 | 不支持 | 支持 | 支持
56-
height | [Number] 高度 | 不支持 | 支持 | 支持
57-
quality | [Number] 图片质量 | 支持 | 支持 | 支持
58-
prefix | [String] CDN 地址前缀 | 支持 | 支持 | 支持
59-
suffix | [String] CDN 处理后缀 [?] | 支持 | 支持 | 支持
60-
loading | [String] 加载中默认图片哈希 | 支持 | 支持 | 不支持
61-
error | [String] 失败替换图片哈希 | 支持 | 支持 | 不支持
62-
disableWebp | [Boolean] 禁用 webP | 支持 | 支持 | 支持
54+
hash | [String] 图片哈希（必填）| ✕ | 〇 | 〇
55+
width | [Number] 宽度 | ✕ | 〇 | 〇
56+
height | [Number] 高度 | ✕ | 〇 | 〇
57+
format | [String] 强制图片格式 | ✕ | 〇 | 〇
58+
fallback | [String] 不支持 webP 时转换格式 | ✕ | 〇 | 〇
59+
quality | [Number] 图片质量 | 〇 | 〇 | 〇
60+
prefix | [String] CDN 地址前缀 | 〇 | 〇 | 〇
61+
suffix | [String] CDN 处理后缀 [?] | 〇 | 〇 | 〇
62+
loading | [String] 加载中默认图片哈希 | 〇 | 〇 | ✕
63+
error | [String] 失败替换图片哈希 | 〇 | 〇 | ✕
6364

6465
- `suffix` 参数可用于模糊、旋转等特殊处理，具体请参考[《七牛 CDN 开发者文档》](http://developer.qiniu.com/code/v6/api/kodo-api/image/imagemogr2.html)。
6566

‎build/test/core.test.js

+11-3
Original file line numberDiff line numberDiff line change
@@ -48,9 +48,17 @@ describe('检测核心函数 getSrc', () => {
4848
.to.include('/!100x200r/gravity/Center/crop/100x200/')
4949
})
5050

51-
it('{ disableWebp }', () => {
52-
config.disableWebp = true
51+
it('{ fallback }', () => {
52+
VueImg.canWebp = false
53+
config.fallback = 'gif'
5354
expect(VueImg.getSrc(config))
54-
.to.not.include('webp')
55+
.to.include('format/gif')
56+
})
57+
58+
it('{ format }', () => {
59+
VueImg.canWebp = true
60+
config.format = 'png'
61+
expect(VueImg.getSrc(config))
62+
.to.include('format/png')
5563
})
5664
})

‎dist/vue-img.es6.js

+27-9
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,19 @@ VueImg$1.cdn = protocol + (env ? `fuss${env[0]}` : 'fuss10.elemecdn.com');
1414
// Translate hash to path
1515
const hashToPath = hash => hash.replace(/^(\w)(\w\w)(\w{29}(\w*))$/, '/$1/$2/$3.$4');
1616

17+
// Get image format
18+
const getFormat = ({ format, fallback }) => {
19+
const isFormat = /^(jpg|jpeg|png|gif)$/;
20+
21+
if (isFormat.test(format)) return `format/${format}/`
22+
if (VueImg$1.canWebp) return 'format/webp/'
23+
return isFormat.test(fallback)
24+
? `format/${fallback}/`
25+
: ''
26+
};
27+
1728
// Get image size
18-
const getSize = (width, height) => {
29+
const getSize = ({ width, height }) => {
1930
const thumb = 'thumbnail/';
2031
const cover = `${width}x${height}`;
2132

@@ -26,14 +37,20 @@ const getSize = (width, height) => {
2637
};
2738

2839
// Get image size
29-
const getSrc = ({ hash, width, height, prefix, suffix, quality, disableWebp } = {}) => {
40+
const getSrc = ({
41+
hash,
42+
width, height, quality,
43+
format, fallback,
44+
prefix, suffix,
45+
} = {}) => {
3046
if (!hash || typeof hash !== 'string') return ''
3147

3248
const _prefix = typeof prefix === 'string' ? prefix : VueImg$1.cdn;
33-
const _suffix = typeof suffix === 'string' ? suffix : '';
3449
const _quality = typeof quality === 'number' ? `quality/${quality}/` : '';
35-
const _format = !disableWebp && VueImg$1.canWebp ? 'format/webp/' : '';
36-
const params = `${_quality}${_format}${getSize(width, height)}${_suffix}`;
50+
const _format = getFormat({ format, fallback });
51+
const _size = getSize({ width, height });
52+
const _suffix = typeof suffix === 'string' ? suffix : '';
53+
const params = `${_quality}${_format}${_size}${_suffix}`;
3754

3855
return _prefix + hashToPath(hash) + (params ? `?imageMogr/${params}` : '')
3956
};
@@ -59,28 +76,28 @@ const setAttr = (el, src, tag) => {
5976
var getImageClass = (opt = {}) => {
6077
class GlobalOptions {
6178
constructor() {
79+
// Global
6280
copyKeys({
6381
source: opt,
6482
target: this,
6583
keys: [
6684
'loading', 'error',
6785
'quality',
6886
'prefix', 'suffix',
69-
'disableWebp',
7087
],
7188
});
7289
}
7390

7491
hashToSrc(hash) {
7592
const params = { hash };
76-
93+
// Get src
7794
copyKeys({
7895
source: this,
7996
target: params,
8097
keys: [
8198
'width', 'height', 'quality',
99+
'format', 'fallback',
82100
'prefix', 'suffix',
83-
'disableWebp',
84101
],
85102
});
86103
return getSrc(params)
@@ -94,14 +111,15 @@ var getImageClass = (opt = {}) => {
94111
: { hash: value };
95112

96113
super();
114+
// Directive
97115
copyKeys({
98116
source: params,
99117
target: this,
100118
keys: [
101119
'hash', 'loading', 'error',
102120
'width', 'height', 'quality',
121+
'format', 'fallback',
103122
'prefix', 'suffix',
104-
'disableWebp',
105123
],
106124
});
107125
}

‎dist/vue-img.js

+30-10
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,25 @@ VueImg$1.cdn = protocol + (env ? ("fuss" + (env[0])) : 'fuss10.elemecdn.com');
2020
// Translate hash to path
2121
var hashToPath = function (hash) { return hash.replace(/^(\w)(\w\w)(\w{29}(\w*))$/, '/$1/$2/$3.$4'); };
2222

23+
// Get image format
24+
var getFormat = function (ref) {
25+
var format = ref.format;
26+
var fallback = ref.fallback;
27+
28+
var isFormat = /^(jpg|jpeg|png|gif)$/;
29+
30+
if (isFormat.test(format)) { return ("format/" + format + "/") }
31+
if (VueImg$1.canWebp) { return 'format/webp/' }
32+
return isFormat.test(fallback)
33+
? ("format/" + fallback + "/")
34+
: ''
35+
};
36+
2337
// Get image size
24-
var getSize = function (width, height) {
38+
var getSize = function (ref) {
39+
var width = ref.width;
40+
var height = ref.height;
41+
2542
var thumb = 'thumbnail/';
2643
var cover = width + "x" + height;
2744

@@ -37,18 +54,20 @@ var getSrc = function (ref) {
3754
var hash = ref.hash;
3855
var width = ref.width;
3956
var height = ref.height;
57+
var quality = ref.quality;
58+
var format = ref.format;
59+
var fallback = ref.fallback;
4060
var prefix = ref.prefix;
4161
var suffix = ref.suffix;
42-
var quality = ref.quality;
43-
var disableWebp = ref.disableWebp;
4462

4563
if (!hash || typeof hash !== 'string') { return '' }
4664

4765
var _prefix = typeof prefix === 'string' ? prefix : VueImg$1.cdn;
48-
var _suffix = typeof suffix === 'string' ? suffix : '';
4966
var _quality = typeof quality === 'number' ? ("quality/" + quality + "/") : '';
50-
var _format = !disableWebp && VueImg$1.canWebp ? 'format/webp/' : '';
51-
var params = "" + _quality + _format + (getSize(width, height)) + _suffix;
67+
var _format = getFormat({ format: format, fallback: fallback });
68+
var _size = getSize({ width: width, height: height });
69+
var _suffix = typeof suffix === 'string' ? suffix : '';
70+
var params = "" + _quality + _format + _size + _suffix;
5271

5372
return _prefix + hashToPath(hash) + (params ? ("?imageMogr/" + params) : '')
5473
};
@@ -79,28 +98,28 @@ var getImageClass = function (opt) {
7998
if ( opt === void 0 ) opt = {};
8099

81100
var GlobalOptions = function GlobalOptions() {
101+
// Global
82102
copyKeys({
83103
source: opt,
84104
target: this,
85105
keys: [
86106
'loading', 'error',
87107
'quality',
88108
'prefix', 'suffix',
89-
'disableWebp',
90109
],
91110
});
92111
};
93112

94113
GlobalOptions.prototype.hashToSrc = function hashToSrc (hash) {
95114
var params = { hash: hash };
96-
115+
// Get src
97116
copyKeys({
98117
source: this,
99118
target: params,
100119
keys: [
101120
'width', 'height', 'quality',
121+
'format', 'fallback',
102122
'prefix', 'suffix',
103-
'disableWebp',
104123
],
105124
});
106125
return getSrc(params)
@@ -113,14 +132,15 @@ var getImageClass = function (opt) {
113132
: { hash: value };
114133

115134
GlobalOptions.call(this);
135+
// Directive
116136
copyKeys({
117137
source: params,
118138
target: this,
119139
keys: [
120140
'hash', 'loading', 'error',
121141
'width', 'height', 'quality',
142+
'format', 'fallback',
122143
'prefix', 'suffix',
123-
'disableWebp',
124144
],
125145
});
126146
}

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-img",
3-
"version": "2.6.1",
3+
"version": "2.7.0",
44
"description": "hash2path wrapper for vue 2",
55
"main": "dist/vue-img.js",
66
"scripts": {

‎src/class.js

+5-4
Original file line numberDiff line numberDiff line change
@@ -4,28 +4,28 @@ import getSrc from './src'
44
export default (opt = {}) => {
55
class GlobalOptions {
66
constructor() {
7+
// Global
78
copyKeys({
89
source: opt,
910
target: this,
1011
keys: [
1112
'loading', 'error',
1213
'quality',
1314
'prefix', 'suffix',
14-
'disableWebp',
1515
],
1616
})
1717
}
1818

1919
hashToSrc(hash) {
2020
const params = { hash }
21-
21+
// Get src
2222
copyKeys({
2323
source: this,
2424
target: params,
2525
keys: [
2626
'width', 'height', 'quality',
27+
'format', 'fallback',
2728
'prefix', 'suffix',
28-
'disableWebp',
2929
],
3030
})
3131
return getSrc(params)
@@ -39,14 +39,15 @@ export default (opt = {}) => {
3939
: { hash: value }
4040

4141
super()
42+
// Directive
4243
copyKeys({
4344
source: params,
4445
target: this,
4546
keys: [
4647
'hash', 'loading', 'error',
4748
'width', 'height', 'quality',
49+
'format', 'fallback',
4850
'prefix', 'suffix',
49-
'disableWebp',
5051
],
5152
})
5253
}

‎src/src.js

+22-5
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,19 @@ import VueImg from './base'
33
// Translate hash to path
44
const hashToPath = hash => hash.replace(/^(\w)(\w\w)(\w{29}(\w*))$/, '/$1/$2/$3.$4')
55

6+
// Get image format
7+
const getFormat = ({ format, fallback }) => {
8+
const isFormat = /^(jpg|jpeg|png|gif)$/
9+
10+
if (isFormat.test(format)) return `format/${format}/`
11+
if (VueImg.canWebp) return 'format/webp/'
12+
return isFormat.test(fallback)
13+
? `format/${fallback}/`
14+
: ''
15+
}
16+
617
// Get image size
7-
const getSize = (width, height) => {
18+
const getSize = ({ width, height }) => {
819
const thumb = 'thumbnail/'
920
const cover = `${width}x${height}`
1021

@@ -15,14 +26,20 @@ const getSize = (width, height) => {
1526
}
1627

1728
// Get image size
18-
const getSrc = ({ hash, width, height, prefix, suffix, quality, disableWebp } = {}) => {
29+
const getSrc = ({
30+
hash,
31+
width, height, quality,
32+
format, fallback,
33+
prefix, suffix,
34+
} = {}) => {
1935
if (!hash || typeof hash !== 'string') return ''
2036

2137
const _prefix = typeof prefix === 'string' ? prefix : VueImg.cdn
22-
const _suffix = typeof suffix === 'string' ? suffix : ''
2338
const _quality = typeof quality === 'number' ? `quality/${quality}/` : ''
24-
const _format = !disableWebp && VueImg.canWebp ? 'format/webp/' : ''
25-
const params = `${_quality}${_format}${getSize(width, height)}${_suffix}`
39+
const _format = getFormat({ format, fallback })
40+
const _size = getSize({ width, height })
41+
const _suffix = typeof suffix === 'string' ? suffix : ''
42+
const params = `${_quality}${_format}${_size}${_suffix}`
2643

2744
return _prefix + hashToPath(hash) + (params ? `?imageMogr/${params}` : '')
2845
}

0 commit comments

Comments
 (0)
Please sign in to comment.