Javascript 如何将DOM元素保存/导出到图像？

我有一个网页，它有一个表单元素（ID已知）和 表单内部有多个div，每个div的位置 可能会改变

我想做的是：

a） 保存此表单的当前状态

// var currentForm=document.forms['myFrm'].innerHTML;

可能就足够了

b） 使用每个DIV的最新位置保存或导出整个表单 到图像文件

//如何将currentForm的javascript变量保存/导出到图像 文件是关键问题

---

任何帮助/指示都将不胜感激。

您想完全用JavaScript完成吗？如果是这样，一个可能的解决方案是将HTML转换为SVG。或者，您可以使用标记并手动绘制它。

有一个名为的库，它可以做您想做的事情

它使您能够获取任意DOM内容并将其绘制到 你选择的画布

之后，从画布元素导出图像应该非常容易：

var canvas = document.getElementById("mycanvas");
var img    = canvas.toDataURL("image/png");
document.write('<img src="'+img+'"/>');

var canvas=document.getElementById（“mycanvas”）；
var img=canvas.toDataURL（“image/png”）；
文件。写（“”）；

经过数小时的研究，我终于找到了一个解决方案，可以截取一个元素的屏幕截图，即使设置了

originclean

标志（以防止XSS），这就是为什么你甚至可以捕获例如谷歌地图（在我的例子中）。我写了一个通用函数来获取屏幕截图。除此之外，您唯一需要的是html2canvas库（）

示例：

getScreenshotOfElement($("div#toBeCaptured").get(0), 0, 0, 100, 100, function(data) {
    // in the data variable there is the base64 image
    // exmaple for displaying the image in an <img>
    $("img#captured").attr("src", "data:image/png;base64,"+data);
}

function getScreenshotOfElement(element, posX, posY, width, height, callback) {
    html2canvas(element, {
        onrendered: function (canvas) {
            var context = canvas.getContext('2d');
            var imageData = context.getImageData(posX, posY, width, height).data;
            var outputCanvas = document.createElement('canvas');
            var outputContext = outputCanvas.getContext('2d');
            outputCanvas.width = width;
            outputCanvas.height = height;

            var idata = outputContext.createImageData(width, height);
            idata.data.set(imageData);
            outputContext.putImageData(idata, 0, 0);
            callback(outputCanvas.toDataURL().replace("data:image/png;base64,", ""));
        },
        width: width,
        height: height,
        useCORS: true,
        taintTest: false,
        allowTaint: false
    });
}

---

我不明白。是否要对渲染的DIV进行屏幕截图并将其保存到图像中？更好的问题。。。你为什么要这样做？您是否正在尝试保存UI的“状态”以便稍后重新加载？请注意，.innerHTML将在IE中返回一堆无效的标记，并且在所有浏览器中都不会包含任何关于外部源（CSS和JavaScript）样式的信息。虽然这是一个老问题，但有很好的理由这样做。尤其是在混合应用程序的现代时代。是一个基于废弃domvas的活动项目。