Mengkonversi teks ke gambar javascript

Question

Pembaca seperti Anda membantu mendukung MUO. Saat Anda melakukan pembelian menggunakan tautan di situs kami, kami dapat memperoleh komisi afiliasi. Baca selengkapnya

Jika Anda ingin mengambil tangkapan layar sebagian atau seluruh halaman web Anda menggunakan JavaScript, Anda mungkin akan terjebak. Membuat gambar dari elemen HTML bisa tampak seperti sebuah tantangan, karena tidak ada cara langsung untuk melakukannya di JavaScript

Table of Contents Show

Bagaimana Cara Kerja html-ke-gambar?
Peringatan dan Keterbatasan
Menggunakan Perpustakaan
Mengambil Screenshot Dengan JavaScript Itu Mudah
Bagaimana cara mengubah teks menjadi gambar?
Bagaimana cara mengubah teks menjadi gambar di Jawa?
Bagaimana cara menulis teks pada gambar dalam JavaScript?
Bagaimana cara mengubah teks menjadi gambar di jQuery?

Untungnya, ini bukanlah tugas yang mustahil dan sebenarnya cukup mudah dengan alat yang tepat. Menggunakan pustaka html-ke-gambar, membuat gambar simpul DOM semudah satu panggilan fungsi

Bagaimana Cara Kerja html-ke-gambar?

Pustaka html-ke-gambar menghasilkan gambar dalam bentuk URL data base64. Ini mendukung beberapa format keluaran, termasuk PNG, JPG, dan SVG. Untuk melakukan konversi ini, perpustakaan menggunakan algoritma ini

Buat tiruan dari elemen HTML target, anak-anaknya, dan elemen semu apa pun yang terpasang
Salin gaya untuk semua elemen kloning dan sematkan gaya inline
Sematkan font web yang relevan, jika ada
Sematkan gambar apa pun yang ada
Ubah node yang dikloning menjadi XML, lalu SVG
Gunakan SVG untuk membuat URL Data

Peringatan dan Keterbatasan

Meskipun html-to-image adalah perpustakaan yang bagus, itu tidak sempurna. Ini memiliki beberapa peringatan, yaitu

Pustaka tidak akan berfungsi di Internet Explorer atau Safari
Jika HTML yang Anda coba konversi menyertakan elemen kanvas yang tercemar, perpustakaan akan gagal. Seperti yang dijelaskan MDN, memasukkan data yang tidak disetujui CORS di elemen kanvas Anda akan mencemarinya
Karena browser membatasi ukuran maksimum URL data, ada batasan ukuran HTML yang dapat dikonversi perpustakaan

Menggunakan Perpustakaan

Untuk mencoba perpustakaan, hal pertama yang perlu Anda lakukan adalah membuat direktori proyek di mesin lokal Anda. Selanjutnya, instal html-to-image di direktori tersebut menggunakan npm package manager. Inilah perintah terminal untuk menginstalnya

 npm install --save html-to-image

Anda juga harus memasang bundler JavaScript, untuk membuatnya lebih mudah menggunakan pustaka. Bundler esbuild dapat membantu mengemas modul node ke dalam skrip yang kompatibel dengan web

 npm install esbuild

_

Itu saja yang perlu Anda instal. Selanjutnya, buat file bernama index. html di direktori Anda, dan sajikan dengan server web pilihan Anda. Letakkan kode berikut di index. html

 <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .colorful-div {
        padding: 3rem;
        color: white;
        background-image: linear-gradient(to right, yellow, rebeccapurple);
        border: 1px solid black;
        margin: 1rem auto;
        font-size: 3rem;
        font-family: cursive;
    }
    </style>
</head>
<body>

<div class="colorful-div">
    I'm going to be in a screenshot!
</div>

<div class="long-text">
    I'm an example of a sufficiently verbose paragraph that
    illustrates that taking screenshots in JavaScript is
    really very easy, for the following reasons:
    <ul>
        <li>Reason 1</li>
        <li>Reason 2</li>
        <li>Reason 2</li>
    </ul>
</div>
 
<script src="out.js"></script>
</body>
</html>

Kode ini membuat dua elemen pada halaman. div dengan latar belakang gradien, dan beberapa teks dan daftar tidak berurutan di dalam div lain. Selanjutnya, Anda akan menulis JavaScript untuk mengubah elemen ini menjadi gambar. Masukkan kode berikut ke dalam file baru bernama script. js

 import * as htmlToImage from "html-to-image";
 
const elems = ['.colorful-div', '.long-text']
 
elems.forEach((elem, ind) => {
    const node = document.querySelector(elem)
 
    htmlToImage.toPng(node)
        .then(function (dataUrl) {
            let img = new Image();
            img.src = dataUrl;
            document.body.appendChild(img);
        })
        .catch(function (error) {
            console.error('oops, something went wrong!');
            console.log(error)
        });
})

Kode ini melakukan beberapa hal

Mengimpor pustaka html-ke-gambar
Membuat larik yang terbuat dari pemilih CSS yang menargetkan dua elemen
Membuat gambar PNG dalam bentuk URL data dari setiap elemen array
Membuat tag img dan menyetel atribut src ke URL data, membuat salinan gambar dari dua elemen

Sekarang gunakan esbuild untuk menghasilkan file yang dibundel (out. js) indeks itu. html dengan menjalankan yang berikut di terminal Anda

  ./node_modules/.bin/esbuild script.js --bundle --outfile=out.js

_

Pada titik ini, inilah yang index. html akan terlihat seperti di browser Anda

a demo page for html-to-image

Meskipun salinan terlihat persis sama dengan aslinya, sebenarnya itu adalah elemen gambar. Anda dapat mengonfirmasi ini dengan membuka alat dev Anda dan memeriksanya

Pustaka ini juga berfungsi dengan kerangka kerja JavaScript. Itu berisi instruksi tentang cara menghasilkan format gambar lain. Ini juga menyertakan contoh yang menunjukkan cara menggunakan pustaka dengan React

Mengambil Screenshot Dengan JavaScript Itu Mudah

Tidak ada metode JavaScript bawaan untuk membuat gambar dari elemen HTML, atau mengambil tangkapan layar DOM. Namun, dengan bantuan perpustakaan dan layanan seperti html-to-image, ini menjadi tugas yang mudah

Ada cara lain untuk mencapai hasil serupa, seperti perpustakaan wkhtmltoimage. Anda dapat menggunakan alat sumber terbuka ini untuk mengambil tangkapan layar dari halaman web lengkap

Bagaimana cara mengubah teks menjadi gambar?

Buka https. //seotools kecil. com/text-to-image/(jika Anda belum ada di sana) Tulis teks yang diinginkan atau rekatkan dari clipboard di kotak teks besar. Selanjutnya, Anda harus memilih opsi yang diinginkan seperti Warna Teks, Gaya Font, Ukuran Font, Warna Latar Belakang, dan Warna Latar Belakang Teks untuk gambar keluar