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

我有一个网页，其中有一个表单元素（其ID已知）和里面的形式有多个DIVs，并且每个div的位置可能会改变。如何将DOM元素保存/导出到图像？

我想要做的是：

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

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

可能就够了......

B）保存或导出整个将每个DIV 的最新位置形成为图像文件。

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

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

来源

2010-05-02 Don Don

我不明白。你想制作呈现的DIV的屏幕截图并将其保存到图像中吗？ – 2010-05-02 16:47:30

更好的问题...... **为什么你要这样做？你是否试图保存UI的“状态”以便以后重新加载？请注意.innerHTML将在IE中返回一堆无效标签汤，并且在所有浏览器中都不会包含有关外部来源（CSS和JavaScript）样式的任何信息。 – scunliffe 2010-05-02 16:55:56

虽然这是一个老问题，但有很好的理由要做。特别是在混合应用的现代时代。 – Wtower 2017-01-25 11:09:28

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

来源

2010-05-02 16:52:46

我希望我理解你，这听起来像你想要什么<form>值的serialization：

在计算机科学中的数据存储和传输的背景下，序列化的转换数据结构或对象成比特序列，以便它可以被存储在一个文件中，存储缓冲器，或通过网络连接链路上传输的过程中被“复活” 在相同的后Ø r另一台电脑环境。

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

来源

2010-05-02 16:59:06 artlung

有一个库叫Domvas应该做你想做的。

它给你拿任意DOM内容，并将其描绘到您选择的画布的能力。

之后出口从canvas元素的图像应该是很容易：

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

来源

2012-12-03 22:51:36 sym3tri

[dom-to-image]（https://github.com/tsayen/dom-to-image）是一个基于废弃domvas的活跃项目。 – Wtower 2017-01-25 11:04:57

后的研究时间，我终于找到了一个解决方案，采取元素的屏幕截图，即使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 
    }); 
}

来源

2017-01-11 07:40:33 orange01

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

回答

相关问题