ภาพหน้าจอ phantomjs ไม่ปรับขนาดตามเนื้อหาของหน้า

ฉันมีแบนเนอร์สองสามอันจากไคลเอนต์ (เช่น - กว้าง 160 พิกเซลและสูง 600 พิกเซล) แต่เมื่อฉันพยายามจับภาพหน้าจอ ฉันเห็นผลลัพธ์เป็นรูปภาพขนาด 400x600 ที่มีพื้นหลังสีขาว (หรือสีดำเมื่อไฟล์ผลลัพธ์เป็น JPEG) และแบนเนอร์บน ด้านซ้าย (ประมาณ 160x600) ฉันไม่สามารถฮาร์ดโค้ด viewPortSize ได้เนื่องจากแบนเนอร์ทั้งหมดแตกต่างกัน เป็นไปได้ไหมที่จะตั้งค่า viewPortSize แบบไดนามิกหรือบางอย่างเพื่อให้ภาพผลลัพธ์เหมือนกับแบนเนอร์ทุกประการ

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

ฉันได้ลองลด viewPortSize เป็น 10x10 แล้ว แต่ก็ไม่มีประโยชน์

แก้ไข ฉันพบว่าเป็นไปไม่ได้ที่จะเปลี่ยนความกว้างของเบราว์เซอร์เป็นขนาดที่ต่ำกว่า 360 และเป็นปัญหา


javascript phantomjs
person bearhunterUA    schedule 08.02.2017    source แหล่งที่มา
comment
ฉันคิดว่าในขณะที่จับภาพหน้าจอแบนเนอร์เหล่านี้ยังไม่แสดงผล คุณต้องตั้งค่าการหน่วงเวลาก่อน page.render   -  person MysterX    schedule 08.02.2017
comment
@MysterX ไม่... มันโหลดแล้วและฉันเห็นโฆษณา เพิ่มความล่าช้า 1 วินาที แต่ผลลัพธ์ก็เหมือนเดิม   -  person bearhunterUA    schedule 08.02.2017

คำตอบ (1)


arrow_upward
0
arrow_downward

เพื่อให้มีภาพผลลัพธ์เหมือนแบนเนอร์ทุกประการ?

กล่าวอีกนัยหนึ่ง คุณต้องการสร้างภาพหน้าจอขององค์ประกอบที่กำหนดเท่านั้น นี่ไม่ใช่สคริปต์ฉบับเต็มสำหรับการทำเช่นนั้น เพียงส่วนสำคัญเท่านั้น

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
เป็นความคิดที่ดี แต่ฉันจะแทรกองค์ประกอบ div บางอย่างด้วย Banner_id ระหว่าง body และ child คนแรกแล้วทำเช่นเดียวกัน เพราะฉันไม่รู้ว่าจะมีอะไรอยู่ในแบนเนอร์ ขอบคุณมาก มันมีประโยชน์! - person bearhunterUA; 09.02.2017