我有一个asp.net/c#的网页,我可以用HTML5将图像从一个div拖到另一个div。现在我需要将生成的div保存为图像。它必须在Firefox和Chrome中运行。
我已经尝试过了:
http://www.nihilogic.dk/labs/canvas2image/
Convert webpage to image from ASP.NET
那些捕获没有拖动元素的页面。
http://forums.asp.net/t/1443600.aspx
这只是一个黑盒子。
非常感谢你的帮助!
答案 0 :(得分:1)
我认为,您已经对此查询有部分答案,因为您有将Canvas转换为图片的链接。
您可以使用已经提到的链接http://www.nihilogic.dk/labs/canvas2image/。 现在,主要问题是在Canvas中设置图像。
我认为您应该将图像设置为Canvas的背景,然后将Canvas转换为图像。
要设置Canvas的背景图像,请参阅以下URL Set Background to canvas
这将帮助您将生成的画布(diV)保存为图像..
答案 1 :(得分:0)
很抱歉打扰了你们所有人,但现在我自己得到了答案! 问题是图像元素仍然存在于DOM中的dragzone中,因此它们没有出现在图像中。这就是我解决它的方法:
<div id="dragzone" ondrop="drop(event)" ondragover="drag_over(event)" style="width:100%; height: 572px;">
<img id="dragme" src="Images\ballgreen.png" draggable="true" style="position:absolute; left: 36px; top: 210px;" ondragstart="drag_start(event)">
<img id="img2" src="Images\ballred.png" draggable="true" style="position:absolute; left: 36px; top: 220px;" ondragstart="drag_start(event)" >
</div>
<div id="dropzone" ondrop="drop(event)" ondragover="drag_over(event)" style="width:500px;height:500px;padding:10px;border:1px solid #aaaaaa; background-color: #ccccff;">
<script>
function drag_start(event) {
var style = window.getComputedStyle(event.target, null);
var data = (parseInt(style.getPropertyValue("left"), 10) - event.clientX)
+ ',' + (parseInt(style.getPropertyValue("top"), 10) - event.clientY)
+ ',' + event.target.id;
event.dataTransfer.setData("text/plain", data);
}
function drag_over(event) {
event.preventDefault();
return false;
}
function drop(event) {
var offset = event.dataTransfer.getData("text/plain").split(',');
var id = offset[2];
var dragzone = document.getElementById('dragzone');
var dropzone = document.getElementById('dropzone');
var dm = document.getElementById(id);
if (dm != null) {
dragzone.removeChild(dm);
dropzone.appendChild(dm);
dm.style.left = (event.clientX + parseInt(offset[0], 10)) + 'px';
dm.style.top = (event.clientY + parseInt(offset[1], 10)) + 'px';
}
event.preventDefault();
return false;
}
function screenshots() {
var dropzone = document.getElementById('dropzone');
html2canvas(dropzone, {
onrendered: function (canvas) {
Canvas2Image.saveAsPNG(canvas);
var test = 'test';
}
});
}