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

我尝试将本地图像注入DOM但没有运气

想象一下，你可以编辑远程站点的html内容 - 你怎么可能将图像链接到另一台服务器上的文件并且不被提供？当然这不起作用，因为如果你将图像注入远程页面的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创建重叠的缩略图

1 个答案: