Jcrop は、fancybox がなくても問題なく動作しています。しかし、Fancybox 内に Jcrop をロードすると、画像をトリミングできません。

画像はブラウザで 2 回表示されます。cssの問題か何かだと思います。

解決策はありますか？

Jqueryフォームプラグインを使用しています。

画像アップロードフォームでポップアップが表示されます。画像が正常にアップロードされました。画像のアップロードに成功したら、ポップアップを閉じたいです。以下のJavaScriptはポップアップコンテンツで書かれています。

しかし、それは機能していません。Jqueryライブラリ、ポップアップコンテンツと親ページに含まれるfancyboxライブラリ。

さらに、「dd（ajax return value）」コンテンツがロードされた状態で、ファンシーボックスを再度リロードしたいと思います。Jcrop機能があります。

現在、ajaxSubmitが画像のアップロードに使用されると、Jcropは機能しなくなります。それ以外の場合は機能しています

編集index.htmlをよりよく理解するために、page1、page2、page3の名前を変更しました

upload.php

test.phpに含まれています（静止画像でテストします。ここにアップロードスクリプトを記述しませんでした。）

Jcropはこのメソッドでは機能しません。upload.phpの手順をスキップすると、jcropはfancyboxで正常に機能しています。だから私はアップロード後に新しいファンシーボックスを削除して作成する必要があります！

編集終了

HTMLソースコード：

それは奇妙なリレーです。画像がロードされたときにjCrop関数を呼び出します.jCropは画像の実際の幅と高さを取得できると確信していますが、結果は画像が歪んでいます.

このエラーに遭遇した人はいますか?

jcrop プレビューについて助けが必要です。Railscasts #182 のこのチュートリアルに従っていますが、何かが間違っていて、それを理解できるようです。説明するのは少し難しいですが、切り抜きのプレビューが機能せず、切り抜きのサイズ変更ハンドル内に 2 番目の画像が表示されます。この余分な画像は、切り抜きのサイズ変更に伴って伸びたり歪んだりします。これは少し紛らわしく、私のアプリはまだローカル マシン上にあるため、現在の機能のビデオ デモと、 以下のすべての関連コードと思われるものを含めました。

また、jcrop にメールを送信したところ、プレビュー エリアのエラーが原因である可能性があるとのことでした。Ryan Bates の railscasts tut が提供するものを現在使用しているので、これは正しいと思います。問題と思われる他の唯一のものは、「attr_accessible」と「attr_accessor」です。私はルビーとレールに慣れていないので、エラーを理解するのに少し苦労しています。さらに詳しい情報を提供できる場合はお知らせください。

最初に私の avatar_uploader.rb を示します

user.rb

crop.html.erb

users.js.コーヒー

JCropのaspectRatioをその場で変更するにはどうすればよいですか？

簡単な質問で申し訳ありませんが、すべてのマニュアル、ドキュメント、およびディスカッションは、昨日から廃止されたhttp://deepliquid.comにあり、私は本当に今晩何かを終える必要があります。

万が一、JCropのマニュアルを保存しておいた場合は、アップロードしていただけますか？

自分のコードに問題があるのか​​、それとも現在の HTML5 ファイル API の実装に問題があるのか​​を調べようとしています。

以下のコードは動作します。このバグは、画像を一度ロードした後にプロセスを繰り返すと発生します。

2 回目にファイルを選択すると、画像ブロブが読み込まれ、ちらつきが発生して画像が消えます。その後の選択は、通常は正常に機能します (ファイルが大きい場合、動作が不安定になることがあります)。同じファイル選択に対してプロセスを繰り返すと、通常は機能します (修正として)。

どんな助けでも大歓迎です。

使用する JavaScript ライブラリ

• JQuery 1.7.1

• JQuery ツール 1.2.6

• JCrop 0.9.9

手順 - まとめ

1. ユーザーは、従来の<input type="file" /> ダイアログを介してファイルを選択します。

2. 入力に対して onchange ハンドラーが実行され、ファイルが選択されているかどうかがチェックされます。選択されている場合は、MIME タイプが image/jpeg または image/png であり、選択されたファイルのサイズが 250KB 未満であることを確認します。この検証が失敗すると、選択がリセットされます。

