如何使用Javascript从屏幕区域创建图像？

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

---

谢谢大家!

也许可以，他们有一个“to-image”的测试版。然而，这需要的不仅仅是javascript，其他方法也需要。

也许这可以帮助您：

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

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

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

---

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

我成功地实现了这一点，使用快照拍摄了整个页面，并将画布裁剪到正确的大小

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 => {
    // 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
     * ...
     * ...
     */
});

---

另一个可能会有所帮助。（由于您处于客户端/服务器端边界之间，因此需要存储客户端位置，并可能将它们发送到服务器进行处理。JS将无法从客户端捕获任何内容[出于安全目的]）。不要认为直接使用JS是可能的，以前曾出现过一个非常类似的问题：这不是一个完美的解决方案，但这就行了。谢谢