PhantomJS 创建覆盖的缩略图

Question

我正在使用 zoomFactor 和 clipRect 截取网页的屏幕截图，我让它以正确的尺寸呈现。我被困在如何将本地图像放在它上面，以便它打印为单个图像。

page.open(link, function(status) {
    page.viewportSize = { width: 188, height: 195 };
        var clipRect = page.evaluate(function() {
            return document.querySelector("body").getBoundingClientRect();
        });
        page.clipRect = {
            top: 0,
            left: clipRect.left,
            width: 188,
            height: 195
        };
        page.zoomFactor = 0.20;
        page.render(sku + '_Thumb.jpg', { format: 'jpg', quality: '100' });
        console.log("Thumb Complete");
});

我尝试将本地图像注入 DOM 但没有成功，我想我可以使用 ImageMagick CLI，但无法将其注入运行。

Answer 1

I tried injecting the local image into the DOM but had no luck

想象一下，您可以编辑远程站点 html 内容 - 您怎么可能 link 将图像 link 上传到另一台服务器上的文件，而该文件未提供？当然那是行不通的，因为如果你将图像注入远程页面的 DOM，图像必须可以通过 http 访问。

所以让我们先试试看。

page.viewportSize = { width: 188, height: 195 };
page.open(link, function(status) {

    page.includeJs('http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js', function() {

        // Inject remote image        
        page.evaluate(function(){

            $("body").append("<div style='position: absolute; top:0; left: 0;z-index:9999'><img src='https://images.unsplash.com/photo-1461409971633-aa0e46732112?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=640&fit=max&s=bb401d13a08d6459b80bc63a0905a091'></div>");

        });

    });

    // Let's make sure the remote image has time to load
    setTimeout(function(){

        var clipRect = page.evaluate(function() {
            return document.querySelector("body").getBoundingClientRect();
        });
        page.clipRect = {
            top: 0,
            left: clipRect.left,
            width: 188,
            height: 195
        };
        page.zoomFactor = 0.20;
        page.render('thumb.jpg', { format: 'jpg', quality: '100' });
        console.log("Thumb Complete");
        phantom.exit();

    }, 3000);
});

你的脚本生成的原图是这样的（我在cnn.com上操作）：

从 Unsplash 注入远程图像的拇指看起来像这样：

但是必须使本地图像在外部可用并不是太方便 - 如果您在工作机器上没有 http 服务器，或者如果您在 NAT 后面的本地计算机上工作怎么办？

幸运的是，PhantomJS 内置服务器有一个简单的解决方案：

var server = require('webserver').create();
var fs = require("fs");
var image = fs.open("img.jpg", "rb");
var data = image.read();

var listening = server.listen(3000, function (request, response) {
    console.log("GOT HTTP REQUEST");

    response.statusCode = 200;
    response.headers = {"Cache": "no-cache", "Content-Type": "image/jpeg"};
    response.setEncoding("binary");
    response.write(data);
    response.close();
});
if (!listening) {
    console.log("could not create web server listening on port " + port);
    phantom.exit();
}

向 this answer 致敬关于设置正确二进制编码的提示。

通过脚本中的这段代码，我们在端口 3000 上启动了一个本地服务器，只是为了提供给定的图像（我想是为了加水印或其他目的）。之后我们只需要从本地地址注入一个图像：

page.includeJs('http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js', function() {

    page.evaluate(function(){

        $("body").append("<div style='position: absolute; top:0; left: 0;z-index:9999'><img src='http://127.0.0.1:3000/'></div>");
    });

});

至此，本地图片成功嵌入到远程网页的缩略图中：

PhantomJS 创建覆盖的缩略图

PhantomJS to create overlayed thumbnail images

javascript

command-line

phantomjs

screenshot

thumbnails