Question

我想截取拖放结果的截图，但我不知道该怎么办。

实际上，我发现了2个javascript并使用HTML5，例如 html2canvas 和 canvas2image 。

我现在将它们组合在一起，但它仍然遇到了canvas2image的一些问题。

如果你有相同的经历，请帮我解决这个问题，非常感谢你。

请帮助我，我已经在这里待了几天。

拖放代码。

<script>
$(function() {
    $( "#draggable" ).draggable();
    $( "#draggable2" ).draggable();
    $( "#droppable" ).droppable({
        hoverClass: "ui-state-active",
        drop: function( event, ui ) {
            $( this )
                .addClass( "ui-state-highlight" )
                .find( "p" )
                    .html( "Dropped!" );
        }
    });

});
</script>

图像生成代码

<script>
window.onload = function() {
function convertCanvas(strType) {
    if (strType == "JPEG")
        var oImg = Canvas2Image.saveAsJPEG(oCanvas, true);

    if (!oImg) {
        alert("Sorry, this browser is not capable of saving " + strType + " files!");
        return false;
    }

    oImg.id = "canvasimage";

    oImg.style.border = oCanvas.style.border;
    oCanvas.parentNode.replaceChild(oImg, oCanvas);
}

function convertHtml(strType) {
    $('body').html2canvas();
    var queue = html2canvas.Parse();
    var canvas = html2canvas.Renderer(queue,{elements:{length:1}});
    var img = canvas.toDataURL();
    convertCanvas(strType);
    window.open(img);
    }

document.getElementById("html2canvasbtn").onclick = function() {
    convertHtml("JPEG");
    }
}
</script>

HTML代码

<body>
<h3>Picture:</h3>

<div id="draggable">
<img src='http://1.gravatar.com/avatar/1ea64135b09e00ab80fa7596fafbd340?   s=50&d=identicon&r=R'>
</div>

<div id="draggable2">
<img src='http://0.gravatar.com/avatar/2647a7d4b4a7052d66d524701432273b?s=50&d=identicon&r=G'>
</div>

<div id="dCanvas">
<canvas id="droppable" width="500" height="500" style="border: 2px solid gray"   class="ui-widget-header" />
</div>
<input type="button" id="bGenImage" value="Generate Image" />
<div id="dOutput"></div>

</body>

Answer 1

一个工作示例，没有库：

<html>
<head>
    <script>

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

        function drag(e)
        {
            //store the position of the mouse relativly to the image position
            e.dataTransfer.setData("mouse_position_x",e.clientX - e.target.offsetLeft );
            e.dataTransfer.setData("mouse_position_y",e.clientY - e.target.offsetTop  );

            e.dataTransfer.setData("image_id",e.target.id);
        }

        function drop(e)
        {
            e.preventDefault();
            var image = document.getElementById( e.dataTransfer.getData("image_id") );

            var mouse_position_x = e.dataTransfer.getData("mouse_position_x");
            var mouse_position_y = e.dataTransfer.getData("mouse_position_y");

            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');

            // the image is drawn on the canvas at the position of the mouse when we lifted the mouse button
            ctx.drawImage( image , e.clientX - canvas.offsetLeft - mouse_position_x , e.clientY - canvas.offsetTop - mouse_position_y );
        }

        function convertCanvasToImage() {
            var canvas = document.getElementById('canvas');

            var image_src = canvas.toDataURL("image/png");
            window.open(image_src);

        }

    </script>
</head>
<body>
    <div style="float:left" >
        <div>
            <img id="img1" draggable="true" ondragstart="drag(event)" src='img1.png'>
            <img id="img2" draggable="true" ondragstart="drag(event)" src='img2.png'>
            <input type="button" onclick="convertCanvasToImage()" value="Generate Image" style="float:right"/>
        </div>
        <canvas id="canvas"  ondrop="drop(event)" ondragover="allowDrop(event)" width="500" height="500" style="border: 1px solid gray"  />

    </div>

</body>

图像必须具有相同的原点才能使用toDataURL。生成的图像在新窗口中打开，就像在代码中一样，但您也可以将其附加到页面上，保存在磁盘上或上传到服务器上。

http://fiddle.jshell.net/gael/GF96n/4/

如何将拖放结果存储为图像

1 个答案: