如何从 Javascript 中的屏幕区域创建图像？答案

【问题标题】：How can I create an image from a region of a screen in Javascript?如何从 Javascript 中的屏幕区域创建图像？
【发布时间】：2011-10-18 11:05:06
【问题描述】：

我有一个网络应用程序，用户可以在其中从一组用户界面组件中组装一个用户界面（例如另一个网页），我想提供一个选项来创建用户创建的图像快照。通过这种方式，我希望能够使用 JS（例如，使用 jQuery）以编程方式选择浏览器可显示区域的一个区域，并从该区域创建一个位图。

谢谢！

【问题讨论】：

另一个answer I posted 可能会有所帮助。（由于您处于客户端/服务器端边界之间，您将需要存储客户端位置并可能将它们发送到服务器进行处理。JS 将无法从客户端捕获任何内容 [出于安全目的] )。
不要以为直接 JS 就可以了，之前也提过一个非常相似的问题：stackoverflow.com/questions/60455/…

标签： javascript jquery image screenshot webpage

【解决方案1】：

我设法通过使用HTML2Canvas 拍摄整个页面的快照并将画布裁剪为合适的大小来实现这一点。

const x = 100;
const y = 200;
const width = 200;
const height = 200;

// get the whole HTML into a canvas
html2canvas(document.querySelector('html')).then(canvas => {
    const context = canvas.getContext('2d');

    // crop the image
    context.getImageData(x, y, width, height);

    // add the copied 
    const tempCanvas = document.createElement('canvas');
    const tempContext = tempCanvas.getContext('2d');

    tempCanvas.width = width;
    tempCanvas.height = height;

    tempContext.drawImage(canvas, 0, 0);

    // load the new canvas 
    const img = tempCanvas.toDataURL('image/png');

    /*
     * ...
     * you can use the img
     * ...
     * ...
     */
});

【讨论】：

"上下文未定义"

【解决方案2】：

纯 JavaScript，不太可能。但您没有提及您的整体“设置”，因此很难确定。执行您所描述的各个方面的工具..

PhantomJS - 带有 JavaScript API 的无头 WebKit。对 DOM 处理、CSS 选择器、JSON、Canvas 和 SVG 的原生支持。用于测试基于 Web 的应用程序、站点抓取、页面捕获、SVG 渲染器、PDF 转换器等。

Zombie.js - “非常快”，使用 Node.js 进行无头全栈测试。 Zombie.js 是一个轻量级框架，用于在模拟环境中测试客户端 JavaScript 代码。无需浏览器。

webkit2png - 是一个命令行工具，可以创建网页的 png 截图。

【讨论】：

【解决方案3】：

也许这可以帮助你：http://html2canvas.hertzen.com/

【讨论】：

不是一个完美的解决方案，但可以。谢谢

【解决方案4】：

也许wkhtmltopdf 会起作用，他们有一个似乎处于测试阶段的“to image”。然而，这需要的不仅仅是 javascript 来完成，其他方法也是如此。

【讨论】：