1

我在用户的网页上显示了许多图片，我想让用户能够选择和裁剪任何图像。我正在使用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 回答
0

不要使用该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);
于 2019-06-18T11:57:28.427 回答