ดาวน์โหลด htmltoimage - ดาวน์โหลดซอร์สโค้ด htmltoimage

htmltoimage

ซอร์สโค้ดอื่น ๆ

rc-0.1

ดาวน์โหลด

HTML เป็นรูปภาพ

สร้างภาพจากโหนด DOM โดยใช้ผ้าใบ HTML5 และ SVG
แยกจาก dom-to-image พร้อมโค้ดที่บำรุงรักษาได้มากขึ้นและคุณสมบัติใหม่บางอย่าง

ติดตั้ง

 การติดตั้ง npm -- บันทึก html-to-image

การใช้งาน

 /* ES6 */import * as htmlToImage from 'html-to-image';import { toPng, toJpeg, toBlob, toPixelData, toSvg } จาก 'html-to-image';/* ES5 */var htmlToImage = need(' html-to-image');

ฟังก์ชั่นระดับบนสุดทั้งหมดยอมรับโหนด DOM และตัวเลือกการเรนเดอร์ และส่งคืนสัญญาที่ปฏิบัติตาม dataURL ที่เกี่ยวข้อง:

ถึงSvg
ไปที่Png
เป็น JPEG
ถึงหยด
ถึง PixelData

ไปกับตัวอย่างต่อไปนี้

รับ URL ข้อมูลที่เข้ารหัส base64 ของรูปภาพ PNG แล้วแสดงทันที:

 var node = document.getElementById('my-node');htmlToImage.toPng(โหนด)
  .then(function (dataUrl) {var img = new Image();img.src = dataUrl;document.body.appendChild(img);
  -
  .catch(function (error) {console.error('อุ๊ปส์ มีบางอย่างผิดพลาด!' ข้อผิดพลาด);
  -

รับ URL ข้อมูลที่เข้ารหัส base64 ของรูปภาพ PNG และดาวน์โหลด (โดยใช้การดาวน์โหลด):

 htmlToImage.toPng(document.getElementById('my-node'))
  .then(function (dataUrl) {ดาวน์โหลด(dataUrl, 'my-node.png');
  -

รับหยดรูปภาพ PNG และดาวน์โหลด (โดยใช้ FileSaver):

 htmlToImage.toBlob(document.getElementById('my-node'))
  .then(function (blob) {window.saveAs(blob, 'my-node.png');
  -

บันทึกและดาวน์โหลดรูปภาพ JPEG ที่บีบอัด:

 htmlToImage.toJpeg(document.getElementById('my-node'), { คุณภาพ: 0.95 })
  .then(function (dataUrl) {var link = document.createElement('a');link.download = 'my-image-name.jpeg';link.href = dataUrl;link.click();
  -

รับ URL ข้อมูล SVG แต่กรององค์ประกอบ <i> ทั้งหมดออก:

 ตัวกรองฟังก์ชัน (โหนด) {
  return (node.tagName !== 'i');}htmlToImage.toSvg(document.getElementById('my-node'), { ตัวกรอง: ตัวกรอง })
  .then(function (dataUrl) {/* do some */
  -

รับข้อมูลพิกเซลแบบดิบเป็น Uint8Array โดยมีองค์ประกอบอาร์เรย์ทุกๆ 4 องค์ประกอบที่แสดงถึงข้อมูล RGBA ของพิกเซล:

 var node = document.getElementById('my-node');htmlToImage.toPixelData(โหนด)
  .then(ฟังก์ชั่น (พิกเซล) {for (var y = 0; y < node.scrollHeight; ++y) { for (var x = 0; x < node.scrollWidth; ++x) {pixelAtXYOffset = (4 * y * node.scrollHeight) + (4 * x);/* pixelAtXY คือ Uint8Array[4] ที่มีค่า RGBA ของพิกเซลที่ (x, y) ในช่วง 0..255 */pixelAtXY =pixels.slice(pixelAtXYOffset, pixelAtXYOffset + 4 }}
  -

รับ HTMLCanvasElement และแสดงทันที:

 htmlToImage.toCanvas(document.getElementById('my-node'))
  .then (ฟังก์ชั่น (ผ้าใบ) {document.body.appendChild (ผ้าใบ);
  -

ตัวเลือก

กรอง

ฟังก์ชันที่รับโหนด DOM เป็นอาร์กิวเมนต์ ควรคืนค่าเป็นจริงหากโหนดที่ส่งผ่านควรรวมอยู่ในเอาต์พุต การแยกโหนดหมายถึงการแยกโหนดย่อยออกด้วย

ไม่ถูกเรียกบนโหนดรูท

สีพื้นหลัง

ค่าสตริงสำหรับสีพื้นหลัง ค่าสี CSS ที่ถูกต้อง

ความกว้างความสูง

ความกว้างและความสูงเป็นพิกเซลที่จะใช้กับโหนดก่อนเรนเดอร์

สไตล์

ออบเจ็กต์ที่มีคุณสมบัติที่จะคัดลอกไปยังสไตล์ของโหนดก่อนเรนเดอร์ คุณอาจต้องการตรวจสอบข้อมูลอ้างอิงนี้สำหรับชื่อ JavaScript ของคุณสมบัติ CSS

คุณภาพ

ตัวเลขระหว่าง 0 ถึง 1 แสดงถึงคุณภาพของภาพ (เช่น 0.92 => 92% ) ของภาพ JPEG

ค่าเริ่มต้นเป็น 1.0 ( 100% )

cacheBust

ตั้งค่าเป็นจริงเพื่อผนวกเวลาปัจจุบันเป็นสตริงการสืบค้นต่อคำขอ URL เพื่อเปิดใช้งานการป้องกันแคช

ค่าเริ่มต้นเป็น false

imagePlaceholder

URL ข้อมูลสำหรับรูปภาพตัวยึดตำแหน่งที่จะใช้เมื่อดึงรูปภาพไม่สำเร็จ

ตั้งค่าเริ่มต้นเป็นสตริงว่างและจะแสดงพื้นที่ว่างสำหรับรูปภาพที่ล้มเหลว

เบราว์เซอร์

ได้รับการทดสอบบน Chrome และ Firefox ล่าสุด (49 และ 45 ตามลำดับในขณะที่เขียน) โดย Chrome ทำงานได้ดีขึ้นอย่างมากบนแผนผัง DOM ขนาดใหญ่ อาจเนื่องมาจากการรองรับ SVG ที่มีประสิทธิภาพมากกว่า และความจริงที่ว่ามันรองรับคุณสมบัติ CSSStyleDeclaration.cssText

Internet Explorer ไม่ได้รับการสนับสนุน (และจะไม่ได้รับการสนับสนุน) เนื่องจากไม่สนับสนุนแท็ก SVG <foreignObject>

ไม่รองรับ Safari เนื่องจากใช้โมเดลความปลอดภัยที่เข้มงวดกว่าบนแท็ก <foreignObject> วิธีแก้ปัญหาที่แนะนำคือใช้ toSvg และเรนเดอร์บนเซิร์ฟเวอร์

การพึ่งพาอาศัยกัน

แหล่งที่มา

ปัจจุบันใช้เฉพาะ lib มาตรฐานเท่านั้น แต่ต้องแน่ใจว่าเบราว์เซอร์ของคุณรองรับ:

สัญญา
แท็ก SVG <foreignObject>

มันทำงานอย่างไร

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

ไลบรารีนี้ใช้คุณลักษณะของ SVG ที่อนุญาตให้มีเนื้อหา HTML ที่กำหนดเองภายในแท็ก <foreignObject> ดังนั้น เพื่อแสดงผลโหนด DOM นั้นให้กับคุณ ให้ทำตามขั้นตอนต่อไปนี้:

โคลนโหนด DOM ดั้งเดิมแบบเรียกซ้ำ
คำนวณสไตล์สำหรับโหนดและแต่ละโหนดย่อย และคัดลอกไปยังโคลนที่เกี่ยวข้อง

และอย่าลืมสร้างองค์ประกอบหลอกขึ้นมาใหม่ เนื่องจากองค์ประกอบเหล่านั้นไม่ได้ถูกโคลน แต่อย่างใด

ฝังแบบอักษรเว็บ

ค้นหาการประกาศ @font-face ทั้งหมดที่อาจแสดงถึงแบบอักษรบนเว็บ
แยก URL ไฟล์ ดาวน์โหลดไฟล์ที่เกี่ยวข้อง
เข้ารหัส base64 และเนื้อหาอินไลน์เป็น dataURL
เชื่อมต่อกฎ CSS ที่ประมวลผลทั้งหมดเข้าด้วยกันและรวมไว้ในองค์ประกอบ <style> เดียว จากนั้นแนบเข้ากับโคลน

ฝังภาพ

ฝัง URL รูปภาพในองค์ประกอบ <img>
รูปภาพอินไลน์ที่ใช้ในคุณสมบัติ CSS background ในลักษณะที่คล้ายกับแบบอักษร

ทำให้โหนดโคลนเป็นอนุกรมเป็น XML
รวม XML ลงในแท็ก <foreignObject> จากนั้นลงใน SVG จากนั้นทำให้เป็น URL ข้อมูล
อีกทางหนึ่ง หากต้องการรับเนื้อหา PNG หรือข้อมูลพิกเซลดิบเป็น Uint8Array ให้สร้างองค์ประกอบรูปภาพโดยมี SVG เป็นแหล่งที่มา และเรนเดอร์บนผืนผ้าใบนอกหน้าจอที่คุณสร้างขึ้นด้วย จากนั้นอ่านเนื้อหาจากแคนวาส
เสร็จแล้ว!

สิ่งที่ต้องระวัง

หากโหนด DOM ที่คุณต้องการเรนเดอร์มีองค์ประกอบ <canvas> ที่มีบางอย่างวาดอยู่บนนั้น ควรจะจัดการได้ดี เว้นแต่ผืนผ้าใบจะเสีย - ในกรณีนี้การเรนเดอร์ค่อนข้างจะไม่สำเร็จ
การแสดงผลจะล้มเหลวบน DOM ขนาดใหญ่ เนื่องจากขีดจำกัด dataURI แตกต่างกันไป