問題タブ [ng-img-crop]

ng-img-crop は素晴らしいディレクティブですが、シナリオに適応させるのに苦労しています。私の問題は、ユーザーが画像を持っているときに、必要に応じて画像のサイズを変更するオプションを提供したいということです。

だからここに私が使用しようとしているコードがあります:

js:

html:

だから私は2つの問題：

1）ユーザーが実際にトリミングを変更した場合にのみ、新しい画像をアップロードしたい。on-change でフラグを設定しようとしましたが、初期化時にも on-change が実行されるようです。ユーザーが実際にトリミングしたかどうかを知る方法はありますか?

2) 正方形/円の位置を設定する方法はありますか? 私のシナリオでは、既存のユーザー画像がある場合、現在の画像の寸法 (つまり、画像の境界線) に四角形を切り取りたいと思います。

前もって感謝します。

ngImgCropExtended で ng-file-upload を使用しています。

すべてがうまく機能します。私が抱えている唯一の問題は、検証が失敗すると、ユーザーに通知せずにサイレントに失敗することです。

アップロード ボタンに ngf-validate-fn="validate($file)" を追加しました。エラーは表示されますが、エラーにアクセスしたり確認したりできません。

私のHTML：

コントローラ：

ファイルは $error オブジェクトでログに記録されますが、アクセスできないようです。名前など、ファイル オブジェクトの他のプロパティにアクセスできます。

コンストラクター関数をログに記録すると、

File オブジェクトをログに記録すると、(たとえば)

$file.name で name などの通常のプロパティにアクセスできます。$file.$error は undefined を返します。$file.$error() は何も返しません。エラーもログもありません。ドキュメントにあるように $file.validate.$error も試しました

ngf-validate-fn="validate($file)" // カスタム検証関数、ブール値またはエラーを含む文字列を返します。// エラー名の検証: v​​alidateFn

最後に JSON.stringify( $file ) を試しましたが、これは空のオブジェクトを返します {}

私はng-file-upload / ngImgCropとngDialogを使用して、angularjs 1.5 バージョンを使用して動的アプリを作成しています。

別の要素によってトリガーされる入力フィールドがあります。ポップアップを開いて、上記のライブラリを使用して画像をトリミングできるようにしたいと考えています。ポップアップなしで動作していますが、 popup を使用すると画像がプレビューされません。

ポップアップ内に入力フィールドを追加して select を追加すると、機能します。ポップアップを開く前に画像を選択すると失敗するようです。これを解決するにはどうすればよいですか?

画像を UI にアップロードし、トリミングしてからサーバーに送信できるファイル アップローダーを作成したいと考えています。私は ngFileUpload を使用してファイルをアップロードしてきましたが、うまくいきました。指示に従って ngImgCrop をプロジェクトに追加し、 http: //jsfiddle.net/danialfarid/xxo3sk41/590/ から html と css をプロジェクトにインポートして、その使用方法を理解しました。一見すべて問題ないように見えますが、ハード ドライブから画像を選択すると、トリミング領域に表示されません。何かが隠されている可能性がありますか、それとも何か問題がありますか? jsfiddle html と css は次のとおりです。

アップロード専用のコードがあります。画像は期待どおりに表示されます。なぜそれが一方のためであり、他方のためではないのだろうか。このコードは ng-file-upload で機能します:

最後に、2 つの例を示しました。これにより、画像をトリミングできますが、簡単にアップロードできるプレフィックスのない base64 ファイルは生成されません。2番目のものは似ていますが、画像をトリミングできません。

トリミングは可能ですが、受け入れ可能な base64 ファイルは生成されません

これは良いbase64ファイルを提供すると思いますが、それをトリミングして見つけることはできません

私は角度のある素材、ng-file-upload、およびng-imgcrop-extendedを使用して画像のアップロードに取り組んでいます。以前は通常のページでこれらすべてを使用していましたが、すべて正常に機能していましたが、要件が変更されたため、このロジックをモーダルに移動する必要がありました。

それが機能する方法はng-imgcrop、写真をトリミングするために使用してng-file-uploadいて、アップロードを行うことです。そのため、現在、ファイルの選択をリッスンし、トリミングを処理する要素があります。ただし、現在、ファイルの選択をリッスンしていないため、モーダルからのみ推論できます。

これが私のコードです

モーダル レンダー

images_controller

modal.slim

このコードは、通常の html ページで機能します。angular.element(document.querySelector('#imgInput')).on('change')しかし、問題は、の部分を聞くことができないようImagesControllerです。モーダルの使用方法を知っている人はいますか?これらのタイプのイベントを処理できますか? $mdDialog.show().resolve()関数にいくつかのロジックをラップする必要があるかもしれないことを見てきましたが、それが何を期待しているのかわかりません。

どんな助けでも大歓迎です:)

ユーザーが画像ファイルを選択すると、モーダルウィンドウを開いて画像をトリミングしようとしますが、モーダルウィンドウコントローラーに渡すことができず、その逆も同様です。これは私のコードです:

これがデモです。

アプリケーションで画像をトリミングするために ngImgCrop ディレクティブを使用しています。最初のステップとして、ユーザーが選択するとすぐに実際の画像がサーバーにアップロードされます。2番目のステップは、それをトリミングすることです。トリミングされた画像の座標をサーバーに送信して、座標に基づいて画像をトリミングする必要があります。トリミングされた画像の座標を取得することは可能ですか? 私にお知らせください