Uploadcare - Как установить значение URL изображения? - PullRequest
Новая
       43

Uploadcare - Как установить значение URL изображения?

0 голосов
/ 18 июня 2019

У меня есть несколько изображений, отображаемых на веб-странице пользователя, и я хочу дать пользователю возможность выбирать и обрезать любые изображения.Я использую виджет uploadcare, чтобы позволить пользователю выполнить это.Проще говоря, все, чего я хочу добиться, - это чтобы пользователь выбирал изображение, а URL этого изображения обновлялся до значения ввода, и поэтому виджет открывается и позволяет пользователю обрезать изображение и загружать его.Затем я буду использовать UUID отредактированного изображения и заменю изображение более старым изображением.

Я использую это как руководство https://www.gun.io/blog/image-cropping-for-your-web-app-in-20-minutes

У меня есть код виджета на главной 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-адрес устанавливается в значение, чтобы пользователь мог редактировать это конкретное изображение.Фактическое поведение заключается в том, что значение остается установленным и не может быть изменено.Любая помощь будет оценена.Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 18 июня 2019

Только URL-адреса Uploadcare CDN могут быть установлены в качестве значения поля ввода виджета, если вы хотите предварительно загрузить файл . Если изображения на вашей странице не размещены в 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);
  });
});
0 голосов
/ 18 июня 2019

Не используйте свойство elements.Результат выглядит следующим образом: 

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