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

【问题标题】：How to save/export a DOM element to an image?如何将 DOM 元素保存/导出到图像？
【发布时间】：2010-05-02 16:34:21
【问题描述】：

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

我想做的是：

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

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

可能就够了……

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

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

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

【问题讨论】：

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

标签： javascript html

【解决方案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
    });
}

【讨论】：

这很有帮助。谢谢。

【解决方案2】：

有一个名为 Domvas 的库应该可以满足您的需求。

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

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

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

【讨论】：

dom-to-image 是一个基于废弃 domvas 的活跃项目。

【解决方案3】：

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

【讨论】：