Trình chuyển đổi HTML sang jQuery

Download

Preview :

Như nhiều bạn đang hỏi trong phần bình luận về việc sử dụng một nút bấm, thay vì hai nút bấm. một cái để xem trước và một cái để tải xuống. Vì vậy, bên dưới tôi cũng đã cập nhật với một nút duy nhất

#3 Mã JavaScript để chuyển đổi HTML sang Hình ảnh [png]

Để lưu HTML dưới dạng Hình ảnh trong Javascript trước tiên chúng ta cần tạo sự kiện nhấp vào nút bằng cách sử dụng addEventListener. Sau đó, trong sự kiện nhấp chuột, chúng tôi sử dụng chức năng thư viện html2canvas

Mã Javascript của chúng tôi trông giống như được viết bên dưới

 document.getElementById["btn_convert1"].addEventListener["click", function[] {
	html2canvas[document.getElementById["html-content-holder"]].then[function [canvas] {
			var anchorTag = document.createElement["a"];
			document.body.appendChild[anchorTag];
			document.getElementById["previewImg"].appendChild[canvas];
			anchorTag.download = "filename.jpg";
			anchorTag.href = canvas.toDataURL[];
			anchorTag.target = '_blank';
			anchorTag.click[];
		}];
 }];

Đoạn mã trên sẽ chuyển đổi div HTML thành hình ảnh trong JavaScript. Đến đây chúng ta đã chuyển HTML sang JPEG thành công, còn nếu bạn muốn chuyển HTML sang PNG bằng Javascript

Sau đó, tất cả những gì chúng ta cần để thực hiện một thay đổi đơn giản trong mã của mình là. e bằng cách đặt tên tệp tải xuống có phần mở rộng là. png trong trường hợp của chúng tôi sử dụng tên tệp. png thay vì tên tệp. jpg.    

Bây giờ mã bên dưới là để sử dụng jquery, bạn có thể bỏ qua phần đọc thêm nếu muốn mà không cần jquery

Xem bản trình diễn

Cập nhật phiên bản mới nhất. Thay vì 2 nút, chúng tôi sử dụng một nút duy nhất để xem trước và tải xuống hình ảnh đã chuyển đổi

Vì chúng tôi có một nút xem trước và chuyển đổi HTML sang hình ảnh nên tôi. e btnChuyển đổi. Khi nhấp vào nút bằng mã được viết bên dưới, chúng tôi có thể chuyển đổi HTML thành hình ảnh giống như trong video trên

  $["#btnConvert"].on['click', function [] {
                html2canvas[document.getElementById["html-content-holder"]].then[function [canvas] {                   
                   var anchorTag = document.createElement["a"];
                    document.body.appendChild[anchorTag];
                    document.getElementById["previewImg"].appendChild[canvas];
                    anchorTag.download = "filename.jpg";
                    anchorTag.href = canvas.toDataURL[];
                    anchorTag.target = '_blank';
                    anchorTag.click[];
                }];
    }];

Sửa lỗi. - Nội dung hình ảnh trong đánh dấu HTML

Nếu đánh dấu HTML chứa các thẻ hình ảnh và bạn cố gắng chuyển đổi HTML thành hình ảnh thì hình ảnh đó sẽ không được chuyển đổi trong một số trình duyệt. Trong trường hợp đó, bạn cần chuyển các tham số bổ sung cho phương thức html2canvas

Các tham số bổ sung này là allowTaint, useCORS và được đặt thành true theo mặc định, cả hai đều sai. Vì vậy, mã cuối cùng trông giống như được viết dưới đây.  

$["#btn_convert"].on['click', function [] {
		html2canvas[document.getElementById["html-content-holder"],
		{
			allowTaint: true,
			useCORS: true
		}].then[function [canvas] {
			var anchorTag = document.createElement["a"];
			document.body.appendChild[anchorTag];
			document.getElementById["previewImg"].appendChild[canvas];
			anchorTag.download = "filename.jpg";
			anchorTag.href = canvas.toDataURL[];
			anchorTag.target = '_blank';
			anchorTag.click[];
		}];
}];

Nếu nguồn hình ảnh từ một miền khác, thì hãy đặt useCORS. đúng, cho phép chúng tôi chuyển đổi HTML thẻ hình ảnh thành hình ảnh

Xem bản trình diễn

cũng đọc. Cách xuất bảng HTML sang excel trong javascript

Đối với phiên bản cũ hơn, bạn có thể làm theo mã được viết bên dưới, nơi chúng tôi có hai nút. Một để xem trước và một là thẻ liên kết, tải hình ảnh xuống,

#4 Nhấp vào nút chuyển đổi HTML thành Canvas

Như bạn thấy, chúng tôi đã thêm một nút xem trước. Bây giờ trên nút xem trước, nhấp bằng HTML2Canvas sẽ hiển thị HTML của chúng tôi thành Canvas

Mã trông giống như được viết dưới đây

var element = $["#html-content-holder"]; // global variable
var getCanvas; // global variable

    $["#btn-Preview-Image"].on['click', function [] {
         html2canvas[element, {
         onrendered: function [canvas] {
                $["#previewImg"].append[canvas];
                getCanvas = canvas;
             }
         }];
    }];

Mã jQuery được viết ở trên sẽ tạo một canvas và nối nó vào vùng chứa div của chúng tôi cho mục đích xem trước

Xem bản trình diễn

#5 jQuery. Tải xuống HTML thành IMAGE / Ảnh chụp màn hình của nội dung Div

Ở đây chúng tôi đã sẵn sàng với khung vẽ của mình, bây giờ chúng tôi chỉ cần tải xuống ở định dạng Hình ảnh. Trên nút tải xuống, nhấp vào sẽ chuyển đổi canvas sang định dạng hình ảnh png, bạn có thể đặt bất kỳ định dạng hình ảnh nào. Đây là mã để tải xuống. ________số 8_______

Phần 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ư thẻ DIV, UL, LI, Table, P thành 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

Bạn cũng có thể kiểm tra các bài viết này

Cảm ơn bạn đã đọc, vui lòng tiếp tục truy cập blog này và chia sẻ điều này trong mạng của bạn. Ngoài ra, tôi rất thích nghe ý kiến ​​​​của bạn trong phần bình luận

Làm cách nào để chuyển đổi văn bản HTML thành văn bản bình thường trong jQuery?

Làm cách nào để chuyển đổi mã HTML sang JS?

Làm cách nào để lấy mã HTML trong jQuery?

Làm cách nào để chuyển đổi đối tượng HTML thành chuỗi trong jQuery?