一、前言

本篇主要介绍，vue项目手写一个图片预览组件，组件主要包括图片方法、图片缩小、显示原图、下载、复制等功能。

二、实现方式

首先我们需要做一个图片预览组件都有的功能表头，如下图

主要功能包括，放大、缩放比例显示、缩小、原图比例、旋转、复制、下载，如果是多图预览的话，还有上一张、下一张。接下来我们逐个实现各个功能。

1.初始化窗口显示完整图片

我们在一打开图片预览的时候，就是要看到图片的全貌，有时候图片会比我们预览的窗口要大许多，因此我们需要初始化的时候计算图片的大小和窗口大小的对应比例。代码如下

<template><div class="preview-image"><ul class="header">..</ul><section ref="previewImage" class="preview-content dragscroll" :class="{'hideScroll' : hideScroll}" @wheel="handleMousewheel"><img ref="mediaElement":style="getStyles" :src="currentImgUrl" /></section></div>
</template>
<script> export default{data () {return {// 样式控制styles: {ratio: 0,rotate: 0,width: 0,height: 0,y: 0,x: 0,defaultWidth: 0,defaultHeight: 0},container: '',viewer: ''}},computed: {// 获取当前图片的urlcurrentImgUrl () {let result = this.urlif (this.list.length) {result = this.list[this.index]}return result},// 动态获取样式变动getStyles () {const styles = this.styleslet _styles = {}_styles = {transform: `rotate(${styles.rotate}deg)`,width: styles.width + 'px',height: styles.height + 'px',marginTop: styles.y + 'px',marginLeft: styles.x + 'px',zoom: styles.scale}return _styles},},methods: {// 初始化图片比例async initStyle (url) {// 初始设置旋转为0this.styles.rotate = 0const image = await this.loadImage(url)if (!image) return// 保存图片初始宽高this.styles.defaultWidth = image.widththis.styles.defaultHeight = image.height// 图片大小const width = image.widthconst height = image.height// 等待页面加载完成await this.$nextTick()// 获取窗口和图片this.container = this.$refs.previewImagethis.viewer = this.$refs.mediaElement// 可视区大小const containerWidth = this.container.clientWidthconst containerHeight = this.container.clientHeight// 可视区域宽度与图片实际宽度比例const initWidthScale = containerWidth / width// 可视区域高度与图片实际高度比例const initHeightScale = containerHeight / height// 优先缩放至比例最小的那个值if (initWidthScale < 1 || initHeightScale < 1) {let scale = initHeightScale > initWidthScale ? initWidthScale : initHeightScalethis.setZoomSize(scale)} else {this.setZoomSize(1)}this.$nextTick(() => {this.setMargin()})},// 加载一张图片，获取图片实例loadImage (url) {return new Promise((resolve, reject) => {const image = new Image()image.src = urlimage.onload = () => {resolve(image)}image.onerror = () => {const err = this.$t('im.loadErr')reject(err)}})},// 等比缩放setZoomSize (ratio) {this.styles.width = this.styles.defaultWidth * ratiothis.styles.height = this.styles.defaultHeight * ratiothis.styles.ratio = ratio},// 通过设置边距来计算图片位置setMargin () {if (this.container && this.viewer) {const contaienrSize = this.container.getBoundingClientRect()const imageSize = this.viewer.getBoundingClientRect()let y = (contaienrSize.height - imageSize.height) / 2let x = (contaienrSize.width - imageSize.width) / 2y = y < 0 ? 0 : yx = x < 0 ? 0 : xthis.styles.y = ythis.styles.x = x}},}
} </script>

以上我们实现了图片的初始化显示

2.实现放大缩小逻辑

咱们这里主要css通过设置图片的缩放比例，利用zoom样式来实现图片的放大缩小。

 // 缩放,ratio为放大或缩小比例
handleZoom (ratio) {const styles = this.stylesconst abs = Math.abs(ratio)const changeScale = styles.ratio * absconst calScale = ratio > 0 ? changeScale : -changeScalelet _scale = styles.ratio + calScaleconst max = Math.min(this.SCALE_LIMIT.MAX, _scale) // 最大比例const min = Math.max(this.SCALE_LIMIT.MIN, _scale) // 最小比例console.log(_scale, max, this.SCALE_LIMIT.MAX)if (_scale > max) {_scale = max} else if (_scale < min) {_scale = min}_scale = parseFloat(_scale)this.setZoomSize(_scale)this.$nextTick(() => {this.setMargin()})
},

3.实现原始图片展示及复原

这里其实主要还是图片的缩放控制，代码如下

// 重置缩放比例, historyRatio记录原始大小之前的一次操作比例
handleResetZoom () {this.historyRatio = this.styles.ratiothis.setZoomSize(1)this.$nextTick(() => {this.setMargin()})
},
// 复原缩放比例, historyRatio
handleHistoryZoom () {this.setZoomSize(this.historyRatio)this.historyRatio = 0this.$nextTick(() => {this.setMargin()})
},

4.实现图片的翻转

这里主要是通过css的transform来实现的图片翻转，代码如下

// 旋转,配合样式的改变而改变
handleRotate () {this.styles.rotate += 90
},

5.实现图片的复制

这里主要用的clipboard剪切板和canvas来实现的图片复制，代码如下

// 复制图片
handleCopy() {var canvas = document.createElement('canvas') // 创建一个画板let image = new Image()image.setAttribute("crossOrigin", 'Anonymous') //可能会有跨越问题image.src = this.currentImgUrlimage.onload = () => {// img加载完成事件canvas.width = image.width//设置画板宽度canvas.height = image.height //设置画板高度canvas.getContext('2d').drawImage(image, 0, 0); //加载img到画板let url = canvas.toDataURL("image/png") // 转换图片为dataURL，格式为pngthis.clipboardImg(url) // 调用复制方法}
},
// 将图片写入到剪切板上
async clipboardImg (url) {try {const data = await fetch(url);const blob = await data.blob();await navigator.clipboard.write([new window.ClipboardItem({[blob.type]: blob})]);alert('复制成功')} catch (err) {alert('复制失败')}
},

6.实现图片的下载

这里就不说了，直接上代码吧

// 生成uuid
uuid (len, radix) {const chars = '0123456789abcdefghijklmnopqrstuvwxyz'.split('')const uuid = []let iradix = radix || 16len = len || 8radix = radix || chars.lengthif (len) {// Compact formfor (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix]} else {// rfc4122, version 4 formlet r// rfc4122 requires these charactersuuid[8] = uuid[13] = uuid[18] = uuid[23] = '-'uuid[14] = '4'// Fill in random data. At i==19 set the high bits of clock sequence as// per rfc4122, sec. 4.1.5for (i = 0; i < 36; i++) {if (!uuid[i]) {r = 0 | Math.random() * 16uuid[i] = chars[(i === 19) ? (r & 0x3) | 0x8 : r]}}}return uuid.join('')
},
// 下载
handleDownload () {fetch(this.currentImgUrl).then(res => res.blob().then(blob => {const a = document.createElement('a')const url = window.URL.createObjectURL(blob)const filename = this.uuid(8,16)a.href = url;a.download = filename;a.click();window.URL.revokeObjectURL(url);}));
},

7.实现ctrl + 滚轮事件缩放以及mac触摸板滚动放大缩小

这里主要通过监听鼠标的滚轮事件，来处理的缩放时间，触摸板同理

// 滚轮事件
handleMousewheel (evt) {this.wheelEvent(evt)
},
// ctrl + 滚轮事件缩放
wheelEvent (e) {if (Math.abs(e.deltaX) !== 0 && Math.abs(e.deltaY) !== 0) returnif (e.ctrlKey) {e.preventDefault()if (e.deltaY > 0) {this.handleZoom(-0.05)} else if (e.deltaY < 0) {this.handleZoom(0.05)}this.$nextTick(() => {this.setMargin()})}
},

以上就是逐个功能的实现代码一一说明。这些都是对于图片操作的主要实现方式。