如何将图片拖入div并保存含该图片的div内容为PNG？

核心问题说明 #

你遇到的保存后图片缺失拖入内容的问题，本质是Canvas生成时机不对——页面加载时就提前生成了div1的Canvas快照，后续拖拽图片到div1后没有重新生成新的Canvas，导致保存的还是初始空状态的快照。另外拖拽逻辑和保存逻辑也存在小问题，一并修复如下：

修复后完整代码 #

HTML 代码

<!DOCTYPE HTML>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
  <style>
    .div {
      width: 200px;
      height: 400px;
    }
    .div1 {
      width: 200px;
      height: 200px;
      background-color: yellow;
      border-style: solid;
      border-color: black;
    }
    .div2 {
      width: 200px;
      height: 200px;
    }
    .image1 {
      display: block;
      margin-left: auto;
      margin-right: auto;
    }
  </style>
</head>
<body>
  <div class="div">
    <div class="div1" ondrop="dragDrop(event)" ondragover="allowDrop(event)" id="contentImage">
    </div>
    <div class="div2">
      <img id="img2" class="image1" src="/path/to/image" draggable="true" ondragstart="dragStart(event)" width="160" height="160">
    </div>
    <br><br>
    <a id="saveAsPNG" href="#">convert to image</a>
  </div>
</body>
</html>

JavaScript 代码

function allowDrop(ev) {
  ev.preventDefault();
}

function dragStart(ev) {
  // 确保只传递图片的id，移除div2的拖拽事件避免干扰
  ev.dataTransfer.setData("text", ev.target.id);
}

function dragDrop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  // 强制将图片添加到div1容器，避免因ev.target指向子元素导致错误
  document.getElementById("contentImage").appendChild(document.getElementById(data));
}

$(document).ready(function() {
  $("#saveAsPNG").on('click', function() {
    // 点击保存时才生成最新的Canvas快照，确保包含拖入的图片
    html2canvas(document.getElementById("contentImage"), {
      onrendered: function(canvas) {
        var imgageData = canvas.toDataURL("image/png");
        var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
        // 直接复用当前a标签设置下载属性
        $("#saveAsPNG").attr("download", "your_image.png").attr("href", newData);
      }
    });
  });
});

关键修改点 #

1. 调整Canvas生成时机：移除页面初始化时的html2canvas调用，改为点击保存按钮时才生成div1的最新快照，确保包含已拖入的图片。
2. 修正拖拽逻辑：
   • 移除div2的拖拽绑定，避免拖拽时误获取容器id；
   • 强制指定图片添加到#contentImage，防止因拖拽目标为div1内元素导致的层级错误。
3. 修复保存链接问题：替换原代码中不存在的#convertToPNG元素，直接使用点击的#saveAsPNG标签实现下载。

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