前言：想到用户资料中一般有个图像自我截取的部分，为什么要截取呢，因为好看了。so，经过我各种百度，各种参考，终于打工搞成了，写下纪念纪念，让以后拿来就用也好。

一：想前端ui这东西，我就懒得说话了，哎，没艺术啊！毫不犹豫的选择上网找资料了，发现一般有两种方法1：Jcrop；2：imgAreaSelect；呵呵，我选了imgAreaSelect;使用很简单么？

二：获取这个插件包：点我就来了开心吧！

三：使用方法简介：

$('#img').imgAreaSelect({

　　各种参数配置，回调函数

});

  1. $('img#select').imgAreaSelect({
  2.         selectionColor:'blue', //截取颜色
    　　　　//看名字就知道了，截取部分的左上右下的点坐标哦
  3.         x1:0,y1:0,x2:50,y2:50,
  4.         maxWidth:400,maxHeitht:400,   //限定的截取部分宽高：
  5.         minWidth:50,minHeight:50,
  6.         selectionOpacity:0.1,         //截取的透明度
  7.         handles: true,                //截取边框的小柄
  8.         aspectRatio:'1:1',            //固定比例大小
  9.         onSelectEnd:preview  //截取操作完后，需要获取什么的函数，自定义
  10.  
  11.     });

官网在这     百度文库中文对译部分：         他人博客：

-------------------------------------------------------------------------

四：附加解释说明，经过上方各种链接可能聪明的你已经有点不懂了

（截取的原理）：

1：给定你想选择显示截取后的大小：比如200

2：实际你截取的大小：select_width:

3: 显示比例：scale  = 200 / (selection.width || 1);

4: 如何显示呢？把原图按此比例扩大，然后在控制边距以  -x,-y，偏移

　　回调函数部分：

  1.     var scaleX = 200 / (selection.width || 1);
  2.         var scaleY = 200 / (selection.height || 1);
  3.  
  4.         var scaleX1 = 100 / (selection.width || 1);
  5.         var scaleY1 = 100 / (selection.height || 1);
  6.  
  7.         $('#preview200').css({
  8.             width: Math.round(scaleX * 300) + 'px',
  9.             height: Math.round(scaleY * 300) + 'px',
  10.             marginLeft: '-' + Math.round(scaleX*selection.x1) + 'px',
  11.             marginTop: '-' + Math.round(scaleY*selection.y1) + 'px'
  12.  
  13.         });

五：好了，激动人心的时候来了，请看图：

参考代码：不含服务端对图像的截取

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>图像选取</title>
  6.  
  7. <link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
  8.   <script type="text/javascript" src="scripts/jquery.min.js"></script>
  9.   <script type="text/javascript" src="scripts/jquery.imgareaselect.pack.js"></script>
  10.   <script type="text/javascript" src="../_uploadfilecheck.js"></script>
  11. <script type="text/javascript">
  12. $(document).ready(function () {
  13.     $('img#select').imgAreaSelect({
  14.         selectionColor:'blue',
  15.         x1:0,y1:0,x2:50,y2:50,
  16.         maxWidth:400,maxHeitht:400,
  17.         minWidth:50,minHeight:50,
  18.         selectionOpacity:0.1,
  19.          handles: true,
  20.          aspectRatio:'1:1',
  21.          onSelectEnd:preview
  22.  
  23.     });
  24.     $("#button1").click(function(){
  25.         if(checkImgType($("#imgFile")[0])){
  26.             $(this).parent().submit();
  27.  
  28.         }
  29.     });
  30.  
  31.     $("#button2").click(function(){
  32.             alert($(this).parent().submit());
  33.     });
  34. })
  35. function getValue(selection){
  36.               $('input[name="x1"]').val(selection.x1);
  37.             $('input[name="y1"]').val(selection.y1);
  38.             $('input[name="width"]').val(selection.width);
  39.             $('input[name="height"]').val(selection.height);
  40. }
  41. function preview(img, selection) {
  42.     if(selection.width>49){
  43.         getValue(selection);
  44.         var scaleX = 200 / (selection.width || 1);
  45.         var scaleY = 200 / (selection.height || 1);
  46.  
  47.         var scaleX1 = 100 / (selection.width || 1);
  48.         var scaleY1 = 100 / (selection.height || 1);
  49.  
  50.         $('#preview200').css({
  51.             width: Math.round(scaleX * 300) + 'px',
  52.             height: Math.round(scaleY * 300) + 'px',
  53.             marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
  54.             marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
  55.  
  56.         });
  57.         $('#preview100').css({
  58.             width: Math.round(scaleX1 * 300) + 'px',
  59.             height: Math.round(scaleY1 * 300) + 'px',
  60.             marginLeft: '-' + Math.round(scaleX1* selection.x1) + 'px',
  61.             marginTop: '-' + Math.round(scaleY1 * selection.y1) + 'px'
  62.  
  63.         });
  64.  
  65.     }
  66. }
  67.  
  68. </script>
  69.  
  70. <style type="text/css">
  71.     #container{
  72.     //    position:absolute;
  73. //        left:40px;
  74.     //    background:#FFF;
  75.  
  76.         border:#666 2px solid;
  77.         border-radius:10px;
  78.         width:600px;
  79.         height:500px;
  80.         padding:20px;
  81.     }
  82.     #selectdiv{
  83.         width:350px;
  84.         height:550px;
  85.         float:left;
  86.     //    border-right:#666 2px solid;
  87.     //    border:#666 2px solid;
  88.     }
  89.     #uploaddiv{
  90.         margin-top:20px;
  91.         border-top:#CCC 1px solid;
  92.     }
  93.     #prediv200{
  94.         height:200px;
  95.         width:200px;
  96.         overflow:hidden;
  97.         border:#CCC 3px dashed;
  98.     }
  99.     #prediv100{
  100.         height:100px;
  101.         width:100px;
  102.         overflow:hidden;
  103.         border:#CCC 3px dashed;
  104.     }
  105.     #preview{
  106.         position:relative;
  107.         overflow:hidden;
  108.     }
  109.     [type=button]{
  110.         width:50px;
  111.     }
  112. </style>
  113. </head>
  114.  
  115. <body>
  116.  
  117.     <div id="container">
  118.  
  119.         <div id="selectdiv">
  120.             <img  id="select" src="26.jpg" width="300px"  height="300px"  />
  121.  
  122.             <div>
  123.                     <p>图片上传:<font color='red'>*.gif,*.jpg,*.png,*.bmp</font></p>
  124.  
  125.                 <form>
  126.                    <input type="file" name="imgFile" id="imgFile"><br /><br />
  127.                    <input type="button" value="上传" id="button1"/>
  128.                 </form>
  129.             </div>
  130.        </div>
  131.  
  132.         <div id="prediv200">
  133.             <img  id="preview200" src="26.jpg"  width="200px"  height="200px" />
  134.         </div>
  135.  
  136.          <div id="prediv100">
  137.             <img  id="preview100" src="26.jpg"  width="100px"  height="100px" />
  138.         </div>
  139.  
  140.            <div>
  141.            <form>
  142.               <input type="hidden" name="x1" value="0" />
  143.               <input type="hidden" name="y1" value="0" />
  144.               <input type="hidden" name="width" value="100" />
  145.               <input type="hidden" name="height" value="100" />
  146.               <br /><br />
  147.               <input type="button" value="修改" id="button2"/>
  148.             </form>
  149.         </div>
  150.     </div>
  151.  
  152. </body>
  153. </html>

文件上传验证js:

  1.  /**检查图片上传类型*/
  2.          function checkImgType(obj){  
  3.  
  4.           var imgFile = '';
  5.           //获取图片的全路径
  6.           var imgFilePath = getImgFullPath(obj);
  7.           var endIndex = imgFilePath.lastIndexOf("\\");
  8.           var lastIndex = imgFilePath.length-endIndex-1;
  9.           if (endIndex != -1)
  10.              imgFile= imgFilePath.substr(endIndex+1,lastIndex);
  11.           else
  12.              imgFile = imgFilePath;       
  13.  
  14.           var tag = true;
  15.           endIndex = imgFilePath.lastIndexOf(".");
  16.           if (endIndex == -1)
  17.             tag = false;  
  18.  
  19.           var ImgName = imgFilePath.substr(endIndex+1,lastIndex);
  20.           ImgName = ImgName.toUpperCase();          
  21.  
  22.           if (ImgName !="GIF" && ImgName !="JPG" && ImgName !="PNG" && ImgName !="BMP"){
  23.               tag=false;
  24.           }
  25.           if (!tag) {
  26.               alert("上传图片的文件类型必须为: *.gif,*.jpg,*.png,*.bmp,请重新选择!")
  27.               alert("你逗我么");
  28.         //      Upload.clear(obj);
  29.               return false;
  30.           }
  31.           return true;
  32.       }  
  33.  
  34.         function getImgFullPath(obj) {
  35.             if (obj) {
  36.                //ie
  37.                if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
  38.                    obj.select();
  39.                    return document.selection.createRange().text;
  40.                }
  41.                //firefox
  42.                else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {
  43.                    if (obj.files) {
  44.                        return obj.files.item(0).getAsDataURL();
  45.                    }
  46.                    return obj.value;
  47.                }
  48.                return obj.value;
  49.            }
  50.         }

2014-07-19 13:59:55

