css3图片翻转-Vue实现图像（复制、预览、下载…）效果

  <div class="preview-image">
    <ul class="header">
      ..
    
    <section ref="previewImage" class="preview-content dragscroll" :class="{'hideScroll' : hideScroll}" @wheel="handleMousewheel">
      ref="mediaElement"  :style="getStyles" :src="currentImgUrl" />
    
  

上面我们已经实现了图像的初始显示

2. 实现缩放逻辑

我们这里主要的css是设置图像的缩放比例，并使用缩放样式来放大和缩小图像。

 // 缩放,ratio为放大或缩小比例
handleZoom (ratio) {
    const styles = this.styles
    const abs = Math.abs(ratio)
    const changeScale = styles.ratio * abs
    const calScale = ratio > 0 ? changeScale : -changeScale
    let _scale = styles.ratio + calScale
    const 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.ratio
  this.setZoomSize(1)
  this.$nextTick(() => {
    this.setMargin()
  })
},
// 复原缩放比例, historyRatio
handleHistoryZoom () {
  this.setZoomSize(this.historyRatio)
  this.historyRatio = 0
  this.$nextTick(() => {
    this.setMargin()
  })
},

4.实现图片翻转

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

// 旋转,配合样式的改变而改变
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.currentImgUrl
  image.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，格式为png
    this.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.实现图片的下载

这里就不详细说了css3图片翻转，直接上代码吧。

// 生成uuid
uuid (len, radix) {
  const chars = '0123456789abcdefghijklmnopqrstuvwxyz'.split('')
  const uuid = []
  let i
  radix = radix || 16
  len = len || 8
  radix = radix || chars.length
  if (len) {
    // Compact form
    for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix]
  } else {
    // rfc4122, version 4 form
    let r
    // rfc4122 requires these characters
    uuid[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.5
    for (i = 0; i < 36; i++) {
      if (!uuid[i]) {
        r = 0 | Math.random() * 16
        uuid[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) return
  if (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()
    })
  }
},

以上是对各个函数的实现代码一一讲解。 这些是图像操作的主要实现方法。

3. 后记

1. 所有代码和组件说明

点击查看图片预览组件的全部代码。 下载代码并复制直接使用。 也可二次开发。各组件位置如图

其中index.vue是对各种图像操作的封装。 PreviewImageDialog.vue 文件是一个弹窗，用于显示图像预览内容。 您的开发项目中还必须使用 IU 框架组件。 到时候就不能用这个了，直接引入index.vue组件，放到dialog/modal等弹窗中也是可以的。

2.关于dragToScroll

我们先简单说一下这个插件。 它用于将默认的拖放转换为滚动波。 预览图像时，拖放会变成滚动波浪，用于查看整个图像。

4.介绍一本好书

顶尖资源技术交流群

《Code Out the Universe》建立了读者技术交流群，构建了内部推荐圈、资源圈。 您可以添加编辑Momo加入群组。 欢迎有意见、愿意分享的同事一起交流、学习。 不定期会有书籍赠送，帮助您提升技术能力，实现大厂梦想。

扫一扫添加好友邀请您加入技术交流群。 添加我时，标注【姓名+公司（学校）+职位】

01

欢迎粉丝投稿（投稿内容过程中遇到了什么问题以及如何解决，

入职后的经验分享、github实战项目等）提交被采纳还有神秘奖励。

—

参与本次留言活动将选出点赞数最高的两人领取Vue.js从入门到项目实践（升级版）