javascript - Uploadcare - 如何设置图像 URL 的值？

Question

我在用户的网页上显示了一些图片，我想让用户能够选择和裁剪任何图片。我正在使用 uploadcare 小部件来允许用户执行该操作。简而言之，我想要实现的是，用户选择一个图像，该图像的 URL 更新为输入的值，因此小部件打开并允许用户裁剪图像并上传。然后，我将使用已编辑图像的 UUID 并将图像替换为旧图像。

我以此为指导:Image Cropping for Web Apps with Uploadcare .

我在主 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 设置为该值，以便用户可以编辑该特定图像。实际行为是该值保持设置且无法修改。任何帮助将不胜感激。

Answer 1

如果您想要 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');

然后，裁剪/编辑后，你可以通过这种方式得到修改后的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);
  });
});