Question

我正在创建一个应用程序，其中用户从一个div中拖动图像并将其放入画布中。如何截取画布的截图以及放入画布的那些图像。

<canvas class="can" > </canvas>
<div class="pictures">
   <img src="abc.jpg" />   //before dragging
   <img src="xyz.jpg" style="top: -150px" />   //after dragging and dropping into the canvas
</div>

js

 function call(top,this1){
// alert("hello");

if(top==0){
    var clone= this1.clone();
    clone.css("top","0");
    clone.draggable({addClasses: true ,
        revert: "invalid",
        drag:function(){
            var position = $(this).position();
            var top=position.top;
            call(top,$(this));
        }
    });
    this1.parent().prepend(clone);
    this1.css("position","absolute");

} }

$("img").draggable({
    addClasses: true ,
    revert: "invalid",
    drag: function(){
        var position = $(this).position();
        var top=position.top;
        call(top,$(this));
     }
   }

   );

$(".canvas").droppable({
    out: function(e,ui){
        $(ui.draggable).remove();
    }
});

Answer 1

根据您的代码，我假设您使用的是jQueryUI。

1 $(".canvas")不存在。由于您的canvas的姓名为can，因此您应使用$("canvas")或$(".can")。

2 拖放只会更改元素的可视行为，而不会改变其DOM结构。如果你想这样做，你应该定义一个drop方法，当你放弃它时会触发它：

$("canvas").droppable({
    drop: function(e, ui) {
        // anything here, e.g. manipulate the DOM
        // regarding this answer, you could fire canvas drawImage here
    },
    out: function(e,ui){
        $(ui.draggable).remove();
        // regarding this answer, you may need to clear the canvas and repaint, to "visually" remove the picture
    }
});

3 当浏览器不支持画布时，仅显示画布的子节点，它用于后备。因此，将图像附加到画布上并没有多大意义。

好的，现在我们应该清楚你忘了检查devtool中的DOM结构，只关注绘制画布（我在这里使用原生JS）。

var img = document.querySelector("img"); // the image you are dragging
var cvs = document.querySelector("canvas");
var ctx = cvs.getContext("2d");

// this will draw the image to canvas at its coordination (10, 10)
ctx.drawImage(img, 10, 10);

您在拖动时已经知道了协调信息，因此您可以将其绘制到放在画布上的相同位置。

提示：您甚至可以裁剪部分图片，缩放然后绘制到画布。请参阅此链接以获取其参数的完整列表：https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D.drawImage

此外，如果要将画布内容保存为二进制图像文件，可以使用cvs.toDataURL获取图像的base64字符串。

var url = cvs.toDataURL('image/png');

然后你可以做任何你想做的事情，例如，生成一个按钮，用户可以点击并将图像保存到他的硬盘上。

var save = document.createElement('a');
save.setAttribute('download', 'any_name.png');
save.setAttribute('href', url);
document.appendChild(save);

如何使用html2canvas截取拖放元素的屏幕截图

1 个答案: