Question

我正在使用html2canvas，能够生成屏幕截图并在另一个窗口中打开相同的屏幕截图。但是，我的HTML页面的响应是动态创建的，我需要递归地将相同的屏幕截图上传到服务器，Bluemix并使用URI从任何其他应用程序检索相同的屏幕截图。

html2canvas(document.getElementById("mydiv")).then(function(canvas) {
	    // Export the canvas to its data URI representation
	     var base64image = canvas.toDataURL("image/png");
	    // Open the image in a new window
	   window.open(base64image , "_blank");
	 });

我尝试使用Blob保存图像，但这不起作用。

html2canvas(document.getElementById("mydiv")).then(function(canvas) {
    // Export canvas as a blob 
    canvas.toBlob(function(blob) {
        // Generate file download
        window.saveAs(blob, "yourwebsite_screenshot.png");
    });
});

Answer 1

您目前无法获得真正的HTML渲染，因为画布上下文没有渲染HTML元素的功能。

有一些模拟：

html2canvas项目http://html2canvas.hertzen.com/index.html（基本上是在Javascript + canvas上构建的HTML渲染器尝试）

根据您的使用情况，可能会将HTML转换为SVG：

https://github.com/miohtama/Krusovice/blob/master/src/tools/html2svg2canvas.js

此外，如果您使用的是Firefox，您可以破解一些扩展权限，然后将DOM窗口渲染到

https://developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_Graphics_with_Canvas?redirectlocale=en-US&redirectslug=Drawing_Graphics_with_Canvas#Rendering_Web_Content_Into_A_Canvas

我想将我的HTML页面转换为图像，并使用JavaScript在服务器上上传

1 个答案: