vue项目实现截取图片

使用HTML5 Canvas实现截图

在Vue项目中创建一个隐藏的Canvas元素，将目标图片绘制到Canvas上，通过Canvas API截取指定区域。

<template>
  <div>
    <img ref="targetImage" src="your-image.jpg" @load="onImageLoaded">
    <canvas ref="canvas" style="display:none"></canvas>
  </div>
</template>

<script>
export default {
  methods: {
    onImageLoaded() {
      const canvas = this.$refs.canvas
      const img = this.$refs.targetImage
      const ctx = canvas.getContext('2d')

      canvas.width = img.width
      canvas.height = img.height
      ctx.drawImage(img, 0, 0)

      // 截取区域(x,y,width,height)
      const imageData = ctx.getImageData(100, 100, 200, 200)

      // 创建新Canvas存放截图
      const newCanvas = document.createElement('canvas')
      newCanvas.width = 200
      newCanvas.height = 200
      newCanvas.getContext('2d').putImageData(imageData, 0, 0)

      // 获取截图数据URL
      const screenshot = newCanvas.toDataURL('image/png')
      console.log(screenshot)
    }
  }
}
</script>

使用第三方库html2canvas

安装html2canvas库实现更复杂的截图功能，支持DOM元素转图片。

npm install html2canvas

<template>
  <div>
    <div ref="captureArea" class="content-to-capture">
      <!-- 需要截图的内容 -->
    </div>
    <button @click="capture">截图</button>
  </div>
</template>

<script>
import html2canvas from 'html2canvas'

export default {
  methods: {
    async capture() {
      const element = this.$refs.captureArea
      const canvas = await html2canvas(element, {
        backgroundColor: null,
        logging: false,
        useCORS: true
      })

      const image = canvas.toDataURL('image/png')
      this.downloadImage(image, 'screenshot.png')
    },

    downloadImage(dataUrl, filename) {
      const link = document.createElement('a')
      link.href = dataUrl
      link.download = filename
      link.click()
    }
  }
}
</script>

实现区域选择截图

结合鼠标事件实现用户自定义区域截图功能。

<template>
  <div>
    <div 
      @mousedown="startSelection"
      @mousemove="drawSelection"
      @mouseup="endSelection"
      class="image-container"
    >
      <img ref="image" src="your-image.jpg">
      <div v-if="selecting" class="selection-box" :style="selectionStyle"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selecting: false,
      startX: 0,
      startY: 0,
      endX: 0,
      endY: 0
    }
  },
  computed: {
    selectionStyle() {
      const left = Math.min(this.startX, this.endX)
      const top = Math.min(this.startY, this.endY)
      const width = Math.abs(this.endX - this.startX)
      const height = Math.abs(this.endY - this.startY)

      return {
        left: `${left}px`,
        top: `${top}px`,
        width: `${width}px`,
        height: `${height}px`
      }
    }
  },
  methods: {
    startSelection(e) {
      this.selecting = true
      this.startX = e.offsetX
      this.startY = e.offsetY
      this.endX = e.offsetX
      this.endY = e.offsetY
    },
    drawSelection(e) {
      if (this.selecting) {
        this.endX = e.offsetX
        this.endY = e.offsetY
      }
    },
    endSelection() {
      this.selecting = false
      this.captureSelectedArea()
    },
    captureSelectedArea() {
      const canvas = document.createElement('canvas')
      const img = this.$refs.image
      const ctx = canvas.getContext('2d')

      const left = Math.min(this.startX, this.endX)
      const top = Math.min(this.startY, this.endY)
      const width = Math.abs(this.endX - this.startX)
      const height = Math.abs(this.endY - this.startY)

      canvas.width = width
      canvas.height = height
      ctx.drawImage(
        img,
        left, top, width, height,
        0, 0, width, height
      )

      const screenshot = canvas.toDataURL('image/png')
      console.log(screenshot)
    }
  }
}
</script>

<style>
.image-container {
  position: relative;
  display: inline-block;
}
.selection-box {
  position: absolute;
  border: 2px dashed #3498db;
  background-color: rgba(52, 152, 219, 0.3);
  pointer-events: none;
}
</style>

响应式截图处理

处理不同设备像素比(DPR)下的截图清晰度问题。

async captureHighDPI() {
  const element = this.$refs.captureElement
  const dpr = window.devicePixelRatio || 1

  const canvas = await html2canvas(element, {
    scale: dpr,
    logging: false,
    useCORS: true
  })

  // 调整画布尺寸以适应原始显示尺寸
  canvas.style.width = `${canvas.width / dpr}px`
  canvas.style.height = `${canvas.height / dpr}px`

  const image = canvas.toDataURL('image/png', 1.0)
  this.downloadImage(image, 'high-dpi-screenshot.png')
}