0

I have a webpage with asp.net/c# where I can drag images from one div to another with HTML5. Now I need to save the resulting div as an image. It has to work in Firefox and Chrome.

I already tried this:

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

Convert webpage to image from ASP.NET

Those capture the page without the dragged elements.

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

This just shows a black box.

Thank you very much for your help!

Community
  • 1
  • 1
Alfina
  • 1
  • 1

2 Answers2

1

I think , you already have partial answer to this query as you have link for converting Canvas into an image.

You can use the link http://www.nihilogic.dk/labs/canvas2image/ as you have already mentioned. Now, the main problem is to set the image in Canvas.

I think you should set the image as a background of Canvas and then convert the Canvas into image.

To set the background image of Canvas refer the below URL Set Background to canvas

This will help you to save the resulting Canvas(diV) as an image..

Community
  • 1
  • 1
0

Sorry to have bothered you all, but now I got the answer by myself! The problem was that the image-elements where still in the dragzone in the DOM, so they didn't show up in the image. This is how I solved it:

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

Alfina
  • 1
  • 1