Question

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

我已经尝试过了：

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

Convert webpage to image from ASP.NET

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

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

这只是一个黑盒子。

非常感谢你的帮助！

Answer 1

我认为，您已经对此查询有部分答案，因为您有将Canvas转换为图片的链接。

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

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

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

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

Answer 2

很抱歉打扰了你们所有人，但现在我自己得到了答案！问题是图像元素仍然存在于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';
            }
        });
    }

拖放后将div保存到图像

2 个答案: