Uploadcare

Question

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

我以此为指导：Image Cropping for Web Apps with Uploadcare。

我在主 HTML 页面中有小部件的代码，其中的值设置为空字符串，但是当用户 select 有图像时我无法更新该值。我也尝试过使用 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);

我的预期行为是用户 select 一张图片并且 URL 设置为该值，以便用户可以编辑该特定图片。实际行为是该值保持设置且无法修改。任何帮助将不胜感激。

Answer 1

不要使用 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);

Answer 2

如果您希望 preload a file. If the images on your page are not hosted at Uploadcare, you need to upload them to Uploadcare first to be able to edit them in the widget. You can do this programmatically with the uploadcare.fileFrom method. Before this, you need to get a widget instance 能够使用从创建的文件实例更新小部件的值，则只允许将 Uploadcare CDN URL 设置为小部件输入字段的值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');

那么在cropping/editing之后，就可以这样得到修改后的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);
  });
});

Uploadcare - 如何设置图片的值URL？

Uploadcare - How to set the value of the Image URL?

javascript