C# 拖放后将div保存到图像

我有一个asp.net/c的网页，我可以用HTML5将图像从一个div拖到另一个div。现在我需要将生成的div保存为图像。它必须在Firefox和Chrome中工作

我已经试过了：

它们捕获页面而不包含拖动的元素

这只是一个黑匣子

---

非常感谢你的帮助

我想，您已经有了这个查询的部分答案，因为您有将画布转换为图像的链接

您可以使用您已经提到的链接。 现在，主要的问题是在画布中设置图像

我认为你应该将图像设置为画布的背景，然后将画布转换为图像

要设置画布的背景图像，请参考下面的URL

---

这将帮助您将生成的画布（diV）保存为图像。

很抱歉打扰了大家，但现在我自己得到了答案！ 问题是图像元素仍然在DOM中的dragzone中，因此它们没有显示在图像中。我就是这样解决的：

<div id="dragzone" ondrop="drop(event)" ondragover="drag_over(event)" style="width:100%; height: 572px;">

    <img id="dragme" src="Images\ballgreen.png" draggable="true" style="position:absolute; left: 36px; top: 210px;" ondragstart="drag_start(event)">
    <img id="img2" src="Images\ballred.png" draggable="true" style="position:absolute; left: 36px; top: 220px;" ondragstart="drag_start(event)" >
</div>

<div id="dropzone" ondrop="drop(event)" ondragover="drag_over(event)" style="width:500px;height:500px;padding:10px;border:1px solid #aaaaaa; background-color: #ccccff;">

<script>
    function drag_start(event) {
        var style = window.getComputedStyle(event.target, null);
        var data = (parseInt(style.getPropertyValue("left"), 10) - event.clientX)
            + ',' + (parseInt(style.getPropertyValue("top"), 10) - event.clientY)
            + ',' + event.target.id;
        event.dataTransfer.setData("text/plain", data);
    }
    function drag_over(event) {
        event.preventDefault();
        return false;
    }
    function drop(event) {
        var offset = event.dataTransfer.getData("text/plain").split(',');
        var id = offset[2];
        var dragzone = document.getElementById('dragzone');
        var dropzone = document.getElementById('dropzone');
        var dm = document.getElementById(id);

        if (dm != null) {
            dragzone.removeChild(dm);
            dropzone.appendChild(dm);
            dm.style.left = (event.clientX + parseInt(offset[0], 10)) + 'px';
            dm.style.top = (event.clientY + parseInt(offset[1], 10)) + 'px';
        }
        event.preventDefault();
        return false;
    }

    function screenshots() {
        var dropzone = document.getElementById('dropzone');
        html2canvas(dropzone, {
            onrendered: function (canvas) {
                Canvas2Image.saveAsPNG(canvas);
                var test = 'test';
            }
        });
    }

函数拖放启动（事件）{
var style=window.getComputedStyle（event.target，null）；
var data=（parseInt（style.getPropertyValue（“左”），10）-event.clientX）
+“，”+（parseInt（style.getPropertyValue（“top”），10）-event.clientY）
+“，”+event.target.id；
event.dataTransfer.setData（“文本/普通”，数据）；
}
函数拖放（事件）{
event.preventDefault（）；
返回false；
}
函数删除（事件）{
var offset=event.dataTransfer.getData（“text/plain”）.split（'，'）；
变量id=偏移量[2]；
var dragzone=document.getElementById（'dragzone'）；
var dropzone=document.getElementById（'dropzone'）；
var dm=document.getElementById（id）；
如果（dm！=null）{
dragzone.removeChild（dm）；
dropzone.appendChild（dm）；
dm.style.left=（event.clientX+parseInt（偏移量[0]，10]）+'px'；
dm.style.top=（event.clientY+parseInt（偏移量[1]，10]）+'px'；
}
event.preventDefault（）；
返回false；
}
函数截图（）{
var dropzone=document.getElementById（'dropzone'）；
html2canvas（dropzone{
onrendered：函数（画布）{
Canvas2Image.saveAsPNG（画布）；
var测试=‘测试’；
}
});
}