vue canvas图片放缩

在Vue中使用Canvas进行图片放缩可以通过以下步骤实现：

1. 首先，在Vue组件中引入Canvas元素，并获取到Canvas的上下文对象：

<template>
  <canvas ref="canvas"></canvas>
</template>

<script>
export default {
  mounted() {
    this.canvas = this.$refs.canvas;
    this.ctx = this.canvas.getContext('2d');
  },
}
</script>

2. 加载图片并绘制到Canvas上：

methods: {
  loadImage() {
    const img = new Image();
    img.src = 'path/to/image.jpg';
    img.onload = () => {
      this.ctx.drawImage(img, 0, 0);
    };
  },
}

3. 实现图片放缩功能：

methods: {
  zoomIn() {
    const scale = 1.2; // 放大倍数
    const canvasWidth = this.canvas.width;
    const canvasHeight = this.canvas.height;
    
    // 清空画布
    this.ctx.clearRect(0, 0, canvasWidth, canvasHeight);
    
    // 缩放画布
    this.canvas.width = canvasWidth * scale;
    this.canvas.height = canvasHeight * scale;
    
    // 绘制缩放后的图片
    this.ctx.drawImage(this.$refs.canvas, 0, 0, canvasWidth * scale, canvasHeight * scale);
  },
  
  zoomOut() {
    const scale = 0.8; // 缩小倍数
    const canvasWidth = this.canvas.width;
    const canvasHeight = this.canvas.height;
    
    // 清空画布
    this.ctx.clearRect(0, 0, canvasWidth, canvasHeight);
    
    // 缩放画布
    this.canvas.width = canvasWidth * scale;
    this.canvas.height = canvasHeight * scale;
    
    // 绘制缩放后的图片
    this.ctx.drawImage(this.$refs.canvas, 0, 0, canvasWidth * scale, canvasHeight * scale);
  },
}

以上是一个简单的Vue组件，实现了图片的放大和缩小功能。你可以根据实际需求进行调整和扩展。