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


Posted in Javascript onMarch 01, 2018

预览链接点击预览

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

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 实现剪裁图片并上传服务器功能 

# 语法
 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示意图:

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

  • 绘制右侧预览图片 :(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 实现剪裁图片并上传服务器功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 函数调用规则
Sep 14 Javascript
提高网站性能之 如何对待JavaScript
Oct 31 Javascript
jquery实现树形二级菜单实例代码
Nov 20 Javascript
jQuery实现的多级下拉菜单效果代码
Aug 24 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
Jul 14 Javascript
JS实现的全排列组合算法示例
Oct 09 Javascript
vuejs选中当前样式active的实例
Aug 22 Javascript
Bootstrap-table自定义可编辑每页显示记录数
Sep 07 Javascript
继承行为在 ES5 与 ES6 中的区别详解
Dec 24 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
May 29 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
Sep 24 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
Dec 05 Javascript
解决easyui日期时间框ie的兼容的问题
Mar 01 #Javascript
详解Immutable及 React 中实践
Mar 01 #Javascript
解决VUEX兼容IE上的报错问题
Mar 01 #Javascript
Node.js readline 逐行读取、写入文件内容的示例
Mar 01 #Javascript
基于Vuex无法观察到值变化的解决方法
Mar 01 #Javascript
Node.js readline模块与util模块的使用
Mar 01 #Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
Mar 01 #Javascript
You might like
linux iconv方法的使用
2011/10/01 PHP
php命令行用法入门实例教程
2014/10/27 PHP
php中照片旋转 (orientation) 问题的正确处理
2017/02/16 PHP
Thinkphp通过一个入口文件如何区分移动端和PC端
2017/04/18 PHP
js 页面输出值
2008/11/30 Javascript
Jquery 1.42 checkbox 全选和反选代码
2010/03/27 Javascript
JS获取地址栏参数的小例子
2013/08/23 Javascript
js实现模拟银行卡账号输入显示效果
2015/11/18 Javascript
JQuery标签页效果实例详解
2015/12/24 Javascript
vue.js表格分页示例
2016/10/18 Javascript
判断横屏竖屏(三种)
2017/02/13 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
2017/07/21 Javascript
利用JS做网页特效_大图轮播(实例讲解)
2017/08/09 Javascript
深入理解ES7的async/await的用法
2017/09/09 Javascript
JS实现中文汉字按拼音排序的方法
2017/10/09 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
2018/02/03 Javascript
AngularJS中的作用域实例分析
2018/05/16 Javascript
详解基于electron制作一个node压缩图片的桌面应用
2019/01/29 Javascript
Vue实现数据表格合并列rowspan效果
2020/11/30 Javascript
python中使用pyhook实现键盘监控的例子
2014/07/18 Python
Python实现动态添加属性和方法操作示例
2018/07/25 Python
Python循环结构的应用场景详解
2019/07/11 Python
详解使用python绘制混淆矩阵(confusion_matrix)
2019/07/14 Python
python 协程 gevent原理与用法分析
2019/11/22 Python
python使用ctypes库调用DLL动态链接库
2020/10/22 Python
python 获取域名到期时间的方法步骤
2021/02/10 Python
HTML5 文件域+FileReader 分段读取文件并上传到服务器
2017/10/23 HTML / CSS
expedia比利时:预订航班+酒店并省钱
2018/07/13 全球购物
Revolution Beauty美国官网:英国知名化妆品网站
2018/07/23 全球购物
威盛公司软件C++工程师笔试题面试题
2012/07/16 面试题
UNIX文件系统分类
2014/11/11 面试题
药物学专业学生的自我评价
2013/10/27 职场文书
祖国在我心中演讲稿200字
2014/08/28 职场文书
大学毕业典礼演讲稿
2014/09/09 职场文书
2014银行授权委托书样本
2014/10/04 职场文书
创业计划书之奶茶店开店方案范本!
2019/08/06 职场文书