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 相关文章推荐
取得父标签
Nov 14 Javascript
js 判断上传文件大小及格式代码
Nov 13 Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
Nov 14 Javascript
javascript 表格内容排序 简单操作示例代码
Jan 03 Javascript
html5+javascript制作简易画板附图
Apr 25 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
Feb 16 Javascript
jquery实现一个简单的表单验证实例
Mar 30 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
Jul 27 Javascript
js循环map 获取所有的key和value的实现代码(json)
May 09 Javascript
微信小程序支付前端源码
Aug 29 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
Dec 24 Javascript
vue实现简易音乐播放器
Aug 14 Vue.js
解决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
桌面中心(三)修改数据库
2006/10/09 PHP
利用discuz自带通行证整合dedecms的方法以及文件下载
2007/03/06 PHP
php实现文件下载简单示例(代码实现文件下载)
2014/03/10 PHP
Yii获取当前url和域名的方法
2015/06/08 PHP
PHP编写RESTful接口的方法
2016/02/21 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
2009/12/07 Javascript
JavaScript中数据结构与算法(二):队列
2015/06/19 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
2016/01/05 Javascript
详解Node.js包的工程目录与NPM包管理器的使用
2016/02/16 Javascript
Bootstrap实现input控件失去焦点时验证
2016/08/04 Javascript
JS实现微信弹出搜索框 多条件查询功能
2016/12/13 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
2017/02/21 Javascript
js判断是否是手机页面
2017/03/17 Javascript
详解vue中this.$emit()的返回值是什么
2019/04/07 Javascript
微信小程序sessionid不一致问题解决
2019/08/30 Javascript
jQuery实现轮播图效果demo
2020/01/11 jQuery
[02:20]DOTA2亚洲邀请赛 EHOME战队出场宣传片
2015/02/07 DOTA
python集合类型用法分析
2015/04/08 Python
在Python的struct模块中进行数据格式转换的方法
2015/06/17 Python
Python中字符串的处理技巧分享
2016/09/17 Python
python: line=f.readlines()消除line中\n的方法
2018/03/19 Python
python如何读写csv数据
2018/03/21 Python
下载python中Crypto库报错:ModuleNotFoundError: No module named ‘Crypto’的解决
2018/04/23 Python
python爬取个性签名的方法
2018/06/17 Python
python3解析库pyquery的深入讲解
2018/06/26 Python
Python实现的爬取小说爬虫功能示例
2019/03/30 Python
基于python框架Scrapy爬取自己的博客内容过程详解
2019/08/05 Python
详解Python Matplotlib解决绘图X轴值不按数组排序问题
2019/08/05 Python
Django框架模板用法入门教程
2019/11/04 Python
Python语法之精妙的十个知识点(装B语法)
2020/01/18 Python
Python编程快速上手——PDF文件操作案例分析
2020/02/28 Python
python实现简单文件读写函数
2021/02/25 Python
美国基督教约会网站:ChristianCafe.com
2020/02/04 全球购物
语文教学随笔感言
2014/02/18 职场文书
Javascript使用integrity属性进行安全验证
2021/11/07 Javascript