3. この時点で、アップロードするファイル (画像) は有効です。次に、ブラウザーが File API CreateObjectURL をサポートしているかどうかを確認しますif (typeof window.URL == 'undefined') return;(サポートしていない場合は、次の手順をスキップします)。

4. 画像ブロブを現在の画像プレビュー (現在の画像を表示するために使用されるもの) と、jcrop トリミング機能を備えた jquery ツールのオーバーレイに追加される動的に生成された画像要素に読み込みます。

5. 次に、ユーザーは jcrop を介して画像をトリミングし、オーバーレイを閉じて、アップロードする画像のトリミングされたプレビューを確認します (ブラウザーが CreateObjectURL をサポートし、ユーザーが画像をトリミングした場合のみ)。

コード

HTML

JavaScript window.URL = window.URL || window.webkitURL;

コードを自由に使用してください (ここで受け取ったヘルプに対する私の貢献)。

アップデート

JCrop の使用に関する同様の問題 (画像の読み込み後に消える) に関して、stackoverflow に関する別の質問に遭遇しました。私は現在、JCrop が犯人であることに賭けています。

また、 img.onload が実行されたときに画像が常に「準備完了」であるとは限らないことも読みました。そのため、奇妙な動作と setTimeout を使用した .actualWidth/.actualHeight への追加チェックにより、問題が解決する可能性があります。私はそれを調査します。

アップデート

私は、CreateObjectURL を使用する代わりに FileReader と readAsDataUrl を使用し、マージンベースのoverflow:hidden ソリューションの代わりに CANVAS を使用してプレビューを描画する概念実証を行っています。改良が必要なので、ここにコードを投稿します。

誰かが「CSS画像サイズ（つまり幅と高さ）で動的に変更された」で正しく機能する画像クロップを知っていますか？

元の画像サイズ（たとえば、サイズ：400px x 400px）と幅：100％がある場合、すべての画像の切り抜きは正常に機能します。

しかし、サイズが1500px x 1500pxのユーザーの画像に表示し、cssを使用して100px x 100pxに小さくすると（1500px-通常は画面が大きくなり、見栄えが悪くなるため）-この場合、画像はエラーを発行する前に見たものを切り抜きますまたは、初期値（左上隅）でサムネイルを作成します。Facebookのアルバムから写真を引き出す必要がありますが、通常は大きすぎます。

トリミングする前に画像を縮小することは可能ですが、品質が低下することは知っています。

ちなみに、これを作成する方法があるように見えます。これは、jCropプレビューでは、cssで画像のサイズを「動的に」変更してもサムネイルが正常に表示されるためです。プレビューするだけです！画像の左上隅があると言ったので、完成したトリミングされた画像は正しくありません。

これは質問ではなく、自分でこれを機能させようとした後の単なるヒントです。人々はすでにそれについて知っているかもしれませんが、私はそれに関するドキュメントを見つけませんでした (Jcrop サイトまたは他の場所で)。

これは実際には文書化されていない機能であり、Jcrop のソース コードを見ると、Jcrop の読み込みが完了した後に呼び出される設定の後の 2 番目の引数として関数を受け入れていることに気付きました。そこに関数を入力するだけです。

注: この場合、設定オブジェクトはオプションではありません。コールバックは 2 番目の引数としてのみ機能します。空の設定オブジェクト { } を送信すると問題なく動作しますが、なぜこのような単純な Jcrop 関数にコールバックが必要なのかはわかりません...

ハッピーコーディング！

CKFinder 2 ダイアログ内で jQuery および jQuery プラグインを使用する方法はありますか? Jcrop を使用して、プラグインで画像をトリミングしたいだけです。たとえば、以下のコードは機能しません。jQuery(document).ready(...)イベントはうまく発生しますが、その中でダイアログの要素を選択できません。それで、それはまったく可能ですか？

おすすめのアップ アンド クロップ ツールを教えてください。JCrop などのスクリプトをいくつか試しましたが、bmp などの形式で常にスタックします。アップロードできないか、アップロードできてもトリミングできません。さまざまなフォーマットでうまく動作するものを使用している (または知っている) 場合は、その名前を教えてください。