node.js(express)中使用Jcrop进行图片剪切上传功能


Posted in Javascript onApril 21, 2017

需求说明

简单来说就是要实现用户上传头像,并且要保存用户裁切后的部分作为用户头像。

第一步,选择图片:

node.js(express)中使用Jcrop进行图片剪切上传功能 

第二步,在弹窗页面中展现并进行裁切:

node.js(express)中使用Jcrop进行图片剪切上传功能 

第三步,点击“保存”,上传服务器。

实现过程

说来有点坎坷,相当于做了2遍,走了弯路。

第1遍是用户一选择图片,就进行了上传,然后返回一个地址,所以在弹层上展现的图片已经是服务器上的图片了,然后进行裁切,再保存。

第2遍找到的一个方法,是在第1遍做到裁切处理时候想到的,即弹层展现的是用户机器上选择的图片,不用先上传,但是用image/base64来展现的。这样就与服务器少了一次交互啊,并且服务器不用存储2遍图片,还提高了弹层展现速度,体验更好,所以是极好的。

说下碰到的主要技术点:

express框架不用多说,就是保存的时候post一下裁切后的base64数据,后台写个对应路由就好。
Jquery也不用多说,页面展现控制与ajax提交。

HTML5/FileReader/canvas,FileReader用于将文件读取为数据,我们使用它的onLoad事件;canvas这个用作裁切移动时,实时重绘裁切后的图片(相当于实时预览,当然我是隐藏了,调试的时候可以让他display),可以隐藏,最后上传的其实就是这个canvas的base64数据。

Jcrop plugin。这个是裁切插件,必须的了。下载与说明在这里。
其他就是base64字符串保存成图片了,这在服务端比较简单,直接用fs.writeFile(fileName,dataBuffer,function(err){});就好了。

具体代码

view页面,主要需要有一个上传控件,还有定义弹窗div以及用于重绘裁切范围图片的canvas,当然页面要引用相应的js插件和css等,主要:

<link rel="stylesheet" href="/css/jquery.Jcrop.css" rel="external nofollow" >
<script src="/js/jquery.js"></script>
<script src="/js/jquery.Jcrop.js"></script>
<!--上传控件-->
<input type="file" name="upLoadImg1" id="upLoadImg1">
<!--弹窗与裁切图-->
<div class="cover">
 <img id="Img1" alt="">
 <button id="btnSave">保存</button>
</div>
<!--裁切范围重绘canvas-->
<canvas id="myCanva" width="200" height="200">

js/jQuery,处理图片加载与裁切上传。

首先要监控上传控件的变化,因为我们这里没有按钮来触发,所以直接监控upLoadImg1的change来触发。

$('#upLoadImg1').on('change', function() {
 if (document.getElementById("upLoadImg1").files.length === 0) {
  return;
 }
 var oFile = document.getElementById("upLoadImg1").files[0];
 if (!oFile) {
  return;
 }
 var fileName = oFile.name;
 var fileSize = oFile.size;
 var fileType = fileName.substring(fileName.lastIndexOf('.'), fileName.length).toLowerCase();
 if (fileType != '.jpg' && fileType != '.jpeg' && fileType != '.gif' && fileType != '.png' && fileType != '.bmp') {
  alert("请选择jpg,png,gif,bmp格式的图片");
  return;
 }
 if (fileSize > 2 * 1024 * 1024) {
  alert('最大支持2MB的图片');
  return;
 }
 var fileReader = new FileReader();
 fileReader.readAsDataURL(oFile);
 // 成功读取
 fileReader.onload = function(e) {
  // 显示弹窗
  $('.cover').show();
  // 将弹窗中的图片路径设置为选择的图片的base64
  $('#Img1').attr('src', e.target.result);
  // 裁切组件初始化
  initJcrop();
 };
});

裁切在弹窗一显示的时候就应该初始化:

function initJcrop() {
 $('#Img1').Jcrop({
  onChange: updateCoords,
  onSelect: updateCoords,
  aspectRatio: 1,
  boxWidth: 300,
  boxHeight: 300
 }, function() {
  //弹窗中显示的图片尺寸 
  var bb = this.getBounds();
  var bWidth = Number(bb[0]) / 2;
  var bHeight = Number(bb[1]) / 2;
  //设置初始选中裁切范围
  this.setSelect([0, 0, bWidth, bHeight]);
  //原始图片缩小比例
  try {
   wdthScale = $('#Img1')["0"].width / 222;
   heightScale = $('#Img1')["0"].height / 238;
  } catch (e) {}
  jcrop_api = this;
 });
}

非常重要的一个坑是,在此之前要定义全局变量jcrop_api,widthScale和heightScale,2个scale变量用于记录选择的原始图片尺寸与在弹窗上展现尺寸的缩小/放大比例的,比如选择的是1024x768的图片,但是弹窗上展现的范围是222x238,这就需要将缩小的倍数记录下来,在裁切的重绘canvas的时候要乘以这个倍数,否则裁切的范围就是在这个222x236尺寸上裁切的,而不是原始图片的尺寸上裁切的。而前面的jcrop_api变量用于重新选择图片时要将上一次的裁切初始化组件destroy掉。

