Vue 2.0中实现下载方形图片和圆形图片的功能，可以使用HTML5的canvas元素来处理图像

Vue 2.0中实现下载方形图片和圆形图片的功能，可以使用HTML5的canvas元素来处理图像

1、（将图片展示在界面上）

Vue 2.0中实现下载方形图片和圆形图片的功能，可以使用HTML5的canvas元素来处理图像以下是一个示例代码，演示如何通过点击按钮将方形图片和圆形图片保存到本地。

首先，在Vue组件的模板中添加一个canvas元素和两个按钮：

<template>
  <div>
    <canvas ref="canvas" width="200" height="200"></canvas>
    <button @click="downloadSquareImage">下载方形图片</button>
    <button @click="downloadCircleImage">下载圆形图片</button>
  </div>
</template>

然后，在Vue组件中添加相应的方法：

export default {
  methods: {
    downloadSquareImage() {
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext('2d');

      // 创建一个新的图像对象
      const image = new Image();

      // 设置图像的源链接
      image.src = 'https://example.com/square-image.jpg';

      // 当图像加载完成后执行回调函数
      image.onload = () => {
        // 清空画布
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // 将图像绘制到画布上
        ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

        // 使用浏览器下载功能将画布内容保存为图片文件
        const link = document.createElement('a');
        link.href = canvas.toDataURL();
        link.download = 'square-image.png';
        link.click();
      };
    },
    downloadCircleImage() {
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext('2d');

      // 创建一个新的图像对象
      const image = new Image();

      // 设置图像的源链接
      image.src = 'https://example.com/circle-image.jpg';

      // 当图像加载完成后执行回调函数
      image.onload = () => {
        // 清空画布
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // 绘制圆形图像
        ctx.beginPath();
        ctx.arc(canvas.width / 2, canvas.height / 2, canvas.width / 2, 0, 2 * Math.PI);
        ctx.closePath();
        ctx.clip();
        ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

        // 使用浏览器下载功能将画布内容保存为图片文件
        const link = document.createElement('a');
        link.href = canvas.toDataURL();
        link.download = 'circle-image.png';
        link.click();
      };
    }
  }
};

在上述代码中
1、首先通过this.$refs.canvas获取到canvas元素和绘图上下文对象。
2、然后，创建一个新的图像对象，并设置图像的源链接为给定的图片链接。
3、当图像加载完成后，我们清空画布并使用drawImage方法将图像绘制到画布上。

对于圆形图片，我们使用beginPath、arc和clip方法来定义一个圆形裁剪区域，并在该区域内绘制图像。最后，使用浏览器下载功能将画布内容保存为图片文件。

注意：请确保替换示例代码中的图片链接为实际的图片链接，并根据需要修改画布大小和保存的文件名。

2、不会将图片展示在界面上

要实现在执行操作时不在界面上展示裁剪后的图片，可以将canvas元素隐藏起来，以确保用户无法看到它。这可以通过CSS中的display: none;样式来实现。

首先，在Vue组件的模板中添加一个CSS类来隐藏canvas元素：

<template>
  <div>
    <canvas ref="canvas" class="hidden-canvas" width="200" height="200"></canvas>
    <button @click="downloadSquareImage">下载方形图片</button>
    <button @click="downloadCircleImage">下载圆形图片</button>
  </div>
</template>

<style>
.hidden-canvas {
  display: none;
}
</style>

然后，在Vue组件中修改相应的方法，将绘制和下载图片的代码移到一个公共的函数中，并且使用一个隐藏的canvas元素进行绘制：

export default {
  methods: {
    downloadSquareImage() {
      this.downloadImage('https://example.com/square-image.jpg', 'square-image.png');
    },
    downloadCircleImage() {
      this.downloadImage('https://example.com/circle-image.jpg', 'circle-image.png', true);
    },
    downloadImage(imageUrl, fileName, isCircle = false) {
      const hiddenCanvas = document.createElement('canvas');
      const ctx = hiddenCanvas.getContext('2d');

      // 创建一个新的图像对象
      const image = new Image();

      // 设置图像的源链接
      image.src = imageUrl;

      // 当图像加载完成后执行回调函数
      image.onload = () => {
        // 设置隐藏canvas的大小
        hiddenCanvas.width = image.width;
        hiddenCanvas.height = image.height;

        // 清空画布
        ctx.clearRect(0, 0, hiddenCanvas.width, hiddenCanvas.height);

        // 绘制图像到隐藏canvas上
        if (isCircle) {
          ctx.beginPath();
          ctx.arc(hiddenCanvas.width / 2, hiddenCanvas.height / 2, hiddenCanvas.width / 2, 0, 2 * Math.PI);
          ctx.closePath();
          ctx.clip();
        }
        ctx.drawImage(image, 0, 0, hiddenCanvas.width, hiddenCanvas.height);

        // 使用浏览器下载功能将隐藏canvas的内容保存为图片文件
        const link = document.createElement('a');
        link.href = hiddenCanvas.toDataURL();
        link.download = fileName;
        link.click();
      };
    }
  }
};

现在，在执行操作时，使用隐藏的canvas元素进行绘制和保存图片。这样用户就无法看到裁剪后的图片了。