拖放后将div保存到图像答案

【问题标题】：Save div to image after drag and drop拖放后将div保存到图像
【发布时间】：2014-09-23 01:17:19
【问题描述】：

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

我已经试过了：

http://www.nihilogic.dk/labs/canvas2image/

Convert webpage to image from ASP.NET

那些捕获没有拖动元素的页面。

http://forums.asp.net/t/1443600.aspx

这只是显示一个黑框。

非常感谢您的帮助！

【问题讨论】：

标签： c# javascript asp.net

【解决方案1】：

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

<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';
            }
        });
    }

【讨论】：

【解决方案2】：

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

您可以使用您已经提到的链接http://www.nihilogic.dk/labs/canvas2image/。现在，主要问题是在 Canvas 中设置图像。

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

要设置 Canvas 的背景图片，请参考以下 URL Set Background to canvas

这将帮助您将生成的 Canvas(diV) 保存为图像..

【讨论】：