jquery.imgareaselect.js如何使用

 我来答

1个回答

#合辑# 机票是越早买越便宜吗？

huanglenzhi
2014-02-27 · 知道合伙人数码行家

huanglenzhi
知道合伙人数码行家

采纳数：117538 获赞数：517199

长期从事计算机组装，维护，网络组建及管理。对计算机硬件、操作系统安装、典型网络设备具有详细认知。

向TA提问私信TA

关注

展开全部

<%@ 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>


本回答被提问者和网友采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

jquery.imgareaselect.js如何使用

其他类似问题

为你推荐：