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 相关文章推荐
一些易混淆且不常用的属性,希望有用
Jan 29 Javascript
javascript数组排序汇总
Jul 07 Javascript
推荐10 个很棒的 jQuery 特效代码
Oct 04 Javascript
jquery特效 点击展示与隐藏全文
Dec 09 Javascript
浅谈js中StringBuffer类的实现方法及使用
Sep 02 Javascript
原生JS:Date对象全面解析
Sep 06 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
May 27 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
Nov 11 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
Sep 29 Javascript
javascript实现计算指定范围内的质数示例
Dec 29 Javascript
JavaScript如何实现元素全排列实例代码
May 14 Javascript
详解vue身份认证管理和租户管理
May 25 Vue.js
原生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
967 个函式
2006/10/09 PHP
PHP中实现进程间通讯
2006/10/09 PHP
php文本转图片自动换行的方法
2013/03/13 PHP
解析Extjs与php数据交互(增删查改)
2013/06/25 PHP
set_exception_handler函数在ThinkPHP中的用法
2014/10/31 PHP
php微信公众平台开发之获取用户基本信息
2015/08/17 PHP
Thinkphp通过一个入口文件如何区分移动端和PC端
2017/04/18 PHP
使用swoole 定时器变更超时未支付订单状态的解决方案
2019/07/24 PHP
Mootools 1.2教程 同时进行多个形变动画
2009/09/15 Javascript
javascript textarea光标定位方法(兼容IE和FF)
2011/03/12 Javascript
Javascript 面向对象(二)封装代码
2012/05/23 Javascript
Javascript实现视频轮播在pc端与移动端均可
2013/09/29 Javascript
jquery实现翻动fadeIn显示的方法
2015/03/05 Javascript
基于javascript编写简单日历
2016/05/02 Javascript
JS判断form内所有表单是否为空的简单实例
2016/09/09 Javascript
jquery对象与DOM对象转化
2017/02/08 Javascript
Vue响应式原理详解
2017/04/18 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
2020/06/02 jQuery
jQuery实现动态向上滚动
2020/12/21 jQuery
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
100行python代码实现跳一跳辅助程序
2018/01/15 Python
Anaconda下安装mysql-python的包实例
2018/06/11 Python
Flask框架Jinjia模板常用语法总结
2018/07/19 Python
用python实现刷点击率的示例代码
2019/02/21 Python
浅谈python处理json和redis hash的坑
2020/07/16 Python
利用css3画个同心圆示例代码
2017/07/03 HTML / CSS
HTML5 canvas实现的静态循环滚动播放弹幕
2021/01/05 HTML / CSS
书法大赛策划方案
2014/06/04 职场文书
关于保护环境的标语
2014/06/09 职场文书
2014年十一国庆节活动方案
2014/09/16 职场文书
关于工作经历的证明书
2014/10/11 职场文书
酒店总经理岗位职责
2015/04/01 职场文书
2015大学党建带团建工作总结
2015/07/23 职场文书
2016年庆祝六一儿童节活动总结
2016/04/06 职场文书
python实现腾讯滑块验证码识别
2021/04/27 Python
8个JS的reduce使用实例和reduce操作方式
2021/10/05 Javascript