如何用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转换器等。

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

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

Answer 3

也许 wkhtmltopdf 可以，他们有一个'to image'，似乎还在测试阶段。然而，这和其他方法一样，需要更多的javascript来完成。

Answer 4

我设法通过对整个页面进行快照，用 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 => {
    // 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
     * ...
     * ...
     */
});