澳门金莎娱乐手机版 服务器 本文实例讲述了js实现Select头像选择实时预览代码,并且要保存用户裁切后的部分作为用户头像澳门金莎娱乐手机版

本文实例讲述了js实现Select头像选择实时预览代码,并且要保存用户裁切后的部分作为用户头像澳门金莎娱乐手机版

本文实例叙述了js完结Select头像筛选实时预览代码。分享给大家供大家参照他事他说加以考察。具体如下:

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

急需表明

大概的话正是要兑现顾客上传头像,况兼要封存客商裁切后的一些作为客户头像。

第一步,选取图片:

澳门金莎娱乐手机版 1 

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

澳门金莎娱乐手机版 2 

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

落到实处进度

说来有一些坎坷,也就是做了2遍,走了弯路。

第1遍是客户意气风发采用图片,就开展了上传,然后回到一个位置,所以在弹层上海展览中心现的图纸已然是服务器上的图形了,然后开展裁切,再保存。

第2遍找到的贰个格局,是在第1遍完毕裁切管理时候想到的,即弹层表现的是顾客机器上采撷的图样,不用先上传,可是用image/base64来表现的。那样就与服务器少了叁遍人机联作啊,况兼服务器不用存储2遍图片,还压实了弹层表现速度,体验越来越好,所以是极好的。

说下碰着的主要性手艺点:

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

HTML5/FileReader/canvas,File里德r用于将文件读取为数据,大家使用它的onLoad事件;canvas这几个作为裁切移动时,实时重绘裁切后的图样(约等于实时预览,当然作者是暗藏了,调节和测量检验的时候可以让他display),能够隐藏,最终上传的骨子里正是以此canvas的base64数据。

Jcrop plugin。这一个是裁切插件,必需的了。下载与认证在那。
其余便是base64字符串保存成图片了,那在服务端比较简单,直接用fs.writeFile(fileName,dataBuffer,function(err卡塔尔(英语:State of Qatar){}卡塔尔(قطر‎;就好了。

具体代码

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="澳门金莎娱乐手机版 3">
 <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变量用于记录选拔的原始图片尺寸与在弹窗上海展览中心现尺寸的紧缩/放大比例的,比如接纳的是1024×768的图形,不过弹窗上显现的界定是222×238,那就供给将减少的倍数记录下来,在裁切的重绘canvas的时候要倍加这些倍数,不然裁切的约束正是在这里个222×236尺寸上裁切的,并不是原始图片的尺寸上裁切的。而眼下的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实行图片剪切上传功用,希望对我们有着补助,即使大家有别的疑问请给本身留言,作者会及时还原我们的。在那也特别感激我们对帮客之家网址的帮忙!

澳门金莎娱乐手机版,
需要说明简来说之正是要兑现客商上传头像,并且要保留顾客裁切后的有个别作…

jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载卡塔尔(قطر‎,jqueryjcrop

正文实例陈诉了jQuery头像裁剪工具jcrop用法。分享给大家供我们参考,具体如下:

头像裁剪工具如今比较流行的是flash和jquery的。个人认为用jquery的可比好,因为代码稳重研讨一下,基本上能精晓怎么回事,想改的话也正如轻松。

有七个例证,请参照他事他说加以侦查:jcrop例子demo
,是根jcrop的事例改的,增多以下一个特征:

1,居中展现,並且可拖拖拉拉,改造截取的轻重
2,预览的图样,根拖沓的抑扬顿挫成比例。

以下是js代码,作了简要的卷入

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> 
  <title>jcrop 图片拖动</title>
  <script src="jquery.min.js" type="text/javascript"></script>
  <script src="jquery.Jcrop.min.js" type="text/javascript"></script>
  <link rel="stylesheet" href="jquery.Jcrop.css" type="text/css" />
  <link rel="stylesheet" href="demos.css" type="text/css" />
 </head>
 <body>
 <div id="outer">
 <div class="jcExample">
 <div class="article">
  <h1>上传头像拖动例子</h1>
  <table>
   <tr>
    <td>
     <img src="sago.jpg" id="target" alt="Flowers" />
    </td>
    <td>
     <div style="width:100px;height:100px;overflow:hidden;" id="aa">
      <img src="sago.jpg" id="preview" alt="Preview" class="jcrop-preview" />
     </div>
    </td>
   </tr>
  </table>
 </div>
 </div>
 </div>
 </body>
<script type="text/javascript">
new cutImage().init();
function cutImage(){
  var oop = this;
  this.option = {
    x:170,
    y:110,
    w:350,
    h:200,
    t:'target',
    p:'preview',
    o:'aa'
  }
  this.init = function(){
    oop.target();
  }
  this.target = function(){
   $('#'+oop.option['t']).Jcrop({
     onChange: oop.updatePreview,
     onSelect: oop.updatePreview,
     aspectRatio: 1,
     setSelect: [ oop.option['x'], oop.option['y'], oop.option['w'],oop.option['h'] ],
     bgFade:   true,
     bgOpacity: .5
    });
  }
  this.updatePreview = function(obj){
    if (parseInt(obj.w) > 0)
    {
     var rx = $('#'+oop.option['o']).width()/ obj.w;
     var ry = $('#'+oop.option['o']).height()/ obj.h;
     $('#'+oop.option['p']).css({
      width: Math.round(rx*$('#'+oop.option['t']).width()) + 'px',
      height: Math.round(ry*$('#'+oop.option['t']).height()) + 'px',
      marginLeft: '-' + Math.round(rx * obj.x) + 'px',
      marginTop: '-' + Math.round(ry * obj.y) + 'px'
     });
    }
  }
}
</script>
</html>

jquery jcrop结合jquery ajax
upload的话,可以使头像上传截取功能,很人性化。

完全实例代码点击这里本站下载。

愈来愈多关于jQuery插件相关内容感兴趣的读者可查看本站专项论题:《jQuery常用插件及用法总括》

但愿本文所述对大家jQuery程序设计有着帮忙。

此处演示js实现Select头像筛选,实时预览效果,在留言或臧否的时候,让客商简易的筛选头像,从前最视若无睹的点子是利用单选框,当然使用其余的款式也足以,举个例子前不久以此Select,下拉选框选择头像,也是不利的经历。

您大概感兴趣的篇章:

  • jQuery实现仿QQ头像闪烁效果的文字闪动指示代码
  • 听别人说jquery达成人物头像跟随鼠标转动
  • jquery随机展示头像代码
  • jQuery选取头像并实时突显的代码
  • 基于jquery.Jcrop的头像编辑器
  • WordPress JQuery管理沙发头像
  • jQuery完结图片上传和剪裁插件Croppie
  • jQuery插件jcrop+Fileapi完美兑现图片上传+裁剪+预览的代码分享
  • JQuery Jcrop 完成图片裁剪的插件
  • jQuery 图像裁剪插件Jcrop的简练利用
  • PHP结合JQueryJcrop实现图片裁切实例详细明白
  • jQuery jcrop插件截图使用格局
  • jQuery Jcrop插件完结图片接收效能

本文实例汇报了jQuery头像裁剪工具jcrop用法。分享给大家供咱们参考,具体…

select头像选择代码头像01头像02头像03 

盼望本文所述对咱们的javascript程序设计有着辅助。

标签:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图