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

Question

我有一个网页，其中包含一个表单元素（其ID已知）和 在表单内部有多个DIV，以及每个div的位置 可能会改变。

我想做的是：

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

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

可能就够了......

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

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

任何帮助/指针都会受到赞赏。

Answer 1

有一个名为Domvas的库可以做你想要的。

  

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

之后，从canvas元素导出图像应该非常简单：

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

Answer 2

经过数小时的研究，我终于找到了一个截取元素截图的解决方案，即使设置了origin-clean FLAG（以防止XSS），这就是为什么你甚至可以捕获例如谷歌地图（在我的情况下）。我写了一个通用函数来获取截图。此外，您唯一需要的是html2canvas库（https://html2canvas.hertzen.com/）。

示例：

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);
}

请注意console.log()，alert()如果图片尺寸很大，则不会生成输出。

<强>功能：

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
    });
}

Answer 3

你想在JavaScript中完全做到吗？如果是这样，一种可能的解决方案是将HTML转换为SVG。或者您可以使用<canvas>标记并手动绘制。

Answer 4

我希望我能理解你，听起来你想要的是<form>的价值serialization：

  

在计算机科学中，在语境中   数据存储和传输，   序列化是一个过程   转换数据结构或对象   进入一系列位，以便它可以   存储在文件，内存缓冲区，   或通过网络传输   连接链接“复活”   稍后在同一台或另一台计算机上   环境。

JavaScript Form Serialization Comparison比较了几种使用JavaScript和JavaScript库将表单序列化为可以保存的表单的方法。