1
我有一個應用程序使用ImgAreaSelect（v0.9.10） 問題我知道它可以在FF，Chrome，Mac和PC上正常工作。 IE 10似乎在種植方面存在零星問題。ImgAreaSelect on 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不允許裁剪工作，任何想法？
感謝
我不知道任何人都可以有多少幫助您嗎喜歡這個。我們甚至無法設置一個工作示例，因爲我們無法看到您的HTML標記。創建一個簡潔的工作示例，顯示此問題。 – Sparky
更多信息。它第一次加載圖像進行編輯時，剪裁框將不起作用。如果您離開頁面然後返回到圖像剪裁頁面，剪裁工具就會起作用。 –
這一切都現在，我試圖讓代碼正確顯示 –