基于imgAreaSelect的用户图像截取的更多相关文章

  1. 基于AXI VDMA的图像采集系统

    基于AXI VDMA的图像采集系统 转载 2017年04月18日 17:26:43 标签: framebuffer / AXIS / AXI VDMA 2494 本课程将对Xilinx提供的一款IP核 ...

  2. 基于SURF特征的图像与视频拼接技术的研究和实现（一）

    基于SURF特征的图像与视频拼接技术的研究和实现(一)      一直有计划研究实时图像拼接,但是直到最近拜读西电2013年张亚娟的<基于SURF特征的图像与视频拼接技术的研究和实现>,条 ...

  3. 基于jwt的用户登录认证

    最近在app的开发过程中,做了一个基于token的用户登录认证,使用vue+node+mongoDB进行的开发,前来总结一下. token认证流程: 1:用户输入用户名和密码,进行登录操作,发送登录信 ...

  4. 基于RC4加密算法的图像加密

    基于RC4加密算法的图像加密 某课程的一个大作业内容,对图像加密.项目地址:https://gitee.com/jerry323/RC4_picture 这里使用的是RC4(流.对称)加密算法,算法流 ...

  5. Laravel 5 中使用 JWT（Json Web Token） 实现基于API的用户认证

    在JavaScript前端技术大行其道的今天,我们通常只需在后台构建API提供给前端调用,并且后端仅仅设计为给前端移动App调用.用户认证是Web应用的重要组成部分,基于API的用户认证有两个最佳解决 ...

  6. 基于jQuery点击图像居中放大插件Zoom

    分享一款基于jQuery点击图像居中放大插件Zoom是一款放大的时候会从原图像的位置以动画方式放大到画面中间,支持点击图像或者按ESC键来关闭效果.效果图如下: 在线预览   源码下载 实现的代码. ...

  7. 深度学习与计算机视觉(12)_tensorflow实现基于深度学习的图像补全

    深度学习与计算机视觉(12)_tensorflow实现基于深度学习的图像补全 原文地址:Image Completion with Deep Learning in TensorFlow by Bra ...

  8. 项目一:第十一天 2、运单waybill快速录入 3、权限demo演示-了解 5、权限模块数据模型 6、基于shiro实现用户认证-登录（重点）

    1. easyui DataGrid行编辑功能 2. 运单waybill快速录入 3. 权限demo演示-了解 4. Apache shiro安全框架概述 5. 权限模块数据模型 6. 基于shiro ...

  9. 基于稀疏表示的图像超分辨率《Image Super-Resolution Via Sparse Representation》

    由于最近正在做图像超分辨重建方面的研究,有幸看到了杨建超老师和马毅老师等大牛于2010年发表的一篇关于图像超分辨率的经典论文<ImageSuper-Resolution Via Sparse R ...

随机推荐

  1. 告别 MongoDB 2.x 拥抱 3.x 版本的5大理由（转）

    据不完全统计,目前还有很多同学在生产环境使用着 MongoDB 2.x 版本的服务,偶尔也会听到一些抱怨,但有些抱怨其实很没道理,因为抱怨的问题在最新版本的MongoDB里已经解决了,你缺的只是一次版 ...

  2. ext4向后兼容代码

    ext.h: #define EXT4_GOOD_OLD_INODE_SIZE 128 ... #define EXT4_GOOD_OLD_REV 0 /* The good old (origina ...

  3. Python 函数的一般形式及参数

    #!/usr/bin/env python # -*- coding:utf-8 -*- # @Time : 2017/11/01 21:46 # @Author : lijunjiang # @Fi ...

  4. Day 23 异常处理

    异常处理 一.异常基本形式 # if # def test: # pass # class Foo # pass def test(): ''' 异常的基本类型和相关 :return: ''' try ...

  5. hdu 2242 无向图/求用桥一分为二后使俩个bcc点权值和之差最小并输出 /缩点+2次新图dfs

    题意如标题所述, 先无向图缩点,统计出每个bcc权,建新图,然后一遍dfs生成树,标记出每个点(新图)以及其子孙的权值之和.这样之后就可以dfs2来枚举边(原图的桥),更新最小即可. 调试了半天!原来 ...

  6. 解决dvajs使用BrowserHistory路由模式后仍然会出现hash（哈希）

    在dvajs中,如果你在初始化dva对象的时候不作任何处理,那么你就会发现即使你是用了BrowserRouter来作为Router url中也是会出现#/.解决方法也很简单: 使用前先手动安装下 hi ...

  7. mysql数据库基本操作（六）

    外键约束 创建外键 前面讲的表单查询都是一张表,但项目中表与表之间是有关联的,比如我们创建的学生表,他们可能在不同班级,不同班级有不同的班主任,他们之间的关系大概是这样的:每一个班主任会对应多个学生 ...

  8. ABP开发框架前后端开发系列---（3）框架的分层和文件组织

    在前面随笔<ABP开发框架前后端开发系列---(2)框架的初步介绍>中,我介绍了ABP应用框架的项目组织情况,以及项目中领域层各个类代码组织,以便基于数据库应用的简化处理.本篇随笔进一步对 ...

  9. Java开发笔记（一百零四）普通线程池的运用

    前面介绍了线程的基本用法,以及多线程并发的问题处理,但实际开发中往往存在许多性质相似的任务,比如批量发送消息.批量下载文件.批量进行交易等等.这些同类任务的处理流程一致,不存在资源共享问题,相互之间也 ...

  10. Android 日期对话框DatePickerDialog

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout android:id="@ ...