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 でトリミングが機能しない原因は何ですか?何かアイデアはありますか?
ありがとう