画像のプレビュー トリミングに jquery プラグインを使用しています。問題は、画像をアップロードすると、全長が 1280* 1024 の画像が表示されることです。
サイズを指定しない Aspx コードは正常に動作します。
<img id="Img_UploadLogo" runat="server" src=""/>
そしてjqueryは次のとおりです。
<script type="text/javascript">
function preview(img, selection) {
if (!selection.width || !selection.height)
return;
var scaleX = 175 / (selection.width || 1); // width height of preview image div
var scaleY = 85 / (selection.height || 1);
var Width = $('#<%=Img_UploadLogo.ClientID %>').width(); // width height of preview image div
var Height = $('#<%=Img_UploadLogo.ClientID %>').height();
$('#preview img').css({
width: Math.round(scaleX *Width ) + 'px', // width of orgnal image div
height: Math.round(scaleY *Height ) + 'px',
marginLeft: -Math.round(scaleX * selection.x1),
marginTop: -Math.round(scaleY * selection.y1)
});
$('#<%=x1.ClientID %>').val(selection.x1);
$('#<%=y1.ClientID %>').val(selection.y1);
$('#<%=x2.ClientID %>').val(selection.x2);
$('#<%=y2.ClientID %>').val(selection.y2);
$('#<%=w.ClientID %>').val(selection.width);
$('#<%=h.ClientID %>').val(selection.height);
}
$(function () {
$('#<%=Img_UploadLogo.ClientID %>').imgAreaSelect({aspectRatio: '1:1', x1: 120, y1: 90, x2: 280, y2: 210, show: false, handles: true,
fadeSpeed: 200, onSelectChange: preview,
});
});
</script>
上記のコードは私にとってはうまくいっています。正しいプレビューと正しいトリミングされた画像が表示されます。しかし、以下のように画像に修正サイズを与えると、正しいプレビューが表示されますが、切り抜き画像は正しくありません。
修正サイズを指定すると、画像が正しくトリミングされません:サイズを指定した Aspx コードは、トリミング画像ではうまく機能しません:
<img id="Img_UploadLogo" runat="server" src="" style="width: 300px; height: 300px;"/>
画像を完全にトリミングするための解決策を教えてください。