Bài viết này giải thích cách chuyển đổi div thành hình ảnh trong JavaScript. Có, chúng tôi sẽ tạo một hình ảnh từ trang HTML của chúng tôi ở phía máy khách. Tất cả những gì chúng ta cần là thẻ HTML và sử dụng thư viện javascript html2canvas, chúng ta có thể tạo hình ảnh. i. e convert HTML table sang Image PNG, JPG, hoặc convert thẻ DIV, UL, LI sang định dạng ảnh Jpg

Bây giờ, hãy chuyển sang phần mã hóa và xem cách chúng tôi có thể chuyển đổi HTML thành Hình ảnh

Bước để kết xuất HTML thành hình ảnh

• Tải xuống và nhập các tệp jquery HTML2Canvas
• Thêm đánh dấu HTML
• Mã JavaScript để chuyển đổi div HTML thành Hình ảnh [png]

Trước tiên, chúng tôi cần tải xuống và nhập thư viện jquery mới nhất trên trang web của chúng tôi. Bạn có thể nhập tệp jQuery do máy chủ lưu trữ hoặc sử dụng tệp đó từ trang web do Google lưu trữ [được khuyến nghị]

Để chuyển đổi HTML sang Hình ảnh, chúng tôi cần nhập thêm một thư viện javascript và đó là HTML2CANVAS tải xuống và nhập vào thẻ đầu HTML

Bây giờ chúng tôi đã hoàn tất việc tải xuống, vì vậy thẻ đầu cuối cùng của chúng tôi trông như hình bên dưới

Ghi chú. Nếu bạn chỉ muốn sử dụng javascript thì không cần nhập thư viện jQuery. Bạn chỉ cần làm theo Bước 2 và Bước 3

Thêm đánh dấu HTML

Hãy làm cho bài viết này thật đơn giản, vì vậy bây giờ tôi sẽ thêm một số thành phần biểu mẫu HTML giả. e. thẻ biểu mẫu, nhưng bạn có thể thêm HTML động bằng cách sử dụng jQuery ajax mà bạn muốn tạo hình ảnh

  First Name:

  

  Last Name:

  


  
 

Mã JavaScript

const form = document.querySelector["form"];
const div = document.querySelector["div"];
domtoimage.toPng[form]
  .then[[dataUrl] => {
    const img = new Image[];
    img.src = dataUrl;
    div.appendChild[img];
  }]
  .catch[[error] => {
    console.error[error];
  }];
  

Chúng tôi gọi domtoimage.toPng với phần tử mà chúng tôi muốn hiển thị thành hình ảnh. Sau đó, chúng tôi nhận được dataUrl , là phiên bản chuỗi base64 của hình ảnh của phần tử được hiển thị, gọi lại then , chúng tôi tạo một phần tử 

  First Name:

  

  Last Name:

  


  
 

  First Name:

  

  Last Name:

  


  
 

Chúng tôi đặt thuộc tính 

  First Name:

  

  Last Name:

  


  
 

  First Name:

  

  Last Name:

  


  
 

  First Name:

  

  Last Name:

  


  
 

  First Name:

  

  Last Name:

  


  
 

Chuyển đổi HTML thành hình ảnh bằng nút Tải xuống

     
This block will be converted to image
    
    
    Download
    

    
Preview :
    

    

Mã JavaScript

$[document].ready[function[]{
var element = $["#form"]; // global variable
var getCanvas; // global variable
    $["#View"].on['click', function [] {
         html2canvas[element, {
         onrendered: function [canvas] {
                $["#preview"].append[canvas];
                getCanvas = canvas;
             }         }];    }];

	$["#button"].on['click', function [] {
    var imgageData = getCanvas.toDataURL["image/png"];
    var newData = imgageData.replace[/^data:image\/png/, "data:application/octet-stream"];
    $["#button"].attr["download", "your_pic_name.png"].attr["href", newData];
	}];
}];

Sự kết luận

Đây là một cách dễ dàng để hiển thị HTML thành một hình ảnh như PNG. Vì thật dễ dàng để tạo một hình ảnh từ canvas. Nhưng để hiển thị các phần tử HTML tiêu chuẩn như các thẻ Biểu mẫu, UL, LI, Bảng, P thành một hình ảnh, chúng tôi sử dụng thư viện javascript HTML2Canvas. Sử dụng HTML2Canvas sẽ chụp ảnh màn hình các trang web HTML của chúng tôi. Cá nhân tôi thấy đây là thư viện javascript tốt nhất để chuyển đổi HTML thành hình ảnh

Tôi có thể chuyển đổi HTML thành hình ảnh không?

Hình ảnh [] trong JavaScript là gì?

Làm cách nào để chuyển đổi HTML sang JPG trong jquery?

Bạn có thể đặt hình ảnh trong JavaScript không?