如何将图像拖放到 div 并将该 div 的新内容保存为 png？
[英]How to drag and drop image into a div and save that div's new content as png?
问题描述
我有一个由两个div组成的divs 。 div1有一个黄色背景和一个黑色边框，在它下面是包含图像的div2 。
我想将该图像拖放到div1并将其全部保存为png 。
问题是保存的图像仅包含div1的内容而没有丢弃的图像。 我也想用图像保存div1的内容。
到目前为止，这是我的代码：
function allowDrop(ev) { ev.preventDefault(); } function dragStart(ev) { ev.dataTransfer.setData("text", ev.target.id); } function dragDrop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); var parent = ev.target.parentNode; ev.target.appendChild(document.getElementById(data)); } $(document).ready(function() { var element = $("#contentImage"); // global variable var getCanvas; //global variable html2canvas(element, { onrendered: function(canvas) { getCanvas = canvas; } }); $("#saveAsPNG").on('click', function() { var imgageData = getCanvas.toDataURL("image/png"); var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream"); $("#convertToPNG").attr("download", "your_image.png").attr("href", newData); }); });
.div { width: 200px; height: 400px; }.div1 { width: 200px; height: 200px; background-color: yellow; border-style: solid; border-color: black; }.div2 { width: 200px; height: 200px; }.image1 { display: block; margin-left: auto; margin-right: auto; }
<:DOCTYPE HTML> <html> <head> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min:js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script> </head> <body> <div class="div"> <div class="div1" ondrop="dragDrop(event)" ondragover="allowDrop(event)" id="contentImage"> </div> <div class="div2" draggable="true" ondragstart="dragStart(event)"> <img id="img2" class="image1" src="/path/to/image" draggable="true" ondragstart="dragStart(event)" width="160" height="160"> </div> <br><br> <a id="saveAsPNG" href="#">convert to image</a> </div> </body> </html>
1 个解决方案
解决方案1
0 2022-09-15 13:03:37
您的拖放代码没有任何问题。 问题在于如何实现html2canvas 。 页面准备好后，您正在调用html2canvas ，因此div1中显然没有图像。
有关如何正确使用html2canvas的信息，请参阅此处接受的答案。
我对您的代码进行了一些更改（将源div的背景颜色更改为粉红色，将image的颜色更改为绿色）。 点击“转换为图像”，下方出现黄色image 。 现在将绿色image拖到黄色div ，然后再次单击“转换为图像”。 第二个黄色image出现在第一个图像旁边，其中包含绿色框。
这样，您可以看到已经创建了两个图像。 一个没有绿盒，一个有绿盒。
function allowDrop(ev) { ev.preventDefault(); } function dragStart(ev) { ev.dataTransfer.setData("text", ev.target.id); } function dragDrop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); var parent = ev.target.parentNode; ev.target.appendChild(document.getElementById(data)); } $(document).ready(function() { $("#saveAsPNG").on('click', function() { let element = $("#contentImage"); html2canvas(element, { onrendered: function(canvas) { document.body.appendChild(canvas); } }); }); });
.div { width: 500px; height: 200px; border: solid 2px black; padding: 20px; }.div1 { width: 200px; height: 100px; background-color: yellow; border: solid 2px black; }.div2 { width: 200px; height: 100px; background-color: pink; border: solid 2px black; }.image1 { width: 50px; height: 50px; background-color: green; border: solid 2px black; }
<:DOCTYPE HTML> <html> <head> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min:js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script> </head> <body> <a id="saveAsPNG" href="#">convert to image</a> <div class="div"> <div class="div1" ondrop="dragDrop(event)" ondragover="allowDrop(event)" id="contentImage"> </div> <div class="div2" draggable="true" ondragstart="dragStart(event)"> <img id="img2" class="image1" src="/path/to/image" draggable="true" ondragstart="dragStart(event)" width="160" height="160"> </div> </div> </body> </html>
你如何将html div转换为图像，然后另存为gif或png？
[英]How do you convert an html div to image and then save as gif or png?
使用jQuery在div的拖放上合并2个div内容
[英]Merging 2 div content on drag and drop of div on one another using jquery
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.