Question

我有一个使用ImgAreaSelect的应用程序（v0.9.10）我有它的问题，它在FF，Chrome，Mac和PC中工作正常。 IE 10似乎有一个零星的裁剪问题。

我无法理解。当您加载图像，使用预览框然后尝试裁剪时，裁剪工具始终不起作用。这似乎是非常零星的问题，只在IE 10上出现。

这是页面代码。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Card Photo Upload</title>
<link rel="stylesheet" type="text/css" href="../css/imgareaselect-default.css" />  
<link rel="stylesheet" type="text/css" href="../css/base.css" />
<link rel="stylesheet" type="text/css" href="../css/styles.css" />
<style type="text/css">
#uploadForm { width: 300px; }
#uploadForm label { width: 250px; }
#uploadForm label.error, #uploadForm input.submit { margin-left: 253px; }
#uploadForm label.error {
    margin-left: 10px;
    width: auto;
    display: inline;
    color:#F00;
}

</style>

<script type="text/javascript" src="../scripts/jquery.min.js"></script>  
<script type="text/javascript" src="../scripts/jquery.imgareaselect.pack.js"></script> 
<script type="text/javascript" src="../scripts/jquery.validate.pack.js"></script> 

<script type="text/javascript">

function preview(img, selection) {
    if (!selection.width || !selection.height)
        return;

    var scaleX = 300 / selection.width;
    var scaleY = 300 / selection.height;

    $('#preview img').css({
        width: Math.round(scaleX * <Cfoutput>#ImageData.width#</cfoutput>) + 'px',
    height: Math.round(scaleY * <Cfoutput>#ImageData.height#</cfoutput> ) + 'px',
    marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
    marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
  });

    $('#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, minHight: 200, minHeight: 200,  x1: 0, y1: 0, x2: 200, y2: 200 ,onSelectChange: preview });

$('#photo').imgAreaSelect({ onSelectEnd: function (img, selection) {
            $('input[name=x1]').val(selection.x1);
            $('input[name=y1]').val(selection.y1);
            $('input[name=x2]').val(selection.x2);
            $('input[name=y2]').val(selection.y2);
       }
   });


});
</script>


</head>
<body>

<!--- SHOW IMAGE --->
<div class="container demo">

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

  <div class="frame" style="margin: 0 0.3em; width:<Cfoutput>#ImageData.width#</cfoutput>px">
<cfoutput>
<img src="../upload/#jpgFileName#" alt="Your Photo" id="photo" style="width=<Cfoutput>#ImageData.width#</cfoutput>px;" />
</cfoutput>
  </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: 300px; height: 300px;">
   <div id="preview" style="width: 300px; height: 300px; overflow: hidden;">
   <Cfoutput>
<img src="../upload/#jpgFileName#" alt="Your Photo"  />
</Cfoutput>
   </div>
  </div>

<br />
<div class="frame" style="margin: 0pt 1em; width: 300px; ">
<form action="edit_process.cfm" id="uploadForm" method="post">
    <fieldset>
        <legend>Edit and Save</legend>


    <div class="submit-area">
        <input value="Save photo" type="submit" class="submitbutton"/>
    </div> 
    </fieldset> 
    <input type="hidden" name="x1" value="0" />  
    <input type="hidden" name="y1" value="0" />  
    <input type="hidden" name="x2" value="200" />  
    <input type="hidden" name="y2" value="200" /> 
    <input type="hidden" name="img" value="<cfoutput>#jpgFileName#</cfoutput>" />
    <input type="hidden" name="pik" value="<cfoutput>#url.pik#</cfoutput>" />
</form>

</div>

 </div>
</div>

<!----------------->

<cfelse>
<cfset image_error = 1>
<cflocation url="index.cfm?size">
<cfabort>
</cfif>
</body></html>

什么会导致IE 10不允许裁剪工作，任何想法？

由于

Answer 1

两次调用$('#photo').imgAreaSelect()没有意义，因此将所有选项合并到一个实例中......

$(document).ready(function () {

    $('#photo').imgAreaSelect({
        aspectRatio: '1:1',
        handles: true,
        fadeSpeed: 200,
        minHight: 200,
        minHeight: 200,
        x1: 0,
        y1: 0,
        x2: 200,
        y2: 200,
        onSelectChange: preview,
        onSelectEnd: function (img, selection) {
            $('input[name=x1]').val(selection.x1);
            $('input[name=y1]').val(selection.y1);
            $('input[name=x2]').val(selection.x2);
            $('input[name=y2]').val(selection.y2);
        }
    });

});

Answer 2

<script type="text/javascript">

function preview(img, selection) {
    if (!selection.width || !selection.height)
        return;

    var scaleX = 300 / selection.width;
    var scaleY = 300 / selection.height;

    $('#preview img').css({
        width: Math.round(scaleX * <Cfoutput>#ImageData.width#</cfoutput>) + 'px',
    height: Math.round(scaleY * <Cfoutput>#ImageData.height#</cfoutput> ) + 'px',
    marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
    marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
  });

    $('#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 draw(img, selection) {
            $('input[name=x1]').val(selection.x1);
            $('input[name=y1]').val(selection.y1);
            $('input[name=x2]').val(selection.x2);
            $('input[name=y2]').val(selection.y2);
       }

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

IE 10上的ImgAreaSelect

2 个答案: