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

来源：动视网责编：小采时间：2020-11-27 19:41:56

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

在vue中如何实现剪裁图片并上传服务器功能:这篇文章主要介绍了vue 实现剪裁图片并上传服务器功能，非常不错，具有参考借鉴价值,需要的朋友可以参考下预览链接点击预览效果图如下所示，大家感觉不错，请参考实现代码。需求[x] 预览：根据选择图像大小自适应填充左侧裁剪区域[x] 裁剪：移动裁剪框右侧预

推荐度：

点击下载本文 文档为doc格式

导读在vue中如何实现剪裁图片并上传服务器功能:这篇文章主要介绍了vue 实现剪裁图片并上传服务器功能，非常不错，具有参考借鉴价值,需要的朋友可以参考下预览链接点击预览效果图如下所示，大家感觉不错，请参考实现代码。需求[x] 预览：根据选择图像大小自适应填充左侧裁剪区域[x] 裁剪：移动裁剪框右侧预

这篇文章主要介绍了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