UPDATE 2012/07/17: クリアされるのは「current_width」フィールドと「current_height」フィールドだけではなく、フォーム全体です。視覚的には、ブラウザーのフォームにはまだ値が含まれていますが、jQuery は「チョーク」または何かを行い、フォーム内のすべてのフィールドを突然 null として読み取り始めます。
preview() 関数で .children() と .each() を使用して確認したため、.val() だけの問題ではありません。
var debugstring = '';
var debugform = $('#hidden_thumb_fields').children("input").each(function (){
var child = $(this);
debugstring += child.attr('id')+':'+child.val()+',';
});
console.log(debugstring);
前と同じように、選択領域をドラッグしても問題なく動作しますが、その後すぐに null が返され始めます。
これは Chrome でのみ発生することに注意してください。
元の投稿: (編集: mlx ログ出力を削除)
シナリオ：
- アップロードされた画像の幅と高さは、current_width と current_height の 2 つのフォーム フィールドに書き込まれます。
- アップロードされた画像で有効になっている imgAreaSelect
- imgAreaSelect の onInit と onSelectChange 呼び出し関数「プレビュー」
- 「プレビュー」は、.val() を使用して幅と高さのフォーム フィールドの値を読み取ります。
- 選択領域を移動すると、「プレビュー」が繰り返し呼び出されます
- 最終的に、.val() は NULL を返し始めますが、フィールドにはまだ正しい値が含まれており、変更されていません。これは Chrome でのみ発生します。Firefox も Safari も快適に動作します。IE はテストされていません。
- プレーンな Javascript (document.getElementById().value) を使用すれば、何の問題もありません。
よく引用されるように、私は $(document).ready の後に imgAreaSelect を呼び出しています。以前に行った唯一のことは、以下のプレビュー サンプルに含まれている 3 つの変数の設定です。
余談ですが、画像の幅と高さのデータを取得するためのより良い方法またはより受け入れられる方法があれば、私はすべて耳にします。画像アップロード スクリプト (PHP) は、最初にこれらのフィールドを設定するものであり、私の経験では、それを行うためのより良い方法があるかどうかはわかりません。.css の幅と高さではなく、画像の実際の寸法が必要です (私のシナリオでは通常異なる場合があります)。
問題が発生していると思われる特定のコードは、プレビュー機能の最初の部分にあります。
function preview(img, selection) {
var current_width = $('#thumbnail_form').find('#current_width').val();
var current_height = $('#thumbnail_form').find('#current_height').val();
これがプレビュー（）です。.find() を削除して $('#current_width').val() を直接使用すると、問題は解決しません。
var thumb_width=128;
var thumb_height=128;
var counter=1;
function preview(img, selection) {
var current_width = $('#thumbnail_form').find('#current_width').val();
var current_height = $('#thumbnail_form').find('#current_height').val();
//var current_width = document.getElementById("current_width").value;
//var current_height = document.getElementById("current_height").value;
var scaleX = thumb_width / selection.width;
var scaleY = thumb_height / selection.height;
var img_css_width = Math.round(scaleX * current_width) + 'px';
var img_css_height = Math.round(scaleY * current_height) + 'px';
var img_css_margin_left = '-' + Math.round(scaleX * selection.x1) + 'px';
var img_css_margin_top = '-' + Math.round(scaleY * selection.y1) + 'px';
// mlx and the css fields are just to help diagnose the problem
var mlx = document.getElementById('mlx').value;
if (!current_width) {
current_width = 'NULL';
}
if (!current_height) {
current_height = 'NULL';
}
$('#mlx').val(mlx+counter+")w:"+current_width+",h:"+current_height+"\n");
$('#img_css_width').val(img_css_width);
$('#img_css_height').val(img_css_height);
$('#img_css_margin_left').val(img_css_margin_left);
$('#img_css_margin_top').val(img_css_margin_top);
$('#displayed_icon_container').find('#displayed_icon').css({
//$('#displayed_icon').css({
width: img_css_width,
height: img_css_height,
marginLeft: img_css_margin_left,
marginTop: img_css_margin_top
});
$('#x1').val(selection.x1);
$('#y1').val(selection.y1);
$('#x2').val(selection.x2);
$('#y2').val(selection.y2);
$('#w').val(selection.width);
$('#h').val(selection.height);
// if I re-write these values back to the form, I can circumvent the issue, but why is this necessary?
//$('#current_width').val(current_width);
//$('#current_height').val(current_height);
$('#sx').val(scaleX);
$('#sy').val(scaleY);
counter++;
}
HTML の関連フィールドは次のとおりです。ファイルの残りの部分が関連しているとは思いませんが、リクエストがあれば喜んで投稿します。
<div id='thumbnail_form'>
<form name='form' action='' method='post'>
<div id='hidden_thumb_fields'>
x1: <input type='text' name='x1' value='' id='x1' /><br />
y1: <input type='text' name='y1' value='' id='y1' /><br />
x2: <input type='text' name='x2' value='' id='x2' /><br />
y2: <input type='text' name='y2' value='' id='y2' /><br />
Selection Width (w): <input type='text' name='w' value='' id='w' /><br />
Selection Height (h): <input type='text' name='h' value='' id='h' /><br />
Old Icon Display URL: <input type='text' name='old_icon_display_URL' value='/whatever/thing.png' id='old_icon_display_URL' /><br />
Large File Width (current_width): <input type='text' name='current_width' value='' id='current_width' /><br />
Large File Height (current_height): <input type='text' name='current_height' value='' id='current_height' /><br />
Img Display Width: <input type='text' name='img_width' value='' id='img_width' /><br />
Img Display Height: <input type='text' name='img_height' value='' id='img_height' /><br />
Img CSS Width: <input type='text' name='img_css_width' value='' id='img_css_width' /><br />
Img CSS Height: <input type='text' name='img_css_height' value='' id='img_css_height' /><br />
Img CSS Margin Left: <input type='text' name='img_css_margin_left' value='' id='img_css_margin_left' /><br />
Img CSS Margin Top: <input type='text' name='img_css_margin_top' value='' id='img_css_margin_top' /><br />
scalex: <input type='text' name='sx' value='' id='sx' /><br />
scaley: <input type='text' name='sy' value='' id='sy' /><br />
Math Log X: <textarea name='mlx' value='' id='mlx' cols='40' rows='10'></textarea><br />
Icon Basedir: <input type='text' name='icon_basedir' value='' id='icon_basedir' /><br />
Icon BaseURL: <input type='text' name='icon_baseURL' value='' id='icon_baseURL' /><br />
Icon Relpath: <input type='text' name='icon_relpath' value='' id='icon_relpath' /><br />
Large Filename: <input type='text' name='large_image_filename' value='' id='large_image_filename' /><br />
Thumb Filename: <input type='text' name='thumb_image_filename' value='' id='thumb_image_filename' /><br />
</div>
<input type='button' name='cancel_thumb' value='Cancel' id='cancel_thumb' />
<input type='submit' name='save_thumb' value='Crop Image' id='save_thumb' />
</form>
</div>