logo标签列表

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

javascriptjqueryhtmlhtml2canvas
4
我想要截取拖放结果的屏幕截图，但我不知道该怎么做。
实际上，我发现了两个使用HTML5的JavaScript库，分别是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>
嗨，我把这两个 JavaScript 合并在一起，但似乎合并时出现了一些问题。 - Jimmy Lin
可能是使用JavaScript对网页进行截图的重复问题？ - JAAulde
看起来一样，但我能用JavaScript实现吗？ - Jimmy Lin
1个回答
3

一个没有使用库的工作示例：

<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/

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接