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

预览链接

效果图如下所示，大家感觉不错，请参考实现代码。

 

需求

• [x] 预览：根据选择图像大小自适应填充左侧裁剪区域
• [x] 裁剪：移动裁剪框右侧预览区域可实时预览
• [x] 上传&清空：点击确认上传裁剪图片，点击取消按钮清空图像
• [ ] 裁剪框可调节大小
  

实现步骤

methods:funname() - 对应源码中methods中的funname方法

data:dataname - 对应源码中data中的dataname数据

1. 图片选择与读取

• 选择图片 ：(methods:selectpic) 使用 input[type="file"] 弹出选择图片框，js 主动触发点击事件;
• 读取图片 ： (methods:readimage) 创建图片对象，使用createobjecturl显示图片。 objecturl = url.createobjecturl(blob) ;

2. 在canvas中展示图片

需要掌握的 canvas 相关知识:

1. 清空画布 ctx.clearrect(x,y,width,height) ;
2. 填充矩形 ctx.fillrect(x,y,width,height) ;
3. 绘制圆弧 ctx.arc(x,y,r,startangle,endangle,counterclockwise) ; 绘制矩形 ctx.rect(x,y,width,height);
4. 绘制图像drawimage

 

# 语法
 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)选择的图像宽高

5.剪裁图片 ctx.clip() ;

具体步骤:

• 计算canvas宽高 ：(methods:calccroppersize) 根据图片大小，计算canvas宽高（data:croppercanvassize），以致图片能够在裁剪区域自适应展示，并确定裁剪的左上角位置（data:cropperlocation）。
• 绘制左侧裁剪区域图像 ：(methods:rendercropperimg)

裁剪区域vue data示意图：

 

• 绘制右侧预览图片 ：(methods:renderpreviewimg)

3. 移动裁剪框

知识点: onmousedown、onmousemove、onmouseup

具体实现:

methods:drag()

记录鼠标坐标，鼠标移动根据偏移量计算圆心位置。

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
    ? self.circlecenter.x + (e.offsetx - lastx)
    : self.croppercanvassize.width / 2,
   y:
    self.croppercanvassize.height > 2 * self.slectradius
    ? self.circlecenter.y + (e.offsety - lasty)
    : self.croppercanvassize.height / 2
   };
   self.rendercropperimg();
   [lastx, lasty] = [e.offsetx, e.offsety];
  };
  canvas.onmouseup = e => {
   self.movement = false;
   canvas.onmousemove = null;
   canvas.onmouseup = null;
  };
  };

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 实现剪裁图片并上传服务器功能，希望对大家有所帮助