ภาพหน้าจอกระดานหมากรุก

ปัญหา: ฉันต้องการจับภาพหน้าจอตำแหน่งกระดานหมากรุกใน https://lichess.org< โดยทางโปรแกรม /a> วิธีที่ดีที่สุดคือใช้ปุ่มที่เพิ่มลงในเพจหรือผ่านส่วนขยายเบราว์เซอร์

นี่คือตัวอย่างบอร์ด: https://lichess.org/training/elsB3

อย่างที่คุณเห็นบอร์ดมีคลาส .main-board

มีสามวิธีที่ฉันกำลังลอง:

1. การใช้ DevTools ของ Chrome

นี่ค่อนข้างตรงไปตรงมา:

• ตรวจสอบองค์ประกอบ
• Cmd + Shift + P
• พิมพ์ 'ภาพหน้าจอ' และคลิกที่ 'จับภาพหน้าจอโหนด'

ทำงานได้ค่อนข้างดี แต่ฉันไม่สามารถทราบวิธีการโต้ตอบกับตัวเลือกภาพหน้าจอ DevTools โดยทางโปรแกรมได้

2. การใช้หุ่นเชิดและโครเมียม

โค้ดด้านล่างนี้ทำหน้าที่เป็น PoC เพื่อคว้าบอร์ด

const puppeteer = require("puppeteer");
(async function () {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  await page.goto('https://lichess.org/training/YxqlF', {waitUntil: 'networkidle2'});
  const el = await page.$('.main-board');
  fname = "board_" + Date.now() + ".png"
  console.log("Saving chess board as " + fname)
  await el.screenshot({ path: fname});  
})();

มีประโยชน์ แต่ฉันต้องการที่จะทำเช่นนี้ด้วยการเพิ่มโค้ดลงใน lichess (หรือผ่านส่วนขยาย) วิธีนี้ใช้ได้ดีสำหรับฉัน แต่ยากที่จะแบ่งปันกับผู้อื่นที่ต้องการใช้ (ต้องตั้งค่านักเชิดหุ่นและโครเมียม) นอกจากนี้โครเมียมยังขัดข้องหลายครั้งเมื่อทำสิ่งข้างต้น สิ่งนี้นำฉันไปสู่ตัวเลือกที่สาม:

3. การใช้ html2canvas

นี่คือสิ่งหนึ่งที่ฉันไม่สามารถทำงานได้และฉันต้องการความช่วยเหลือ ฉันพยายามจับภาพของกระดานด้วย:

html2canvas(document.getElementsByClassName("main-board")[0]).then(function(canvas) {
    //document.body.appendChild(canvas);
    var img = canvas.toDataURL()
    window.open(img);
});

แต่ภาพที่ได้ออกมาจะเป็นดังนี้:

ฉันสงสัยว่า css ไม่ได้รับการจัดการอย่างถูกต้อง และฉันไม่แน่ใจว่าทำไม (อาจเป็นอุปสรรคด้านความปลอดภัยของเบราว์เซอร์) ไม่มีข้อผิดพลาดในคอนโซลของเบราว์เซอร์

ฉันขอขอบคุณความช่วยเหลือหรือคำแนะนำที่ทุกคนสามารถนำเสนอได้ ขอบคุณล่วงหน้า.