JavaScript 图片拖拽操作：base64 编码不一致问题解决

您遇到的问题可能是因为在执行代码前，imgThumbnail 的 src 属性已经被修改过了，或者获取到的 imgThumbnail 和 input0 上的图片不是同一张图片。

您可以尝试以下方法解决问题：

调试代码： 在代码执行前，打印一下 imgThumbnail 和 input0 上的图片的 src 属性，以确认它们是否一致。
直接赋值： 修改代码，直接将 input0 上的图片的 base64 编码赋值给 base64 变量，而不是从 imgThumbnail 的 src 属性中获取。

以下是示例代码：

// 获取 <img> 元素和 input 元素
var imgThumbnail = document.querySelector('#thumbnail-container > img');
var input0 = document.querySelectorAll('#controlnet [id*="txt2img_controlnet_" ] div.image-container > div > input[type="file"]')[0].parentNode;

// 获取 input0 上的图片的 src 属性
var inputSrc = input0.querySelector('img').getAttribute('src');

// 获取图片的 base64 编码
var base64 = inputSrc.split(',')[1];

// 创建一个新的 blob 对象
var blob = new Blob([atob(base64)], {type: 'image/jpeg'});

// 创建一个新的拖拽事件
var dragEvent = new DragEvent('drop', {
  bubbles: true,
  cancelable: true,
  dataTransfer: new DataTransfer(),
});

// 将 blob 对象添加到 dataTransfer 对象中
 dragEvent.dataTransfer.items.add(new File([blob], 'image.jpeg', {type: 'image/jpeg'}));

// 触发拖拽事件
input0.dispatchEvent(dragEvent);

通过调试和修改代码，您就能解决图片 base64 编码不一致的问题，并顺利完成图片拖拽操作。