htmltoimage
rc-0.1
Menghasilkan gambar dari node DOM menggunakan kanvas HTML5 dan SVG.
Percabangan dari dom-ke-image dengan kode yang lebih mudah dipelihara dan beberapa fitur baru.
npm install --simpan html-ke-gambar
/* ES6 */import * sebagai htmlToImage dari 'html-ke-gambar';import { toPng, toJpeg, toBlob, toPixelData, toSvg } dari 'html-ke-gambar';/* ES5 */var htmlToImage = memerlukan(' html-ke-gambar');Semua fungsi tingkat atas menerima simpul DOM dan opsi rendering, dan mengembalikan janji yang dipenuhi dengan dataURL yang sesuai:
keSvg
ke png
ke JPEG
keBlob
kePixelData
Ikuti contoh berikut.
Dapatkan URL data berkode base64 gambar PNG dan segera tampilkan:
var node = document.getElementById('my-node');htmlToImage.toPng(node)
.then(function (dataUrl) {var img = Gambar baru();img.src = dataUrl;document.body.appendChild(img);
})
.catch(function (error) {console.error('oops, ada yang tidak beres!', error);
});Dapatkan URL data berkode base64 gambar PNG dan unduh (menggunakan unduhan):
htmlToImage.toPng(document.getElementById('my-node'))
.then(function (dataUrl) {download(dataUrl, 'my-node.png');
});Dapatkan gumpalan gambar PNG dan unduh (menggunakan FileSaver):
htmlToImage.toBlob(document.getElementById('my-node'))
.then(function (blob) {window.saveAs(blob, 'my-node.png');
});Simpan dan unduh gambar JPEG terkompresi:
htmlToImage.toJpeg(document.getElementById('my-node'), { kualitas: 0,95 })
.then(function (dataUrl) {var link = document.createElement('a');link.download = 'nama-gambar-saya.jpeg';link.href = dataUrl;link.click();
}); Dapatkan URL data SVG, tetapi filter semua elemen <i> :
filter fungsi (simpul) {
return (node.tagName !== 'i');}htmlToImage.toSvg(document.getElementById('my-node'), { filter: filter })
.then(function (dataUrl) {/* melakukan sesuatu */
});Dapatkan data piksel mentah sebagai Uint8Array dengan setiap 4 elemen array mewakili data RGBA piksel:
var node = document.getElementById('my-node');htmlToImage.toPixelData(node)
.then(function (piksel) {untuk (var y = 0; y < node.scrollHeight; ++y) { untuk (var x = 0; x < node.scrollWidth; ++x) {pixelAtXYOffset = (4 * y * node.scrollHeight) + (4 * x);/* pixelAtXY adalah Uint8Array[4] yang berisi nilai RGBA piksel di (x, y) dalam rentang 0..255 */pixelAtXY = pixel.slice(pixelAtXYOffset, pixelAtXYOffset + 4);
});Dapatkan HTMLCanvasElement, dan langsung tampilkan:
htmlToImage.toCanvas(document.getElementById('simpul-saya'))
.then(function (kanvas) {document.body.appendChild(kanvas);
});Sebuah fungsi yang menggunakan node DOM sebagai argumen. Harus mengembalikan nilai true jika node yang diteruskan harus disertakan dalam output. Mengecualikan node berarti mengecualikan turunannya juga.
Tidak dipanggil pada node root.
Nilai string untuk warna latar belakang, nilai warna CSS apa pun yang valid.
Lebar dan tinggi dalam piksel untuk diterapkan ke node sebelum dirender.
Sebuah objek yang propertinya akan disalin ke gaya simpul sebelum dirender. Anda mungkin ingin memeriksa referensi ini untuk nama JavaScript properti CSS.
Angka antara 0 dan 1 menunjukkan kualitas gambar (misalnya 0.92 => 92% ) dari gambar JPEG.
Defaultnya adalah 1.0 ( 100% )
Setel ke true untuk menambahkan waktu saat ini sebagai string kueri ke permintaan URL untuk mengaktifkan penghilangan cache.
Defaultnya false
URL data untuk gambar placeholder yang akan digunakan saat pengambilan gambar gagal.
Defaultnya adalah string kosong dan akan merender area kosong untuk gambar yang gagal.
Ini telah diuji pada Chrome dan Firefox terbaru (masing-masing 49 dan 45 pada saat penulisan), dengan kinerja Chrome jauh lebih baik pada pohon DOM besar, mungkin karena dukungan SVG yang lebih berkinerja, dan fakta bahwa ia mendukung properti CSSStyleDeclaration.cssText .
Internet Explorer tidak (dan tidak akan) didukung, karena tidak mendukung tag <foreignObject> SVG.
Safari tidak didukung karena menggunakan model keamanan yang lebih ketat pada tag <foreignObject> . Solusi yang disarankan adalah dengan menggunakan toSvg dan render di server.
Hanya lib standar yang saat ini digunakan, tetapi pastikan browser Anda mendukung:
Janji
Tag SVG <foreignObject>
Mungkin suatu hari nanti ada (atau mungkin sudah ada?) cara sederhana dan standar untuk mengekspor bagian HTML ke gambar (dan kemudian skrip ini hanya dapat berfungsi sebagai bukti dari semua rintangan yang harus saya lalui untuk mendapatkan seperti itu hal yang jelas telah dilakukan) tetapi sejauh ini saya belum menemukannya.
Pustaka ini menggunakan fitur SVG yang memungkinkan konten HTML sewenang-wenang di dalam tag <foreignObject> . Jadi, untuk merender simpul DOM tersebut untuk Anda, langkah-langkah berikut diambil:
Kloning node DOM asli secara rekursif
Hitung gaya untuk node dan setiap sub-node dan salin ke klon yang sesuai
dan jangan lupa untuk membuat ulang elemen semu, karena tentu saja elemen tersebut tidak dikloning dengan cara apa pun
Sematkan font web
temukan semua deklarasi @font-face yang mungkin mewakili font web
parsing URL file, unduh file yang sesuai
encode base64 dan konten sebaris sebagai dataURL
gabungkan semua aturan CSS yang diproses dan masukkan ke dalam satu elemen <style> , lalu tempelkan ke klon
Sematkan gambar
sematkan URL gambar di elemen <img>
gambar sebaris yang digunakan di properti CSS background , dengan cara yang mirip dengan font
Buat serial node yang dikloning ke XML
Bungkus XML ke dalam tag <foreignObject> , lalu ke dalam SVG, lalu jadikan URL data
Secara opsional, untuk mendapatkan konten PNG atau data piksel mentah sebagai Uint8Array, buat elemen Gambar dengan SVG sebagai sumbernya, dan render di kanvas di luar layar, yang juga telah Anda buat, lalu baca konten dari kanvas
Selesai!
Jika node DOM yang ingin Anda render menyertakan elemen <canvas> dengan sesuatu yang digambar di atasnya, maka node tersebut harus ditangani dengan baik, kecuali kanvasnya ternoda - dalam hal ini rendering tidak akan berhasil.
Rendering akan gagal pada DOM yang besar karena batas dataURI yang bervariasi.
Permintaan tarik dan bintang sangat diterima.
Untuk bug dan permintaan fitur, silakan buat masalah.
