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 相关文章推荐
提示$ is not defined错误分析及解决
Apr 09 Javascript
IE6下拉框图层问题探讨及解决
Jan 03 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
Aug 03 Javascript
浅谈$_FILES数组为空的原因
Feb 16 Javascript
浅谈js for循环输出i为同一值的问题
Mar 01 Javascript
关于axios如何全局注册浅析
Jan 14 Javascript
Vue自定义属性实例分析
Feb 23 Javascript
JS实现查找数组中对象的属性值是否存在示例
May 24 Javascript
Echarts地图添加引导线效果(labelLine)
Sep 30 Javascript
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
Vue $emit()不能触发父组件方法的原因及解决
Jul 28 Javascript
在vue中配置不同的代理同时访问不同的后台操作
Sep 11 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
php Undefined index的问题
2009/06/01 PHP
PHP正则匹配到2个字符串之间的内容方法
2018/12/24 PHP
优化innerHTML操作(提高代码执行效率)
2011/08/20 Javascript
JavaScript 图像动画的小demo
2012/05/23 Javascript
Windows8下搭建Node.js开发环境教程
2014/09/03 Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
2014/12/16 Javascript
不使用ajax实现无刷新提交表单
2014/12/21 Javascript
JQuery中attr方法和removeAttr方法用法实例
2015/05/18 Javascript
TypeScript 中接口详解
2015/06/19 Javascript
js实现a标签超链接提交form表单的方法
2015/06/24 Javascript
通过设置CSS中的position属性来固定层的位置
2015/12/14 Javascript
JavaScript动态生成二维码图片
2016/04/20 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
2018/10/16 Javascript
小程序多图列表实现性能优化的方法步骤
2019/05/28 Javascript
Nuxt.js nuxt-link与router-link的区别说明
2020/11/06 Javascript
[04:40]2016个国际邀请赛中国区预选赛场地——华西村观战指南
2016/06/25 DOTA
[01:10:48]完美世界DOTA2联赛PWL S2 GXR vs PXG 第一场 11.18
2020/11/18 DOTA
python从ftp下载数据保存实例
2013/11/20 Python
Python常见格式化字符串方法小结【百分号与format方法】
2016/09/18 Python
python下读取公私钥做加解密实例详解
2017/03/29 Python
浅谈python中的数字类型与处理工具
2017/08/02 Python
Python正则表达式非贪婪、多行匹配功能示例
2017/08/08 Python
Python操作mongodb数据库进行模糊查询操作示例
2018/06/09 Python
Python设计模式之建造者模式实例详解
2019/01/17 Python
详解Python的三种拷贝方式
2020/02/11 Python
Matplotlib使用字符串代替变量绘制散点图的方法
2020/02/17 Python
浅谈多卡服务器下隐藏部分 GPU 和 TensorFlow 的显存使用设置
2020/06/30 Python
通过Django Admin+HttpRunner1.5.6实现简易接口测试平台
2020/11/11 Python
CSS3实现任意图片lowpoly动画效果实例
2017/05/11 HTML / CSS
HTML5+CSS3实现拖放(Drag and Drop)示例
2014/07/07 HTML / CSS
澳大利亚最受欢迎的美发用品目的地:AMR
2019/08/28 全球购物
网吧收银员岗位职责
2013/12/14 职场文书
市政施工员自我鉴定
2014/01/15 职场文书
研究生导师推荐信
2014/09/06 职场文书
2014年销售人员工作总结
2014/11/27 职场文书
Windows server 2012 配置Telnet以及用法详解
2022/04/28 Servers