我在用户的网页上显示了许多图片，我想让用户能够选择和裁剪任何图像。我正在使用uploadcare小部件来允许用户执行此操作。简而言之，我想要实现的只是，用户选择一个图像，该图像的URL更新为输入的值，因此小部件打开并允许用户裁剪图像并上传它。然后，我将使用编辑后的图像的 UUID 并将图像替换为旧图像。
我将其用作指导：使用上传护理的 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 设置为该值，以便用户可以编辑该特定图像。实际行为是该值保持设置状态，无法修改。任何帮助将不胜感激。
如果要预加载文件，则仅允许将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);
});
});
不要使用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);