vue+canvas图片裁切

**Vue + Canvas 图片裁切**

在前端开发中，图片裁切是一个常见的需求。通过使用 Vue 和 Canvas，我们可以轻松实现图片裁切功能。

###什么是Canvas？

Canvas 是 HTML5 提供的一个用于绘制图形的 API。它允许我们创建一个画布元素，并使用 JavaScript 来绘制图形、文字和其他元素。

### Vue + Canvas 实现图片裁切下面是一个简单的例子，展示了如何使用 Vue 和 Canvas 实现图片裁切功能。

#### HTML

html<template>
 <div>
 <canvas id="image-canvas" ref="imageCanvas"></canvas>
 <button @click="cutImage">裁切</button>
 </div>
</template>

<script>
export default {
 data() {
 return {
 image: null,
 canvas: null,
 ctx: null }
 },
 mounted() {
 this.canvas = document.getElementById('image-canvas');
 this.ctx = this.canvas.getContext('2d');
 },
 methods: {
 async cutImage() {
 // 获取图片 const image = await fetch('/api/image').then(response => response.blob());
 this.image = new Image();
 this.image.src = URL.createObjectURL(image);

 // 绘制图片到画布 this.ctx.drawImage(this.image,0,0,500,500); // 绘制图片的宽高 // 获取裁切区域 const rect = await getRect(); // 这里假设有一个函数来获取裁切区域 // 根据裁切区域绘制裁切后的图像 this.ctx.drawImage(this.image, rect.x, rect.y, rect.width, rect.height);
 }
 }
}
</script>

javascript// 获取裁切区域的函数async function getRect() {
 const x = await prompt('请输入x坐标');
 const y = await prompt('请输入y坐标');
 const width = await prompt('请输入宽度');
 const height = await prompt('请输入高度');
 return { x, y, width, height };
}

css#image-canvas {
 width:500px;
 height:500px;
}