Jcrop组件中重要的事件:onChange和onSelect,用于确定裁切范围的坐标(尺寸),因此也非常重要,其实重绘canvas就是在这里面完成的。

function updateCoords(c) {
 var img = document.getElementById('Img1');
 var ctx = document.getElementById('myCanva').getContext('2d');
 try {
  wdthScale = wdthScale === 1 ? $('#Img1')["0"].width / 222 : wdthScale;
  heightScale = heightScale === 1 ? $('#Img1')["0"].height / 238 : heightScale;
 } catch (e) { }

 //绘制canvas画布
 ctx.drawImage(img, c.x, c.y, c.w * wdthScale, c.h * heightScale, 0, 0, 200, 200);
}

另外就是处理保存按钮来,一个ajax来提交canvas形成的图片的base64字符串,后台接受保存就可以了。

var data = document.getElementById('myCanva').toDataURL();
 $.ajax({
  url: '/xxxx',
  type: 'POST',
  dataType: 'JSON',
  cache: false,
  data: {
   'imgData': data
  },
  success: function(res) {},
  error: function(err) {}
 });

这就是上传裁切(实时预览)的全部过程了。

以上所述是小编给大家介绍的node.js(express)中使用Jcrop进行图片剪切上传功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
不同Jquery版本引发的问题解决
Oct 14 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
Oct 17 Javascript
JS实现的简洁二级导航菜单雏形效果
Oct 13 Javascript
原生js实现键盘控制div移动且解决停顿问题
Dec 05 Javascript
BootStrap 弹出层代码
Feb 09 Javascript
Vue.js 插件开发详解
Mar 29 Javascript
微信小程序分页加载的实例代码
Jul 11 Javascript
VUE 使用中踩过的坑
Feb 08 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
Aug 27 Javascript
javascript实现移动端轮播图
Dec 09 Javascript
原生js实现滑块区间组件
Jan 20 Javascript
避坑之 JavaScript 中的toFixed()和正则表达式
Apr 19 Javascript
原生javascript实现分页效果
Apr 21 #Javascript
微信小程序 跳转方式总结
Apr 20 #Javascript
微信小程序 setData的使用方法详解
Apr 20 #Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
Apr 20 #Javascript
微信小程序中form 表单提交和取值实例详解
Apr 20 #Javascript
ES6新特性一: let和const命令详解
Apr 20 #Javascript
javascript 正则表达式分组、断言详解
Apr 20 #Javascript
You might like
我的php学习笔记(毕业设计)
2012/02/21 PHP
获取PHP警告错误信息的解决方法
2013/06/03 PHP
简单的php新闻发布系统教程
2014/05/09 PHP
PHP+mysql实现从数据库获取下拉树功能示例
2017/01/06 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
laravel框架学习笔记之组件化开发实现方法
2020/02/01 PHP
JS 巧妙获取剪贴板数据 Excel数据的粘贴
2009/07/09 Javascript
window.onload 加载完毕的问题及解决方案(下)
2009/07/09 Javascript
js url传值中文乱码之解决之道
2009/11/20 Javascript
JS正则中的RegExp对象对象
2012/11/07 Javascript
关于JS管理作用域的问题
2013/04/10 Javascript
xmlhttp缓存清除的2种解决方法
2013/12/13 Javascript
JavaScript 学习笔记之基础中的基础
2015/01/13 Javascript
BootStrap 智能表单实战系列(五) 表单依赖插件处理
2016/06/13 Javascript
javascript 中的事件委托详解
2016/10/25 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
2017/04/13 Javascript
ReactNative页面跳转Navigator实现的示例代码
2017/08/02 Javascript
JavaScript读写二进制数据的方法详解
2018/09/09 Javascript
ztree加载完成后显示勾选节点的实现代码
2018/10/22 Javascript
python+pandas生成指定日期和重采样的方法
2018/04/11 Python
详解pandas DataFrame的查询方法(loc,iloc,at,iat,ix的用法和区别)
2019/08/02 Python
Python pip install如何修改默认下载路径
2020/04/29 Python
Python实现图片查找轮廓、多边形拟合、最小外接矩形代码
2020/07/14 Python
利用python 读写csv文件
2020/09/10 Python
Python 测试框架unittest和pytest的优劣
2020/09/26 Python
python实现网页录音效果
2020/10/26 Python
《愚公移山》教学反思
2014/02/20 职场文书
团队精神的演讲稿
2014/05/14 职场文书
幼儿园教师师德师风演讲稿:爱我所爱 无悔青春
2014/09/10 职场文书
2015年五四青年节演讲稿
2015/03/18 职场文书
2015年学校安全工作总结
2015/04/22 职场文书
乡镇法制宣传日活动总结
2015/05/05 职场文书
2015年大学团支部工作总结
2015/05/13 职场文书
离婚协议书范文2016
2016/03/18 职场文书
TV动画《八十龟酱观察日记》第四季宣传PV公布
2022/04/06 日漫
Redis实现分布式锁的五种方法详解
2022/06/14 Redis