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

前端之家收集整理的这篇文章主要介绍了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,height) ;
  3. 绘制圆弧 ctx.arc(x,r,startAngle,endAngle,counterclockwise) ; 绘制矩形 ctx.rect(x,height);
  4. 绘制图像drawImage

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

具体步骤:

  • 计算canvas宽高 :(methods:calcCropperSize) 根据图片大小,计算canvas宽高(data:cropperCanvasSize),以致图片能够在裁剪区域自适应展示,并确定裁剪的左上角位置(data:cropperLocation)。
  • 绘制左侧裁剪区域图像 :(methods:renderCropperImg)

裁剪区域vue data示意图:

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

3. 移动裁剪框

知识点: onmousedown、onmousemove、onmouseup

具体实现:

methods:drag()

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

{ 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,e.offsetY]; }; canvas.onmouseup = e => { self.movement = false; canvas.onmousemove = null; canvas.onmouseup = null; }; };

4. 上传图片至服务器

知识点:

具体实现:

{ 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 实现剪裁图片上传服务器功能。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:https://www.f2er.com/vue/33464.html

猜你在找的Vue相关文章