在vue中如何实现剪裁图片并上传服务器功能
发布网友
发布时间：2023-07-31 03:45
我来回答
共1个回答
热心网友
时间：2023-10-03 03:51
这篇文章主要介绍了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 相关知识:
清空画布 ctx.clearRect(x,y,width,height) ;
填充矩形 ctx.fillRect(x,y,width,height) ;
绘制圆弧 ctx.arc(x,y,r,startAngle,endAngle,counterclockwise) ; 绘制矩形 ctx.rect(x,y,width,height);
绘制图像drawImage
5.剪裁图片 ctx.clip() ;
具体步骤:
计算canvas宽高 ：(methods:calcCropperSize) 根据图片大小，计算canvas宽高（data:cropperCanvasSize），以致图片能够在裁剪区域自适应展示，并确定裁剪的左上角位置（data:cropperLocation）。
绘制左侧裁剪区域图像 ：(methods:renderCropperImg)
裁剪区域vue data示意图：
绘制右侧预览图片 ：(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里面设置全局变量或者数据方法（详细教程）
