365 lines
9.8 KiB
Vue
365 lines
9.8 KiB
Vue
<template>
|
|
<transition name="viewer-fade">
|
|
<div ref="el-image-viewer__wrapper" tabindex="-1" class="el-image-viewer__wrapper" :style="{ 'z-index': zIndex }">
|
|
<div class="el-image-viewer__mask" :class="imgShow ? '' : 'el-pdf-viewer__mask'" />
|
|
<!-- CLOSE -->
|
|
<span class="el-image-viewer__btn el-image-viewer__close" @click="hide">
|
|
<i class="el-icon-circle-close" />
|
|
</span>
|
|
<!-- ARROW -->
|
|
<template v-if="!isSingle">
|
|
<span
|
|
class="el-image-viewer__btn el-image-viewer__prev"
|
|
:class="{ 'is-disabled': !infinite && isFirst }"
|
|
@click="prev"
|
|
>
|
|
<i class="el-icon-arrow-left" />
|
|
</span>
|
|
<span
|
|
class="el-image-viewer__btn el-image-viewer__next"
|
|
:class="{ 'is-disabled': !infinite && isLast }"
|
|
@click="next"
|
|
>
|
|
<i class="el-icon-arrow-right" />
|
|
</span>
|
|
</template>
|
|
<!-- ACTIONS -->
|
|
<div v-if="imgShow" class="el-image-viewer__btn el-image-viewer__actions">
|
|
<div class="el-image-viewer__actions__inner">
|
|
<i class="el-icon-zoom-out" @click="handleActions('zoomOut')" />
|
|
<i class="el-icon-zoom-in" @click="handleActions('zoomIn')" />
|
|
<i class="el-image-viewer__actions__divider" />
|
|
<i :class="mode.icon" @click="toggleMode" />
|
|
<i class="el-image-viewer__actions__divider" />
|
|
<i title="打印" class="el-icon-printer" @click="handlePrinter" />
|
|
<i class="el-image-viewer__actions__divider" />
|
|
<i class="el-icon-refresh-left" @click="handleActions('anticlocelise')" />
|
|
<i class="el-icon-refresh-right" @click="handleActions('clocelise')" />
|
|
</div>
|
|
</div>
|
|
<!-- CANVAS -->
|
|
<div v-if="imgShow" class="el-image-viewer__canvas">
|
|
<div v-for="(url, i) in urlList" :key="i">
|
|
<img
|
|
v-if="i === index"
|
|
id="img"
|
|
ref="img"
|
|
:key="i"
|
|
class="el-image-viewer__img"
|
|
:src="currentImg"
|
|
:style="imgStyle"
|
|
@load="handleImgLoad"
|
|
@error="handleImgError"
|
|
@mousedown="handleMouseDown"
|
|
>
|
|
</div>
|
|
</div>
|
|
<div v-if="!imgShow" class="el-image-viewer__canvas">
|
|
<iframe id="iframeref" :src="currentImg" frameborder="0" width="100%" height="100%" />
|
|
</div>
|
|
<canvas id="test" />
|
|
</div>
|
|
</transition>
|
|
</template>
|
|
|
|
<script>
|
|
import { on, off } from 'element-ui/src/utils/dom'
|
|
import { rafThrottle, isFirefox } from 'element-ui/src/utils/util'
|
|
const Mode = {
|
|
CONTAIN: {
|
|
name: 'contain',
|
|
icon: 'el-icon-full-screen'
|
|
},
|
|
ORIGINAL: {
|
|
name: 'original',
|
|
icon: 'el-icon-c-scale-to-original'
|
|
}
|
|
}
|
|
|
|
const mousewheelEventName = isFirefox() ? 'DOMMouseScroll' : 'mousewheel'
|
|
export default {
|
|
name: 'ElImageViewer',
|
|
components: { },
|
|
|
|
props: {
|
|
urlList: {
|
|
type: [Array, String],
|
|
default: () => []
|
|
},
|
|
zIndex: {
|
|
type: Number,
|
|
default: 3000
|
|
},
|
|
onSwitch: {
|
|
type: Function,
|
|
default: () => {}
|
|
},
|
|
onClose: {
|
|
type: Function,
|
|
default: () => {}
|
|
},
|
|
initialIndex: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
watermark: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
imgUrl: '',
|
|
index: this.initialIndex,
|
|
isShow: false,
|
|
infinite: true,
|
|
loading: false,
|
|
imgShow: true,
|
|
mode: Mode.CONTAIN,
|
|
transform: {
|
|
scale: 1,
|
|
deg: 0,
|
|
offsetX: 0,
|
|
offsetY: 0,
|
|
enableTransition: false
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
isSingle() {
|
|
return this.urlList?.length <= 1
|
|
},
|
|
isFirst() {
|
|
return this.index === 0
|
|
},
|
|
isLast() {
|
|
return this.index === this.urlList?.length - 1
|
|
},
|
|
currentImg() {
|
|
const fileUrl = (typeof this.urlList[this.index] === 'object') ? this.urlList[this.index]?.url : this.urlList
|
|
return fileUrl
|
|
/* if (this.urlList[this.index]?.name.includes('pdf')) {
|
|
// return './pdfjs/web/viewer.html?file=' + fileUrl + '&keyword=' + encodeURIComponent(this.watermark)
|
|
return '/graduate/api/graduateInfo/showFile?id=' + fileUrl
|
|
} else {
|
|
return fileUrl
|
|
}*/
|
|
},
|
|
imgStyle() {
|
|
const { scale, deg, offsetX, offsetY, enableTransition } = this.transform
|
|
const style = {
|
|
transform: `scale(${scale}) rotate(${deg}deg)`,
|
|
transition: enableTransition ? 'transform .3s' : '',
|
|
'margin-left': `${offsetX}px`,
|
|
'margin-top': `${offsetY}px`
|
|
}
|
|
if (this.mode === Mode.CONTAIN) {
|
|
style.maxWidth = '100%'
|
|
style.maxHeight = '100%'
|
|
}
|
|
return style
|
|
}
|
|
},
|
|
watch: {
|
|
index: {
|
|
handler: function(val) {
|
|
this.reset()
|
|
this.onSwitch(val)
|
|
}
|
|
},
|
|
currentImg: {
|
|
handler(val) {
|
|
this.imgShow = this.urlList[this.index].indexOf('pdf') === -1
|
|
},
|
|
immediate: true
|
|
}
|
|
},
|
|
mounted() {
|
|
this.deviceSupportInstall()
|
|
// add tabindex then wrapper can be focusable via Javascript
|
|
// focus wrapper so arrow key can't cause inner scroll behavior underneath
|
|
this.$refs['el-image-viewer__wrapper'].focus()
|
|
},
|
|
methods: {
|
|
hide() {
|
|
this.deviceSupportUninstall()
|
|
this.onClose()
|
|
},
|
|
deviceSupportInstall() {
|
|
this._keyDownHandler = rafThrottle(e => {
|
|
const keyCode = e.keyCode
|
|
switch (keyCode) {
|
|
// ESC
|
|
case 27:
|
|
this.hide()
|
|
break
|
|
// SPACE
|
|
case 32:
|
|
this.toggleMode()
|
|
break
|
|
// LEFT_ARROW
|
|
case 37:
|
|
this.prev()
|
|
break
|
|
// UP_ARROW
|
|
case 38:
|
|
this.handleActions('zoomIn')
|
|
break
|
|
// RIGHT_ARROW
|
|
case 39:
|
|
this.next()
|
|
break
|
|
// DOWN_ARROW
|
|
case 40:
|
|
this.handleActions('zoomOut')
|
|
break
|
|
}
|
|
})
|
|
this._mouseWheelHandler = rafThrottle(e => {
|
|
const delta = e.wheelDelta ? e.wheelDelta : -e.detail
|
|
if (delta > 0) {
|
|
this.handleActions('zoomIn', {
|
|
zoomRate: 0.015,
|
|
enableTransition: false
|
|
})
|
|
} else {
|
|
this.handleActions('zoomOut', {
|
|
zoomRate: 0.015,
|
|
enableTransition: false
|
|
})
|
|
}
|
|
})
|
|
on(document, 'keydown', this._keyDownHandler)
|
|
on(document, mousewheelEventName, this._mouseWheelHandler)
|
|
},
|
|
deviceSupportUninstall() {
|
|
off(document, 'keydown', this._keyDownHandler)
|
|
off(document, mousewheelEventName, this._mouseWheelHandler)
|
|
this._keyDownHandler = null
|
|
this._mouseWheelHandler = null
|
|
},
|
|
handleImgLoad(e) {
|
|
this.loading = false
|
|
},
|
|
handleImgError(e) {
|
|
this.loading = false
|
|
e.target.alt = '加载失败'
|
|
},
|
|
handleMouseDown(e) {
|
|
if (this.loading || e.button !== 0) return
|
|
|
|
const { offsetX, offsetY } = this.transform
|
|
const startX = e.pageX
|
|
const startY = e.pageY
|
|
this._dragHandler = rafThrottle(ev => {
|
|
this.transform.offsetX = offsetX + ev.pageX - startX
|
|
this.transform.offsetY = offsetY + ev.pageY - startY
|
|
})
|
|
on(document, 'mousemove', this._dragHandler)
|
|
on(document, 'mouseup', ev => {
|
|
off(document, 'mousemove', this._dragHandler)
|
|
})
|
|
|
|
e.preventDefault()
|
|
},
|
|
reset() {
|
|
this.transform = {
|
|
scale: 1,
|
|
deg: 0,
|
|
offsetX: 0,
|
|
offsetY: 0,
|
|
enableTransition: false
|
|
}
|
|
},
|
|
toggleMode() {
|
|
if (this.loading) return
|
|
|
|
const modeNames = Object.keys(Mode)
|
|
const modeValues = Object.values(Mode)
|
|
const index = modeValues.indexOf(this.mode)
|
|
const nextIndex = (index + 1) % modeNames.length
|
|
this.mode = Mode[modeNames[nextIndex]]
|
|
this.reset()
|
|
},
|
|
prev() {
|
|
if (this.isFirst && !this.infinite) return
|
|
const len = this.urlList.length
|
|
this.index = (this.index - 1 + len) % len
|
|
},
|
|
next() {
|
|
if (this.isLast && !this.infinite) return
|
|
const len = this.urlList.length
|
|
this.index = (this.index + 1) % len
|
|
},
|
|
handleActions(action, options = {}) {
|
|
if (this.loading) return
|
|
const { zoomRate, rotateDeg, enableTransition } = {
|
|
zoomRate: 0.2,
|
|
rotateDeg: 90,
|
|
enableTransition: true,
|
|
...options
|
|
}
|
|
const { transform } = this
|
|
switch (action) {
|
|
case 'zoomOut':
|
|
if (transform.scale > 0.2) {
|
|
transform.scale = parseFloat((transform.scale - zoomRate).toFixed(3))
|
|
}
|
|
break
|
|
case 'zoomIn':
|
|
transform.scale = parseFloat((transform.scale + zoomRate).toFixed(3))
|
|
break
|
|
case 'clocelise':
|
|
transform.deg += rotateDeg
|
|
break
|
|
case 'anticlocelise':
|
|
transform.deg -= rotateDeg
|
|
break
|
|
}
|
|
transform.enableTransition = enableTransition
|
|
},
|
|
handlePrinter() {
|
|
const img = document.getElementById('img')
|
|
|
|
img.style.maxHeight = 'none'
|
|
img.style.maxWidth = 'none'
|
|
|
|
let imgData = null
|
|
const canvas = document.createElement('canvas')
|
|
const context = canvas.getContext('2d')
|
|
const w = img.width
|
|
const h = img.height
|
|
|
|
canvas.width = w
|
|
canvas.height = h
|
|
context.drawImage(img, 0, 0)
|
|
imgData = context.getImageData(0, 0, w, h)
|
|
context.putImageData(imgData, 0, 0)
|
|
const newBase64 = canvas.toDataURL('image/png')
|
|
// 打印
|
|
this.$refs['img-printer'].handlePrinterImg(newBase64)
|
|
|
|
img.style.maxHeight = '100%'
|
|
img.style.maxWidth = '100%'
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.el-image-viewer__actions__inner {
|
|
i:hover {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.el-pdf-viewer__mask {
|
|
pointer-events: none;
|
|
background-color: unset;
|
|
}
|
|
|
|
#img {
|
|
}
|
|
|
|
</style>
|