javascript - 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");
});

我尝试将本地镜像注入(inject) DOM 但没有成功，我想我也许可以使用 ImageMagick CLI，但无法让它运行。

Answer 1

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

想象一下，您可以编辑远程站点的 html 内容 - 您怎么可能将图像链接到另一台服务器上未提供的文件？当然这行不通，因为如果您将图像注入(inject)远程页面的 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 注入(inject)远程图像的拇指看起来像这样:

但是必须使本地镜像在外部可用并不是太方便 - 如果您在工作机器上没有 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 上启动了一个本地服务器，只是为了提供给定的图像(我想是为了加水印或其他目的)。之后我们只需要从本地地址注入(inject)一个图像:

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>");
    });

});

现在这是一个成功嵌入到远程网页缩略图中的本地镜像: