1

ユーザーの Web ページに多数の画像が表示されており、ユーザーが任意の画像を選択してトリミングできるようにしたいと考えています。私はuploadcareウィジェットを使用して、ユーザーがそれを実行できるようにしています。簡単に言えば、私が達成したいのは、ユーザーが画像を選択し、その画像の URL が入力の値に更新され、ウィジェットが開き、ユーザーが画像をトリミングしてアップロードできるようにすることだけです。次に、編集した画像の UUID を使用して、画像を古い画像に置き換えます。

これをガイダンスとして使用しています：Uploadcareを使用したWebアプリの画像トリミング。

値が空の文字列に設定されたメイン HTML ページにウィジェットのコードがありますが、ユーザーが画像を選択したときに値を更新できません。また、JavaScript コードを使用してフォームを動的に作成しようとしましたが、それも機能しません。

これは、ウィジェットのコードを含むフォームの場合

<form id="form_crop_image_id" action="" >
<input
      id="crop_image"
      name="crop_edit_image"
      value=""
      type="hidden"
      role="uploadcare-uploader"
      data-images-only
      data-crop
/>
<button class="btn" id ="edit_picture_btn" type="button" </button>
</form>

これは、フォーム内の要素の値を更新しようとしている方法です

form_object_id = document.forms['form_crop_image_id'];
form_object_id.elements['crop_edit_image'].value = image_url;//var holds the selected image url
console.log(form_object_id.elements['crop_edit_image'].value);

私の予想される動作は、ユーザーが画像を選択し、ユーザーがその特定の画像を編集できるように URL が値に設定されることです。実際の動作では、値が設定されたままになり、変更できません。どんな助けでも大歓迎です。

4

2 に答える 2

3

ファイルをプリロードする場合、ウィジェットの入力フィールドの値として設定できるのは Uploadcare CDN URL のみです。ページ上の画像が Uploadcare でホストされていない場合は、まず Uploadcare にアップロードして、ウィジェットで編集できるようにする必要があります。uploadcare.fileFrom メソッドを使用してプログラムでこれを行うことができます。この前に、URL から作成されたファイル インスタンスでウィジェットの値を更新できるように、ウィジェット インスタンスを取得する必要があります。

// get an instance of the widget
var widget = uploadcare.Widget('[role=uploadcare-uploader]');
// create a file instance from the URL of the image selected
var file = uploadcare.fileFrom('url', image_url);
// preload the file to the widget
widget.value(file);
// open widget's dialog
widget.openDialog('preview');

次に、トリミング/編集後、この方法で変更された URL を取得できます

widget.onChange(function (file) {
  file.done(function (fileInfo) {
    // log the updated URL to console or do anything you need with it
    console.log(fileInfo.cdnUrl);
  });
});
于 2019-06-18T15:38:09.887 に答える