1
私は、ユーザーが写真をアップロードし、ボタンで変更可能なボックス（フレーム）で表示されるオンラインイメージクロッパーを作成しようとしています。写真を切り取ってユーザーに返します。ロード後にdivの幅と高さが変化しないのはなぜですか？
私はphp（作業中）のフォームアップローダの基本テンプレートを持っています。 divに画像を表示し、その上に別の透明なdivを表示し、切り抜き領域を示す境界線を表示します。
divsの初期値は、ページがユーザーに送信されるときに、php経由でCSSセクションに設定されます。私はフレームのサイズを調整しようとしていますdiv、与えられた幅はフレームの画像幅+2 px（高さと同じです）で、画像の幅（-2 px）にする必要があります。
このコードは機能するはずですが、アラートがポップアップすると、フレームの幅/高さが元の値に変更されていないことが示され、フレームは変更されないように見えます。
<!DOCTYPE html>
<head>
<style type="text/css">
html, body {
width: 500px;
height: 334px;
background-color: black;
}
.top {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
width: 500px;
height: 334px;
position: absolute;
background-color: transparent;
border-width: 1px;
border-style: solid;
border-color: white;
z-index: 999;
}
.bottom {
top: 0px;
left: 0px;
position absolute;
width: 500px;
height: 334px;
background-color: green;
// background-image: url(uploads/1505002267.jpg);
z-index: 998;
}
</style>
<script type="text/javascript">
function myOnLoad() {
var w = 500;
var h = 334;
var frame = document.getElementsByClassName('top')[0];
w = w - 2;
h = h - 2;
//frame.setAttribute("style", "width: " + w + "px;");
//frame.setAttribute("style", "height: " + h + "px;");
frame.style.width = w + "px;";
frame.style.height = h + "px;";
alert(frame.offsetWidth);
alert(frame.offsetHeight);
}
</script>
<title>Test Website</title>
</head>
<body onload="myOnLoad()">
<div class="wrapper">
<div class="bottom" id="image">
<div class="top" id="frame">
</div>
</div>
</div>
</body>
</html>
私は価値のPHPを変更できることを認識していますが、CSSのセクションに与えるが、私はとにかく、次のステップで作物の比率を変更する必要がありますするつもりですので、私は仕事には、この方法が必要です。助けてください、私はこのコードをあまりにも長く見てきました。
ありがとうございました。私の妻もあなたに感謝しています。 – Deanie