16

私は非常に単純な問題を抱えていますが、何が問題を引き起こしているのか見当がつかなくなりました。私のアプリケーションの1つでは、バナーやヘッダーなどに収まるように画像を切り抜くための小さなアドオンとしてjCropを使用しています。次の手順を実行します。

1) Select an image (using CKFinder for this, CKFinder returns the image path to an input field)
2) Click a button to load the image
3) Crop the image
4) Save the image

ケースの約75％ですべてが計画どおりに進みますが、他の25％のケースでは、jCropがトリミング領域の読み込みに失敗し、空白のままになります。これが私が使用しているjQueryコードです：

jQuery('#selectimg').live('click', function(e) { 
  e.preventDefault();
  var newsrc = jQuery('#img2').val();
  jQuery('#cropbox').attr('src', newsrc);
  var jcrop_api = jQuery.Jcrop('#cropbox', {
    boxWidth: 700, 
    boxHeight: 700,
    onSelect: updateCoords,
    onChange: updateCoords
  });
  //Some other JS code come's here for buttons (they work all the time)
});

#cropboxがトリミング可能な領域で変換されている部分を離れると、画像が正常に読み込まれていることに気付きました。そのため、間違いはそのvar = jcrop_api部分にありますが、これに対する解決策はないとゆっくりと考え始めます。 ..

これは私がこれまでに試したことです：

div<div id="cropper-box"></div>を作成して使用jQuery('#cropper-box').append('<img src="" id="cropbox" />');し、後で値を設定します。同じことを試しましたが、画像srcを後でではなく1ステップで設定しました。

ページにプレースホルダーを配置し<img src="placeholder.png" id="cropbox" />、ボタンをクリックしてソースを変更しようとしました。これは機能しますが、cropperareaは画像のサイズ（300x180pxなど）のままであり、本来のように大きくなりません。

// 編集：

もう少し試してみると、画像ソースが適切に置き換えられていることがわかりました（！Firefoxを使用して選択したテキストのソースを表示します）。URLを再確認しましたが、これは正しいURLであり、機能する画像でした。

クロッパーがあるべき場所に、クロッパーアイコン（プラス記号）がポップアップする約10x10ピクセルの白いスポットがあります。しかし、前に述べたように、画像は表示されません。

//編集2：

そのため、同じ画像の1回目と2回目の両方の試行のソースを取得しました。前に述べたように、最初の試行では画像が正しく読み込まれず、2回目の試行では読み込まれます（2回目の試行が同じ画像（!!）の場合のみ）。

選択したページソースには1つの違いがあります。つまり、最初に試してください。

<img style="position: absolute; width: 0px; height: 0px;" src="http://95.142.175.17/uploads/files/Desert.jpg">

2回目の試行：

<img style="position: absolute; width: 700px; height: 525px;" src="http://95.142.175.17/uploads/files/Desert.jpg">

これはjCropに置き換えられる画像だと思いますが、最初に0の高さ/幅を配置し、2回目に適切なサイズを配置するのは完全ななぞなぞです。

4

6 に答える 6

10

さて、他の誰かがこの問題に遭遇した場合に備えて：

画像を読み込んでjCropを適用するアクションのキューが速すぎると、jCropが混乱します。2回目の試行が完全に機能するのはまだ奇妙だと思いますが、それはページのDOMなどによって認識されるキャッシュされた画像のサイズと関係があると思います。

私が思いついた解決策は、＃cropboxをjCrop領域に変換する関数を作成し、2秒間隔を設定して、jCropが画像とそのサイズを認識し、要素を変換する時間を与えることでした。

これは私が（プリローダーで）使用したhtmlの一部です：

<div id="cropper-loading" style="display: none;"><img src="images/analytics/ajax-loader.gif" /></div>
<img id="cropbox" src="images/placeholder.png" style="display: none;" />

ご覧のとおり、cropbox画像とcropper-loading divは、すぐには必要ないため非表示になっています。ただし、必要に応じてプレースホルダーを表示することもできます。次に、次のHTMLフォームを使用します。

<input name="image2" id="img2" type="text" readonly="readonly" onclick="openKCFinder(this)" value="click here to select an image" style="width: 285px;" />  <button class="button button-blue" type="submit" name="load" id="selectimg">Load Image in cropper</button>

私の場合、KCFinderを使用して画像をロードしています（これはCKEditorの一部であり、注目する価値があります）。KCFinderはアップロードや名前の変更などを処理し、選択すると、選択した画像パス（相対/絶対設定可能）をに返します。入力フィールド。

次に、＃selectimgをクリックすると、このコードが呼び出されます。

