tangkapan layar phantomjs tidak disesuaikan dengan konten halaman

Saya mempunyai beberapa spanduk dari klien (misalnya - lebar 160 px dan tinggi 600 px) tetapi ketika saya mencoba mengambil tangkapan layar saya melihat hasilnya sebagai gambar 400x600 dengan latar belakang putih (atau hitam ketika file hasil adalah JPEG) dan spanduk di atas sisi kiri (sekitar 160x600). Saya tidak dapat melakukan hardcode pada viewPortSize karena semua spanduk berbeda. Apakah mungkin untuk menyetel viewPortSize secara dinamis atau sesuatu agar menghasilkan gambar persis seperti spanduk?

const page = require('webpage').create();
const system = require('system');
/**
 *  FIRST ARG - name of this runner
 *  SECOND ARG - input html file
 *  THIRD ARG - destination
 */
if (system.args.length !== 3) {
    console.log('Usage: phantomRunner.js [inputFile] [destination]');
    phantom.exit();
}
const inputFile = system.args [1];
const outputPath = system.args [2];

page.open(inputFile, function (status) {
    if (status !== 'success') {
        phantom.exit(1);
    } else {
        page.render(outputPath);
        phantom.exit();
    }
});

Saya sudah mencoba menurunkan viewPortSize menjadi 10x10, tetapi tidak membantu.

EDIT Saya menemukan bahwa tidak mungkin mengubah lebar browser ke ukuran lebih rendah dari 360 dan itu merupakan masalah.


javascript phantomjs
person bearhunterUA    schedule 08.02.2017    source sumber
comment
Saya rasa pada saat tangkapan layar, spanduk ini belum ditampilkan. Anda perlu menyetel beberapa penundaan sebelum page.render   -  person MysterX    schedule 08.02.2017
comment
@MysterX tidak... sudah dimuat dan saya melihat iklan, tambahkan penundaan 1 detik tetapi hasilnya sama   -  person bearhunterUA    schedule 08.02.2017

Jawaban (1)


arrow_upward
0
arrow_downward

untuk mendapatkan hasil gambar persis seperti banner?

Dengan kata lain Anda ingin membuat tangkapan layar dari elemen tertentu saja. Ini bukan skrip lengkap untuk melakukan itu, hanya bagian pentingnya.

var banner_id = system.args [1];

var b = page.evaluate(function (banner_id) {
    return document.getElementById(banner_id).getBoundingClientRect();
}, banner_id);

page.clipRect = {
    top:    b.top,
    left:   b.left,
    width:  b.width,
    height: b.height
};

page.render(system.args [2]);
person Vaviloff    schedule 08.02.2017
comment
Itu ide yang bagus, tapi saya akan memasukkan beberapa elemen div dengan banner_id antara body dan anak pertama dan melakukan hal yang sama, karena saya tidak tahu apa yang ada di banner. Terima kasih banyak, ini sangat membantu! - person bearhunterUA; 09.02.2017