vue 实现剪裁图片并上传服务器功能

# 语法
 ctx.drawImage(image, dx, dy);
 ctx.drawImage(image, dx, dy, dWidth, dHeight);
 ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
 # 参数
 image    # 绘制的元素（可以为HTMLImageElement，HTMLVideoElement，或者 HTMLCanvasElement。）
 dx,dy    # 目标画布(destination canvas)左上角的坐标
 dWidth,dHeight  # 目标画布(destination canvas)上绘制图像宽高
 sx,sy    # 源画布(source canvase)左上角的坐标
 sWidth,sHeight  # 源画布(source canvase)选择的图像宽高

canvas.onmousedown = e => {
  let [lastX, lastY] = [e.offsetX, e.offsetY];
  self.movement = true;
  canvas.onmousemove = e => {
   self.circleCenter = {
   X:
    self.cropperCanvasSize.width > 2 * self.slectRadius
    "color: #ff0000">4. 上传图片至服务器

知识点:

  
FormData 对象的使用
  
canvas.toBlob() ;
  
Convert Data URI to File then append to FormData

具体实现:


methods:upload()
this.$refs.preview.toBlob((blob)=> {
  const url = URL.createObjectURL(blob);
  const formData = new FormData();
  formData.append(this.uploadProps.name, blob, `${Date.now()}.png`);
  if(this.data){
   Object.keys(this.uploadProps.data).forEach(key => {
    formData.append(key, this.uploadProps.data[key]);
   });
  }
  const request = new XMLHttpRequest();
  request.open("POST", this.uploadProps.action, true);
  request.send(formData);
  request.onreadystatechange = () => {
   if (request.readyState === 4 && request.status === 200) {
    // ...
   }
  };
  });


总结
以上所述是小编给大家介绍的vue 实现剪裁图片并上传服务器功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！