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 相关文章推荐
js 学习笔记(三)
Dec 29 Javascript
js压缩工具 yuicompressor 使用教程
Mar 31 Javascript
JavaScript控制按钮可用或不可用的方法
Apr 03 Javascript
jquery操作angularjs对象
Jun 26 Javascript
表单验证插件Validation应用的实例讲解
Oct 10 Javascript
BOM系列第二篇之定时器requestAnimationFrame
Aug 17 Javascript
javascript创建对象的3种方法
Nov 02 Javascript
jQuery布局组件EasyUI Layout使用方法详解
Feb 28 Javascript
JS原生带小白点轮播图实例讲解
Jul 22 Javascript
详解Angular结合zTree异步加载节点数据
Jan 20 Javascript
vue实现微信分享功能
Nov 28 Javascript
vue-router的hooks用法详解
Jun 08 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
mysql 的 like 问题,超强毕杀记!!!
2007/01/18 PHP
php下mysql数据库操作类(改自discuz)
2010/07/03 PHP
php中inlcude()性能对比详解
2012/09/16 PHP
php resizeimage 部分jpg文件 生成缩略图失败的原因分析及解决办法
2016/03/23 PHP
PHP两个n位的二进制整数相加问题的解决
2018/08/26 PHP
JavaScript中使用typeof运算符需要注意的几个坑
2014/11/08 Javascript
jQuery实现数秒后自动提交form的方法
2015/03/05 Javascript
举例说明JavaScript中的实例对象与原型对象
2016/03/11 Javascript
Bootstrap Table的使用总结
2016/10/08 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
2016/10/10 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
2016/12/26 Javascript
Vue学习笔记之表单输入控件绑定
2017/09/05 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
2018/02/08 Javascript
对vue事件的延迟执行实例讲解
2018/08/28 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
2018/12/19 Javascript
200行HTML+JavaScript实现年会抽奖程序
2019/01/22 Javascript
JS中的一些常用的函数式编程术语
2019/06/15 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
2020/02/14 Javascript
用python 制作图片转pdf工具
2015/01/30 Python
分享Python开发中要注意的十个小贴士
2016/08/30 Python
利用selenium 3.7和python3添加cookie模拟登陆的实现
2017/11/20 Python
Python简单实现两个任意字符串乘积的方法示例
2018/04/12 Python
python实现基于信息增益的决策树归纳
2018/12/18 Python
对Django外键关系的描述
2019/07/26 Python
Python实现某论坛自动签到功能
2019/08/20 Python
关于python导入模块import与常见的模块详解
2019/08/28 Python
Django框架 querySet功能解析
2019/09/04 Python
Python getsizeof()和getsize()区分详解
2020/11/20 Python
python上下文管理的使用场景实例讲解
2021/03/03 Python
简历中个人求职的自我评价模板
2013/11/29 职场文书
工艺员岗位职责
2014/02/11 职场文书
2015年化妆品销售工作总结
2015/05/11 职场文书
张丽莉观后感
2015/06/16 职场文书
56句经典英文座右铭
2019/08/09 职场文书
浅谈Java父子类加载顺序
2021/08/04 Java/Android
全面盘点MySQL中的那些重要日志文件
2021/11/27 MySQL