码迷,mamicode.com
首页 > Windows程序 > 详细

file API+JCrop 选择、裁剪并上传头像

时间:2016-05-06 23:25:44      阅读:749      评论:0      收藏:0      [点我收藏+]

标签:

  file API,直接读取本地文件,绕过了后台处理再返回前台的过程,使编程更简单。fileAPI和JCrop的结合使用上传头像。

  1、html部分

  <input id="demo" type="file" onchange="showPic();"/>

  <img id="avatar" src="">

  2、fileAPI预览图片(jquery)

  <script type="text/javascript">

  function showPic(){

    var file = $(‘#demo‘)[0].files[0];

    var reader = new FileReader();

    reader.onload = function(){//加载成功后会触发。reader.onloadend加载成功或失败都会触发

      $(‘#avatar‘).attr(‘src‘,reader.result);

    }

    reader.readAsDataURL(file);

  }

  </script>

  3、JCrop截取图片工具

  <link rel="stylesheet" href="./JCrop/css/jquery.Jcrop.css" />

  <script src="./jquery-1.8.3.min.js" type="text/javascript"></script>

  //1.8.2版本支持的很好,1.11有点问题,如果项目版本不支持,在下面再引用一遍1.8.2把之前版本覆盖就行,我试着是可以

  <script type="text/javascript" src="./JCrop/js/jquery.JCrop.min.js"></script>

  <script type="text/javascript">

  function showPic(){

    var file = $(‘#demo‘)[0].files[0];

    var reader = new FileReader();

    reader.onloadend = function(){

      $(‘#avatar‘).attr(‘src‘,reader.result);

    }

    reader.readAsDataURL(file);

    var JCropAPI = $.Jcrop($("#avatar"),{//这个格式要看清

      aspectRatio : 1 , //设置截图为正方形

      onChange: showCoords,//

      onSelect: showCoords

    });

  }

  function showCoords(coords){//这个方法一般用来预览裁剪效果

    console.log(coords);//可以打印看看,存储的是截图信息

  }

  </script>

  这样前台的主要功能就有了。

  4、将图片和截取数据传往后台处理

  上面coords对象,记录着截取图片的相关信息(x,y,x2,y2,w,h),上方两个点的坐标和截取的宽度和高度

  Jcrop的getScaleFactor()方法可以获取图片缩放比例[w,h]。

  具体何时以及如何完成传值就看个人喜好了。

  5、附API

  参数:

 

名称

默认值

说明

allowSelect

true

允许新选框

allowMove

true

允许选框移动

allowResize

true

允许选框缩放

trackDocument

true

 

baseClass

“jcrop”

基础样式名前缀。说明:class=”jcrop-holder”,更改的只是其中的 jcrop

addClass

null

添加样式。例:假设值为 “test”,那么会添加样式到

bgColor

“black”

背景颜色。颜色关键字、HEXRGB 均可。

bgOpacity

0.6

背景透明度

bgFade

false

使用背景过渡效果

borderOpacity

0.4

选框边框透明度

handleOpacity

0.5

缩放按钮透明度

handleSize

9

缩放按钮大小

handleOffset

5

缩放按钮与边框的距离

aspectRatio

0

选框宽高比。说明:width/height

keySupport

true

支持键盘控制。按键列表:上下左右(移动)、Esc(取消)、Tab(跳出裁剪框,到下一个)

cornerHandles

true

允许边角缩放

sideHandles

true

允许四边缩放

drawBorders

true

绘制边框

dragEdges

true

允许拖动边框

fixedSupport

true

 

touchSupport

null

 

boxWidth

0

画布宽度

boxHeight

0

画布高度

boundary

2

边界。说明:可以从边界开始拖动鼠标选择裁剪区域

fadeTime

400

过度效果的时间

animationDelay

20

动画延迟

swingSpeed

3

过渡速度

minSelect

[0,0]

选框最小选择尺寸。说明:若选框小于该尺寸,则自动取消选择

maxSize

[0,0]

选框最大尺寸

minSize

[0,0]

选框最小尺寸

onChange

function(){}

选框改变时的事件

onSelect

function(){}

选框选定时的事件

onRelease

function(){}

取消选框时的事件

  方法:

  

名称

说明

setImage(string)

设定(或改变)图像。例:jcrop_api.setImage("newpic.jpg")

setOptions(object)

设定(或改变)参数,格式与初始化设置参数一样

setSelect(array)

创建选框,参数格式为:[x,y,x2,y2]

animateTo(array)

用动画效果创建选框,参数格式为:[x,y,x2,y2]

release()

取消选框

disable()

禁用 Jcrop。说明:已有选框不会被清除。

enable()

启用 Jcrop

destroy()

移除 Jcrop

tellSelect()

获取选框的值(实际尺寸)。例子:console.log(jcrop_api.tellSelect())

tellScaled()

获取选框的值(界面尺寸)。例子:console.log(jcrop_api.tellScaled())

getBounds()

获取图片实际尺寸,格式为:[w,h]

getWidgetSize()

获取图片显示尺寸,格式为:[w,h]

getScaleFactor()

获取图片缩放的比例,格式为:[w,h]。

网上有些版本的jquery.JCrop.min.js文件中不包含这个方法,重新下载一个完成版

file API+JCrop 选择、裁剪并上传头像

标签:

原文地址:http://www.cnblogs.com/dwding/p/5463387.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!