Как сделать снимок экрана перетаскиваемых элементов с помощью html2canvas

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.

$(".canvas") не существует. Так как ваш canvas имеет имя класса can, вы должны использовать $("canvas") или $(".can").

перетаскивание только изменяет визуальное поведение элемента, а не его структуру DOM. Если вы хотите сделать это, вы должны определить метод сбрасывания, он срабатывает, когда вы уронили что-то на нем:

$("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 
    } 
}); 

дочерних узлов холста только отображается, когда браузер не поддерживает холст , это для отказа. Поэтому нет смысла добавлять изображение в холст.

Итак, теперь нам должно быть ясно, что вы забыли проверить структуру DOM в devtool, просто сосредоточьтесь на рисовании холста (я использую родной 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);