4

この記事Upload-and-Crop-Images-with-jQuery-JCrop-and-ASP.NETの助けを借りて、画像トリミング ソリューションの実装に成功しました。正常に動作しますが、ページの読み込み時にデフォルトのトリミング領域を表示したい. 下の写真のように。つまり、トリミング用の画像を含むページを開くと、デフォルトの座標が表示されますが、ユーザーはこれらを編集できます。

100x100 の座標を強調表示したい。

これはクローズド ソリューションですhttp://jsfiddle.net/kLbVM/3/この例では、ボタンをクリックすると座標が強調表示されますが、ページが読み込まれるときに同じことが必要です。

私はlinkedin.comのように同じものを探しています

ここに画像の説明を入力

編集：これが私のページのソースです...

<head runat="server">
    <style>
        #imgProfileImage
        {
            width: auto;
            height: auto;
        }
        .jcrop-handle
        {
            background-color: #333;
            border: 1px #eee solid;
            font-size: 1px;
            width: 7px;
            height: 7px;
        }
    </style>

    <link href="css/jquery.Jcrop.min.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.Jcrop.pack.js" type="text/javascript"></script>
    <title></title>
</head>

<body>
<form id="form1" runat="server">
<div>
    <asp:Image ID="imgProfileImage" runat="server" width="400px" height="400px" />
    <asp:HiddenField ID="X" runat="server" />
    <asp:HiddenField ID="Y" runat="server" />
    <asp:HiddenField ID="W" runat="server" />
    <asp:HiddenField ID="H" runat="server" />
    <br />
    <asp:Button ID="btnCrop" runat="server" Text="Crop Picture" CssClass="accentheader"
        OnClick="btnCrop_Click" />
</div>
</form>


<script type="text/javascript">
jQuery(document).ready(function () {
    var jcrop_api;
    jcrop_api = $.Jcrop('#imgProfileImage');
    jcrop_api.setSelect([0, 0, 100, 100]);
    jcrop_api.enable();

    jQuery('#imgProfileImage').Jcrop({
        onSelect: storeCoords
    });
});

function storeCoords(c) {
    jQuery('#X').val(c.x);
    jQuery('#Y').val(c.y);
    jQuery('#W').val(c.w);
    jQuery('#H').val(c.h);
};

今その.... ここに画像の説明を入力

4

3 に答える 3

8

次の手順を試してください。

  1. Jcrop(element)' 'を実行するときは、やその他のタグではなく、にelementする必要があるため、属性を からに移動します。imgdivid="cropbox"divimg

    <div    >
<!--  |________    -->
<!--           |    -->
    <img id="cropbox" src="..." />
</div>

  2. クラスで次のように指定widthします。height.jcrop-handle

    .jcrop-handle{
      background-color:#333;
      border:1px #eee solid;
      font-size:1px; 
      width:7px;    //explicit width
      height:7px;   //explicit height
 }

  3. setSelectイオン後の「インタラクティブ」ハンドラーのサイズ変更を有効にします。

     jcrop_api.setSelect([0,0,100,100]);  //default selection on page load
 jcrop_api.enable();    //enable resize interactivity

ライブデモ

于 2012-07-21T08:33:48.037 に答える
2

http://jsfiddle.net/kLbVM/4/

したがって、ページの読み込み時にデフォルトのサイズを設定する必要があります。

$(function(){
   jcrop_api.setSelect(getDimensions());
});
于 2012-07-21T07:33:29.873 に答える
0

フォームの「Shown」イベントにコードを配置すると、必要な処理が実行されます。.Netフォームを使用してページを表示していると仮定します。ドキュメントの読み込みが完了した後に呼び出されるイベントがあると思います。これは、最初にインターネットからページを読み込む必要がある場合に、コードを挿入するために使用できます。

いずれの場合も、実際のプラットフォームが何であれ、コードはイベント（ボタンクリック）で機能するため、ロードされた後、表示される前に、それぞれのフォーム/ドキュメントイベントで機能します。「ロード」イベントでは機能しません。

于 2012-07-21T10:31:47.757 に答える