HTML5 dataTransfer.setDragImage与Blob：能否用Blob URL作图片src？

我之前刚好碰到过一模一样的问题，来分享下我的解决办法和对这个问题的理解：

首先明确说：Blob URL是可以用来设置dataTransfer.setDragImage的，你遇到的灰色默认图标问题，本质是Chrome中Blob URL的图片加载是异步的，而你可能在图片还没加载完成时就调用了setDragImage，导致浏览器无法读取到有效图像资源， fallback到默认图标。

对比你提到的data URL：data URL是内嵌的Base64数据，图片会同步加载完成，所以只要把图片添加到document.body（Chrome这个老bug确实烦人），就能直接用。但Blob URL不同，它指向的是浏览器内存中的二进制资源，需要等待load事件触发后，图片才真正可用。

正确的实现步骤（附代码示例） #

// 假设你已经有了生成好的Blob对象
const imageBlob = new Blob([yourImageBinaryData], { type: 'image/png' });
const blobUrl = URL.createObjectURL(imageBlob);
const dragImageEl = new Image();

// 关键：等待图片加载完成后再处理拖拽图像
dragImageEl.onload = function() {
  // 必须先把图片添加到body（Chrome的强制要求）
  document.body.appendChild(dragImageEl);
  // 在dragstart事件中设置拖拽图像
  event.dataTransfer.setDragImage(dragImageEl, 0, 0);
  
  // 拖拽结束后清理资源，避免DOM冗余和内存泄漏
  event.target.addEventListener('dragend', () => {
    document.body.removeChild(dragImageEl);
    URL.revokeObjectURL(blobUrl); // 释放Blob URL占用的内存
  }, { once: true });
};

// 最后设置图片src触发加载
dragImageEl.src = blobUrl;

几个需要注意的点 #

• 一定要等待onload事件触发后再调用setDragImage，这是解决Blob URL不显示的核心
• 和data URL一样，Chrome要求用于拖拽的图像必须是DOM树的一部分（即添加到body），否则会失效
• 拖拽结束后记得移除临时添加的图片，并调用URL.revokeObjectURL释放Blob URL资源，避免内存泄漏

我在Chrome 66及更高版本测试过这个方案，完全可以正常显示Blob URL对应的拖拽图像，不会再出现灰色默认图标。

内容的提问来源于stack exchange，提问作者Guy Park