如何在 Javascript 中从屏幕的某个区域创建图像？

Question

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

谢谢你！

Answer 1

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

Answer 2

直接的 JavaScript，不太可能......但你没有提到你的整体“设置”，所以很难确定。执行您所描述内容的各个方面的工具。

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

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

webkit2png - 是一个命令行工具，用于创建网页的 png 屏幕截图。

Answer 3

我设法通过使用 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
     * ...
     * ...
     */
});

Answer 4

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