首页 / VUE / 在vue中如何实现剪裁图片并上传服务器功能

在vue中如何实现剪裁图片并上传服务器功能

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了在vue中如何实现剪裁图片并上传服务器功能，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2291字，纯文字阅读大概需要4分钟。

内容图文

这篇文章主要介绍了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,y,width,height) ;

  3. 绘制圆弧 ctx.arc(x,y,r,startAngle,endAngle,counterclockwise) ; 绘制矩形 ctx.rect(x,y,width,height);

  4. 绘制图像drawImage

在vue中如何实现剪裁图片并上传服务器功能 - 文章图片

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

具体步骤:

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

  • 绘制左侧裁剪区域图像 ：(methods:renderCropperImg)

裁剪区域vue data示意图：

在vue中如何实现剪裁图片并上传服务器功能 - 文章图片

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

3. 移动裁剪框

知识点: onmousedown、onmousemove、onmouseup

具体实现:

methods:drag()

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

4. 上传图片至服务器

知识点:

  • FormData 对象的使用

  • canvas.toBlob() ;

  • Convert Data URI to File then append to FormData

具体实现:

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

利用ES6通过WeakMap解决内存泄漏问题（详细教程）

利用jquery点击回车键实现登录效果（详细教程）

根据vue里面设置全局变量或者数据方法（详细教程）

以上就是在vue中如何实现剪裁图片并上传服务器功能的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的在vue中如何实现剪裁图片并上传服务器功能全部内容，希望文章能够帮你解决在vue中如何实现剪裁图片并上传服务器功能所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/288331.html

来源：【匿名】