`
zhenghuali168
  • 浏览: 73787 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

使用jquery.imgareaselect在页面进行截图操作

jquery图片裁剪 
阅读更多
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.imgareaselect.pack.js"></script>
<script type="text/javascript" src="js/test.js"></script>

<script type="text/javascript">
function preview(img, selection) {
    if (!selection.width || !selection.height)
        return;
   
    var scaleX = 88 / selection.width;
    var scaleY = 88 / selection.height;

    $('#preview1 img').css({
        width: Math.round(scaleX * 300),
        height: Math.round(scaleY * 300),
        marginLeft: -Math.round(scaleX * selection.x1),
        marginTop: -Math.round(scaleY * selection.y1)
    });
   
    scaleX = 64 / selection.width;
    scaleY = 64 / selection.height;
   
    $('#preview2 img').css({
        width: Math.round(scaleX * 300),
        height: Math.round(scaleY * 300),
        marginLeft: -Math.round(scaleX * selection.x1),
        marginTop: -Math.round(scaleY * selection.y1)
    });
   
    scaleX = 40 / selection.width;
    scaleY = 40 / selection.height;
   
    $('#preview img').css({
        width: Math.round(scaleX * 300),
        height: Math.round(scaleY * 300),
        marginLeft: -Math.round(scaleX * selection.x1),
        marginTop: -Math.round(scaleY * selection.y1)
    });
   
    $('#x1').val(selection.x1);
    $('#y1').val(selection.y1);
    $('#x2').val(selection.x2);
    $('#y2').val(selection.y2);
    $('#w').val(selection.width);
    $('#h').val(selection.height);   
}

$(function () {
    $('#photo').imgAreaSelect({ aspectRatio: '1:1', handles: true,
        fadeSpeed: 200, onSelectChange: preview, show: true,x1:0,y1:0, x2:88,y2:88});
});
</script>

</head>
<body>
<h2>Live Example</h2>

<div class="container demo">
  <div style="float: left; width: 50%;">
    <p class="instructions">
      Click and drag on the image to select an area.
    </p>

<input type="file" id="upload" onchange="PreviewImage('Preview',this,300,300);" />
<p></p>
    <div class="frame" style="margin: 0 0.3em; width: 300px; height: 300px;">
      <img id="photo" src="image/flower2.jpg" />
    </div>
  </div>

  <div style="float: left; width: 50%;">
    <p style="font-size: 110%; font-weight: bold; padding-left: 0.1em;">
      Selection Preview
    </p>
 
    <div class="frame"
      style="margin: 0 1em; width: 88px; height: 88px;">
      <div id="preview1" style="width: 88px; height: 88px; overflow: hidden;">
        <img src="image/flower2.jpg" style="width: 88px; height: 88px;" />
      </div>
    </div>
<br/>

<div class="frame"
      style="margin: 0 1em; width: 64px; height: 64px;">
      <div id="preview2" style="width: 64px; height: 64px; overflow: hidden;">
        <img src="image/flower2.jpg" style="width: 64px; height: 64px;" />
      </div>
    </div>
    <br />
    <div class="frame"
      style="margin: 0 1em; width: 40px; height: 40px;">
      <div id="preview" style="width: 40px; height: 40px; overflow: hidden;">
        <img src="image/flower2.jpg" style="width: 40px; height: 40px;" />
      </div>
    </div>
   
<br/>
    <table style="margin-top: 1em;">
      <thead>
        <tr>
          <th colspan="2" style="font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;">
            Coordinates
          </th>
          <th colspan="2" style="font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;">
            Dimensions
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td style="width: 10%;"><b>X<sub>1</sub>:</b></td>
      <td style="width: 30%;"><input type="text" id="x1" value="-" /></td>
      <td style="width: 20%;"><b>Width:</b></td>
       <td><input type="text" value="-" id="w" /></td>
        </tr>
        <tr>
          <td><b>Y<sub>1</sub>:</b></td>
          <td><input type="text" id="y1" value="-" /></td>
          <td><b>Height:</b></td>
          <td><input type="text" id="h" value="-" /></td>
        </tr>
        <tr>
          <td><b>X<sub>2</sub>:</b></td>
          <td><input type="text" id="x2" value="-" /></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td><b>Y<sub>2</sub>:</b></td>
          <td><input type="text" id="y2" value="-" /></td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
    </table>
  </div>
 
</div>
</body>
</html>
分享到：
| 笔记本电脑Win7系统搭建WiFi
评论
2 楼 cike8899 2014-12-19  
压根就没效果啊，怎么用，image/flower2.jpg 这个文件也没有！
1 楼 liugang_ok 2014-07-17  
这个是针对已有图片截图，要是针对电脑屏幕的截图就好了。
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics