vue3中原生js配合canvas实现头像裁剪上传

好的，我来回答你的问题。首先，我们需要将用户上传的图片展示在canvas中，可以使用以下代码：

// 获取用户上传的图片
const file = document.getElementById('input-file').files[0];
const img = new Image();

// 将图片加载到canvas中
img.onload = function() {
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
};
img.src = URL.createObjectURL(file);

接着，我们需要在canvas中实现裁剪功能。可以使用以下代码：

// 定义裁剪区域
let x = 0;
let y = 0;
let width = 100;
let height = 100;

// 绘制裁剪区域
ctx.strokeStyle = '#000';
ctx.strokeRect(x, y, width, height);

// 监听鼠标事件，实现拖拽裁剪区域
let isDragging = false;
let startX = 0;
let startY = 0;
canvas.addEventListener('mousedown', e => {
  isDragging = true;
  startX = e.offsetX;
  startY = e.offsetY;
});
canvas.addEventListener('mousemove', e => {
  if (isDragging) {
    const offsetX = e.offsetX - startX;
    const offsetY = e.offsetY - startY;
    x += offsetX;
    y += offsetY;
    startX = e.offsetX;
    startY = e.offsetY;
    redraw();
  }
});
canvas.addEventListener('mouseup', e => {
  isDragging = false;
});

// 重绘canvas
function redraw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
  ctx.strokeStyle = '#000';
  ctx.strokeRect(x, y, width, height);
}

最后，我们需要将裁剪后的图片上传到服务器。可以使用以下代码：

// 获取裁剪后的图片数据
const data = canvas.toDataURL('image/png');

// 将图片数据上传到服务器
axios.post('/upload', {
  image: data
}).then(response => {
  console.log(response.data);
}).catch(error => {
  console.log(error);
});

以上就是使用原生JS配合canvas实现头像裁剪上传的方法，你可以在Vue3项目中使用这些代码。