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

Question

我有一个网页，它有一个表单元素(其 ID 已知)和窗体里面有多个DIV，每个div的位置可能会改变。

我想做的是:

a) 保存这个表单的当前状态

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

可能就足够了......

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

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

如有任何帮助/指点，我们将不胜感激。

Answer 1

经过几个小时的研究，我终于找到了一个元素截图的解决方案，即使设置了 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
    });
}