html如何显示缩略图,前端实现div（DOM）缩略图

methods: {

loadThumbnail () {

let timeer = setTimeout(() => {

if (document.readyState === 'complete') { // 判断页面是否加载完成

this.clickGeneratePicture()

}

}, 500)      // 清除定时器

this.$once('hook:beforeDestroy', () => {

clearTimeout(timeer)

})

},

/**

* 将页面指定节点内容转为图片

* 1.拿到想要转换为图片的内容节点DOM；

* 2.转换，拿到转换后的canvas

* 3.转换为图片

*/

async clickGeneratePicture () {

if (this.timeout) {        //  规定时间内只执行一次，防止页面过于卡顿

return

}

this.timeout = true

html2canvas(this.$refs.imageDom, {

allowTaint: true, // 否允许跨源图像污染画布

width: this.$refs.imageDom.clientWidth, // dom 原始宽度

height: this.$refs.imageDom.clientHeight, // dom 原始高度

backgroundColor: '#f1f1f1', // DOM背景色

scrollY: 0,  // 解决DOM截图不完整的问题

scrollX: 0,  // 解决DOM截图不完整的问题

useCORS: true, // 解决单截图范围内有图片时的跨域问题

dpi: 182 // 导出图片清晰度，太高会导致图片无法加载

}).then(canvas => {        // 转成图片，生成图片地址

this.imgUrl = canvas.toDataURL('image/webp', 1)   // 显示缩略图

this.showThumbnail = this.isShowThumbnail()

})

//  规定时间内只执行一次，防止页面过于卡顿

let timeer = setTimeout(() => {

this.timeout = false

}, 1000)

this.$once('hook:beforeDestroy', () => {       // 清除定时器

clearTimeout(timeer)

})

},

// 获取元素到文档区域的坐标

getPosition (element) {

let dc = document

let rec = element.getBoundingClientRect()

let x = rec.left // 获取元素相对浏览器视窗window的左、上坐标

let y = rec.top      // 与html或body元素的滚动距离相加就是元素相对于文档区域document的坐标位置

x += dc.documentElement.scrollLeft || dc.body.scrollLeft

y += dc.documentElement.scrollTop || dc.body.scrollTop

return {

left: x,

top: y

}

},

handleMove (evt) {

let shadow = this.$refs.shadow

let imagedom = this.$refs.imageDom.getBoundingClientRect()

if (this.isShowThumbnail()) {   // 判断是否需要展示缩略图

let pos = this.getPosition(this.$refs.choose)

let shadowRect = shadow.getBoundingClientRect()

let contentRect = this.$refs.content.getBoundingClientRect()

let maxY = contentRect.height - shadowRect.height

let Y = evt.pageY - pos.top - shadowRect.height / 2

// 防止遮罩层粘滞，跟随鼠标一起滑出大图位置

if (Y <= 0) {

Y = 0

}

if (Y >= maxY) {

Y = maxY

}

let magnification = accurateDivide(imagedom.height, shadowRect.height)

shadow.style.top = Y + 'px'

this.$refs.mainDom.scrollTo(0, accurateTimes(Y, magnification))

} else {

shadow.style.display = 'none'

}

}

}