javascript - Uploadcare-如何设置图片网址的值？

我在用户的网页上显示了许多图片，并且希望使用户能够选择和裁剪任何图像。我正在使用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设置为该值，以便用户可以编辑该特定图像。实际的行为是该值保持设置状态且无法修改。任何帮助将不胜感激。
提前致谢。

最佳答案

如果要preload a file，则仅允许将Uploadcare CDN URL设置为小部件的输入字段的值。如果页面上的图像未托管在Uploadcare中，则需要先将其上传到Uploadcare，然后才能在小部件中对其进行编辑。您可以使用uploadcare.fileFrom method以编程方式执行此操作。在此之前，您需要获取widget instance以便能够使用从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');

然后，在裁剪/编辑后，您可以通过以下方式获取修改后的网址

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);
  });
});