วิธีสร้างภาพหน้าจอจากการแสดงผลที่ตอบสนองต่อการออกแบบโดยไม่ต้องย่อขยายด้วยการซูม

ฉันต้องการภาพหน้าจอจากเว็บแอปพลิเคชันของเรา มันจะไปในโปสเตอร์ที่พิมพ์ออกมาดังนั้นฉันต้องการมันในเวอร์ชั่น DPI ที่สูง ฉันมีจอภาพ 96 DPI ดังนั้นพิกเซลหน้าจอมาตรฐานเมื่อพิมพ์ ทางออกของปัญหานี้คือ

• คำนวณจำนวนพิกเซลที่ฉันต้องการเพื่อให้สามารถพิมพ์ภาพในขนาด 300 dpi ในขนาดที่ฉันต้องการ
• ตั้งค่าเครื่องมือออกแบบการตอบสนองใน Firefox เป็นขนาดวิวพอร์ตที่แน่นอนพูด X โดย Y พิกเซล
• ซูมด้วย Ctrl + + จนกระทั่งองค์ประกอบการออกแบบที่จำเป็นเติมเต็มมุมมอง (ส่วนนั้นมีความสำคัญ - โซลูชันต้องทำงานเมื่อเนื้อหาถูกซูมเข้าหรือซูมออก)
• ใช้เครื่องมือสกรีนช็อตในตัวเพื่อสร้างสกรีนช็อต
• ใช้ GIMP เพื่อเปลี่ยนความละเอียดของภาพเป็น 300 dpi โดยไม่ต้องเปลี่ยนจำนวนพิกเซลที่แท้จริง

สำหรับความประหลาดใจของฉันภาพหน้าจอไม่ได้ X ตามพิกเซล Y แต่มีขนาดที่เล็กกว่าเช่น 0.67X คูณ 0.67Y ดังนั้นฉันจึงได้รับภาพ 200 dpi โดยไม่ต้องปรับขนาดขึ้น ปัจจัยยังแตกต่างกัน หลังจากเล่นไปรอบ ๆ ฉันพบว่าขนาดของภาพหน้าจอนั้นพิจารณาจากระดับการซูม

การใช้ addon เพื่อทำให้ภาพหน้าจอ (Awesome Screenshot Plus) ก่อให้เกิดปัญหาเดียวกัน การใช้ Chrome ทำให้เกิดปัญหาที่แตกต่างกันเนื่องจาก Chrome ไม่ได้แสดงวิวพอร์ตขนาดใหญ่ที่สมบูรณ์และมีการบันทึกภาพเพียงบางส่วน ตามความรู้ของฉัน IE ไม่ได้มีเครื่องมือสำหรับการขยายขนาดวิวพอร์ตเกินขีด จำกัด หน้าจอทางกายภาพ

คุณมีข้อเสนอแนะ (addons เบราว์เซอร์อาจเป็นเบราว์เซอร์ที่แตกต่างกันหรือไม่) สำหรับวิธีการจับภาพหน้าจอของฉัน? ฉันต้องการเบราว์เซอร์เพื่อแสดงผลหน้าและไม่ใช่สิ่งที่ต้องการ PageLayouts เนื่องจาก JavaScript ในแอปพลิเคชันมีส่วนเกี่ยวข้องบ้างและเนื่องจากฉันต้องปรับแต่ง HTML และ CSS นิดหน่อย

ฉันทำงานบนพีซี Windows และแผนกของฉันไม่มีงบประมาณในการลงทุนในเครื่องมือเฉพาะที่ได้รับค่าจ้างสำหรับงานนี้

สิ่งที่ใช้ได้ผลสำหรับฉันคือใน Firefox ฉันเปิดคอนโซลนักพัฒนาซอฟต์แวร์และที่ด้านบนขวาฉันคลิกตัวเลือกกล่องเครื่องมือ (ดูเหมือนเกียร์เล็ก ๆ )

ภายใต้ 'ปุ่มกล่องเครื่องมือที่มีอยู่' ฉันเลือก 'ถ่ายภาพเต็มหน้าจอ' นั่นทำให้ปุ่มกล้องเล็ก ๆ ปรากฏขึ้นถัดจากปุ่มตัวเลือกกล่องเครื่องมือ

จากนั้นในโหมดการออกแบบที่ตอบสนองต่อฉันตั้งค่าความละเอียดของฉันแล้วถ่ายภาพหน้าจอด้วยปุ่มเต็มหน้าจอ ฉันออกมาเป็นความละเอียดที่ถูกต้องที่ฉันต้องการ

หมายเหตุ: ฉันรู้ว่าคุณสมบัติการออกแบบที่ตอบสนองมีปุ่มสกรีนช็อต แต่สำหรับฉันเมื่อฉันจะใช้สกรีนช็อตความละเอียดไม่ได้ออกมาตามที่ฉันตั้งไว้

เป็นไปได้เฉพาะกับ addon Firefox ที่เรียกว่าPearl Crescent Page Saverที่คุณป้อน 200 หรือ 300 เป็นค่า% ในการตั้งค่าที่ทำเครื่องหมายไว้ มันจะซูมหน้า (ไม่ใช่การลดอัตราการสุ่มสัญญาณแบบพิกเซล) และถ่ายภาพหน้าจอที่ใหญ่กว่าวิวพอร์ตของคุณ 2-3 เท่า ฉันใช้มันเพื่อสร้างภาพหน้าจอความละเอียด 300-600dpi ที่เป็นมิตรกับการพิมพ์ของเว็บไซต์และกลายเป็นสิ่งที่ยอดเยี่ยม (โดยเฉพาะอย่างยิ่งถ้าเว็บไซต์นั้นพร้อมเรตินา

ฉันกำลังค้นหาทางเลือกสำหรับ Chrome ฉันพบปลั๊กอินนี้สำหรับ Firefox โดยไม่ตั้งใจ แต่มันก็ดูเหมือนจะปล่อยทิ้งไว้เล็กน้อยและมันก็ไม่สามารถใช้งานได้กับเวอร์ชั่นล่าสุดอีกต่อไป แต่ Firefox ที่เสถียรกว่าเก่าก็ทำงานได้ดีพอ อาจจะคุ้มค่าที่จะเก็บรุ่นนี้เอาไว้แค่นี้ถ้าไม่มีทางเลือกอื่น