jQuery('#selectimg').click(function(e) { 
    e.preventDefault();
    jQuery('#cropper-loading').css('display', 'block');

    var newsrc = jQuery('#img2').val();

    jQuery('#cropbox').attr('src', newsrc);
    jQuery('#img').val(newsrc);

    function createJcropArea() {
        jQuery('#cropper-loading').css('display', 'none');                                      
        jQuery('#cropbox').css('display', 'block');
        var jcrop_api = jQuery.Jcrop('#cropbox', {
            boxWidth: 700, 
            boxHeight: 700,
            onSelect: updateCoords,
            onChange: updateCoords
        });
        clearInterval(interval);
    }
    var interval = setInterval(createJcropArea, 2000);
});

最初は、通常どおりにリンクがたどられるのを防ぎ（またはボタンアクション）、その後、読み込み中のdivが表示されます（これがプレースホルダー画像を非表示にする理由です。そうしないと、混乱して見えます）。

次に、画像の場所が入力フィールドから読み込まれ、別の（#img）にコピーされます。このフィールドは、後で画像を処理するために使用されます（PHPは#imgの値を使用してこの画像を読み込みます）。また同時に、＃cropboxsrcが新しいイメージに設定されています。

そして、ここに私の問題を解決した部分があります：

jCropを直接アクティブ化する代わりに、次のような関数を作成しました。

1) hides the loading icon
2) displays the image
3) converts #cropbox into a jCrop area
4) clean the interval (otherwise it would loop un-ending)

そして、この関数の後、保存するために、jCrop領域が変換されるまでに2秒の遅延があったことがわかります。

それが将来誰かに役立つことを願っています！

@vectorと他の人のことを考えてくれてありがとう;-)

于 2011-05-09T14:26:35.813 に答える
4

'Image'オブジェクトの作成と'src'属性の設定は、画像がすでにロードされているかのように扱うことができるということには適用されません。また、一定のタイムアウト間隔を指定しても、イメージがすでにロードされていることを保証するものではありません。

代わりに、画像オブジェクトの「onload」コールバックを設定する必要があります。これにより、Jcropオブジェクトが初期化されます。

var src = 'https://example.com/imgs/someimgtocrop.jpg'; 
var tmpImg = new Image();
tmpImg.onload = function() {
   //This is where you can safely create an image and a Jcrop Object
};
tmpImg.src = src; //Note that the 'src' attribute is only added to the Image Object after the 'onload' listener was defined
于 2013-10-18T21:01:22.103 に答える
3

こちらのリポジトリでエッジライブラリを試してください：https ：//github.com/tapmodo/Jcrop

これで問題が解決するはずです。問題を解決するために変更された行：

// Fix size of crop image.
// Necessary when crop image is within a hidden element when page is loaded.
if ($origimg[0].width != 0 && $origimg[0].height != 0) {
  // Obtain dimensions from contained img element.
  $origimg.width($origimg[0].width);
  $origimg.height($origimg[0].height);
} else {
  // Obtain dimensions from temporary image in case the original is not loaded yet (e.g. IE 7.0).
  var tempImage = new Image();
  tempImage.src = $origimg[0].src;
  $origimg.width(tempImage.width);
  $origimg.height(tempImage.height);
}
于 2011-12-15T16:51:46.833 に答える
1

この関数を呼び出さないでくださいonChange : updateCoords

せずに試してみると、携帯電話でスムーズに動作します。

base64を直接作成して、好きな場所に画像として表示できます。

于 2014-04-12T12:37:17.730 に答える
0

ここに私の奇妙な、しかし素晴らしい解決策があります：

if (obj.tagName == 'IMG') {
  var tempImage = new Image();
    tempImage.src = $origimg[0].src;
    $origimg.width(tempImage.width);
    $origimg.height(tempImage.height);
  if ($origimg[0].width > 1 && $origimg[0].height > 1) {
    $origimg.width($origimg[0].width);
    $origimg.height($origimg[0].height);
  } else {
    var tempImage = new Image();
    tempImage.src = $origimg[0].src;
    $origimg.width(tempImage.width);
    $origimg.height(tempImage.height);
     //console.log('error'+$origimg[0].width + $origimg[0].height);
  }
于 2013-07-30T07:45:19.910 に答える
0

これは古いことは知っていますが、最近私のインストールでランダムに発生していました。jCropが初期化される前に、画像が完全に読み込まれていなかったことが原因であることがわかりました。

それを修正するために必要なのは、jCrop初期化のものを内部にラップすることだけでした

$(window).on("load", function () { //jcrop stuff here });

それ以来、うまく機能しています。

于 2016-04-02T19:12:43.890 に答える