-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathimg-preview.js
119 lines (111 loc) · 3.54 KB
/
img-preview.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
/**
*
* @authors zhazhjie (zhazhjie@vip.qq.com)
* @date 2018-05-12 15:32:18
* @version 1.0
*/
(function (global, factory) {
typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global.imgPreview = factory());
})(window, function () {
var imgPreview = {};
var params = {};
function getEl(id) {
return document.getElementById(id);
}
function createEl(el) {
var wrapper = document.createElement('div');
wrapper.id = 'img-preview-wrapper';
wrapper.style = 'width:100vw;height:100vh;position:fixed;top:0;left:0;z-index:9998;overflow-x:hidden;backgroundColor:rgba(0, 0, 0, 0);transition:all .3s;';
var img = document.createElement('img');
img.id = 'img-preview';
img.src = el.src;
img.style = 'cursor:zoom-out;position:absolute;transition:all .3s;margin-bottom:15px';
setImgSize(img, params);
wrapper.appendChild(img);
document.body.appendChild(wrapper);
wrapper.addEventListener('click', hideImg);
return {
img: img,
wrapper: wrapper
};
}
function setImgSize(img, data) {
img.style.width = data.width + 'px';
img.style.height = data.height + 'px';
img.style.top = data.top + 'px';
img.style.left = data.left + 'px';
}
function showImg(e) {
document.body.style.overflow = 'hidden';
params = this.getBoundingClientRect();
var wrapper = getEl('img-preview-wrapper');
var img = getEl('img-preview');
if (wrapper) {
wrapper.style.display = 'block';
img.src = this.src;
setImgSize(img, params);
} else {
var ele = createEl(this);
img = ele.img;
wrapper = ele.wrapper;
}
var margin = 30;
var imgWidth = img.naturalWidth || img.offsetWidth;
var imgHeight = img.naturalHeight || img.offsetHeight;
var imgRatio = imgWidth / imgHeight;
var winWidth = window.innerWidth - margin;
var winHeight = window.innerHeight - margin;
// var winRatio = winWidth / winHeight;
if (imgWidth > winWidth) {
imgWidth = winWidth;
imgHeight = imgWidth / imgRatio;
}
// else if (imgWidth > winWidth && imgRatio < winRatio) {
// imgHeight = winHeight;
// imgWidth = imgHeight * imgRatio;
// }
// if (imgHeight > winHeight) {
// imgHeight = winHeight;
// imgWidth = imgHeight * imgRatio;
// }
var top = margin >> 1;
var left = ((winWidth - imgWidth) >> 1) + top;
if (imgHeight <= winHeight) {
top = ((winHeight - imgHeight) >> 1) + top;
wrapper.style.overflowY = 'hidden';
} else {
wrapper.style.overflowY = 'scroll';
imgWidth -= wrapper.offsetWidth - wrapper.clientWidth;
}
setTimeout(function () {
setImgSize(img, {
width: imgWidth,
height: imgHeight,
top: top,
left: left
});
wrapper.style.backgroundColor = 'rgba(0,0,0,0.3)';
})
}
function hideImg() {
//console.log(this)
document.body.style.overflow = '';
setImgSize(getEl('img-preview'), params);
var wrapper = getEl('img-preview-wrapper');
wrapper.style.backgroundColor = 'rgba(0,0,0,0)';
setTimeout(function () {
wrapper.style.display = 'none';
}, 300)
}
imgPreview.install = function (Vue) {
Vue.directive('img-preview', {
bind: (el, binding) => {
el.style.cursor = 'zoom-in';
el.addEventListener('click', showImg)
}
})
};
return imgPreview;
});