Hướng dẫn how can convert image to html using jquery? - làm cách nào để chuyển đổi hình ảnh thành html bằng jquery?

JQuery / JavaScript HTML sang Image Converter: Bài viết này giải thích cách chuyển đổi div thành một hình ảnh trong jQuery và cả trong JavaScript. Có, chúng tôi sẽ tạo ra một hình ảnh từ trang HTML của chúng tôi ở phía máy khách. Chúng tôi cũng có thể chuyển đổi một phần cụ thể của trang web của chúng tôi (ASP.NET C# Web Project/ PHP). Tất cả chúng ta cần thẻ HTML và sử dụng thư viện html2Canvas javaScript Chúng ta có thể tạo hình ảnh .I.E Chuyển đổi bảng HTML sang hình ảnh PNG, JPG hoặc chuyển đổi thẻ Div, UL, LI thành định dạng hình ảnh JPG. This article explains how to convert div to an image in jQuery and also in JavaScript. Yes, we are going to generate an image from our HTML page on the client-side. We can also convert a particular part of our Webpage (Asp.net C# Web project/ PHP). All we need HTML tag, and using the html2canvas javascript library we can create images .i.e converting the HTML table to Image PNG, JPG, or converting DIV, UL, LI tag into Jpg image format.

Tóm lại bằng cách sử dụng, HTML2Canvas sẽ kết xuất HTML thành hình ảnh có nghĩa là bây giờ chúng ta có thể chụp ảnh màn hình của Div hoặc bất kỳ phần tử HTML nào của trang web.html2canvas will render HTML to Images which means now we can take the screenshot of Div or any HTML element of a web page.

Đâu là việc sử dụng chuyển đổi HTML thành hình ảnh/hình ảnh?

Như chúng ta đã biết HTML5 cung cấp một số tính năng tuyệt vời, ví dụ, chúng ta có thẻ Canvas trên trang web của chúng ta. Bây giờ trên Canvas HTML 5, chúng tôi vẽ một cái gì đó hoặc nói rằng chúng tôi tạo biểu đồ hình tròn bằng cách sử dụng jQuery, sau đó, chúng tôi muốn lưu nó như một hình ảnh có thể ở định dạng PNG hoặc JPG.

Chúng tôi chuyển đổi Canvas thành hình ảnh ở phía máy khách và sau đó lưu nó trên máy chủ của chúng tôi.

Một ví dụ khác, mà tôi đã triển khai trong dự án web ASP.NET C# của tôi, nơi tôi phải thêm nhiều hình ảnh. Sau đó kéo/xáo trộn tất cả các hình ảnh bên trong một khung vẽ để lưu chúng vào một hình ảnh duy nhất.

Sau này & nbsp; Tải lên hình ảnh này bằng cách sử dụng JQuery Ajax và đưa ra lệnh in để tạo nhãn dán Mug, nhãn dán áo thun và một số nền động với mã màu hex.

Ý tưởng đằng sau nó & nbsp; là để người dùng thêm ảnh của mình. Cho phép họ sắp xếp hoặc xáo trộn nó. Sau này, & nbsp; nút nhấp chuột & nbsp; chúng tôi cho phép người dùng tạo & nbsp; html canvas lưu dưới dạng hình ảnh sẽ gửi cho mục đích in.

Bây giờ chúng ta hãy hướng tới phần mã hóa và xem làm thế nào chúng ta có thể chuyển đổi HTML thành hình ảnh :)

Ví dụ: & nbsp;

Video:

Bước để kết xuất HTML thành Image [PNG / JGP] bằng cách sử dụng JQuery / JavaScript

1. Tải xuống và nhập các tệp JQuery HTML2Canvas.
2. Thêm đánh dấu HTML.
3. Mã JavaScript để chuyển đổi HTML Div thành Image [PNG]
4. Mã jQuery: Nút Nhấp vào Chuyển đổi HTML sang Canvas.
5. Mã jQuery: Tải xuống HTML xuống Image.

#1 Tải xuống và nhập tệp HTML2Canvas.

Đầu 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 nó từ trang web do Google-do sử dụng (được đề xuất).

Để chuyển đổi HTML thành 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 nó vào thẻ đầu HTML.

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

<script src="Scripts/jquer_latest_2.11_.min.js" type="text/javascript"></script>
<script src="Scripts/html2canvas.js" type="text/javascript"></script> 

Lưu ý: Nếu bạn chỉ muốn sử dụng JavaScript, thì không cần nhập thư viện jQuery. Tất cả những gì bạn cần làm theo bước 2 và bước 3 If you want to use only javascript, then no need to import the jQuery library. All you need to follow Step 2 and Step 3

#2 Thêm đánh dấu HTML (phần tử HTML mà chúng tôi tạo hình ảnh)

Hãy làm cho bài viết này rất đơn giản, vì vậy bây giờ tôi đang thêm một số phần tử HTML giả, tức là p, nhưng bạn có thể thêm HTML động bằng cách sử dụng jQuery ajax & nbsp; mà bạn muốn tạo hình ảnh. Bây giờ chúng tôi thêm một thẻ nút tạo hình ảnh HTML cụ thể và thêm nút tải xuống.

Trên nút tải xuống, nhấp vào, hình ảnh được tải xuống trên ổ đĩa cục bộ của bạn. Đầu tiên chúng tôi tạo ra một bức tranh của các phần tử HTML của chúng tôi và sau đó tải xuống ổ đĩa cục bộ dưới dạng hình ảnh, tất cả điều này được thực hiện ở phía máy khách bằng cách sử dụng jQuery.

HTML đánh dấu:

<div id="html-content-holder" style="background-color: #F0F0F1; color: #00cc65; width: 500px;
        padding-left: 25px; padding-top: 10px;">
        <strong>Codepedia.info</strong><hr />
        <h2 style="color: #3e4b51;">
            Html to canvas, and canvas to proper image
        </h2>
        <p style="color: #3e4b51;">
            <b>Codepedia.info</b> is a programming blog. Tutorials focused on Programming ASP.Net,
            C#, jQuery, AngularJs, Gridview, MVC, Ajax, Javascript, XML, MS SQL-Server, NodeJs,
            Web Design, Software</p>
        <p style="color: #3e4b51;">
            <b>html2canvas</b> script allows you to take "screenshots" of webpages or parts
            of it, directly on the users browser. The screenshot is based on the DOM and as
            such may not be 100% accurate to the real representation as it does not make an
            actual screenshot, but builds the screenshot based on the information available
            on the page.
        </p>
    </div>
    <input id="btn-Preview-Image" type="button" value="Preview" />
    <a id="btn-Convert-Html2Image" href="#">Download</a>
    <input type="button" value="Preview & Convert" id="btnConvert" >
    <br />
    <h3>Preview :</h3>
    <div id="previewImg">
    </div>

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

#3 Mã JavaScript để chuyển đổi HTML thành Image [PNG]

Để lưu HTML dưới dạng hình ảnh trong JavaScript trước, chúng tôi cần tạo sự kiện nhấp vào nút bằng cách sử dụng addEventListener. Sau khi nhấp vào sự kiện, chúng tôi sử dụng chức năng thư viện HTML2Canvas.Javascript first, we need to create a button click event by using addEventListener.Then on click event, we use the html2canvas library function.

Mã JavaScript của chúng tôi trông giống như được viết dưới đây:

 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();
		});
 });

Mã trên sẽ chuyển đổi HTML Div thành hình ảnh trong JavaScript. Ở đây, chúng tôi đã chuyển đổi HTML thành JPEG thành công và nếu bạn muốn chuyển đổi HTML thành PNG trong JavaScript.HTML to JPEG successfully, and if you want to convert HTML to PNG in 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, tức là đặt tên tệp tải xuống với phần mở rộng là .png trong trường hợp của chúng tôi sử dụng & nbsp; fileName.png & nbsp; thay vì & nbsp; fileName.jpg & nbsp;. & nbsp; & nbsp;.png in our case use filename.png  instead of filename.jpg .   

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

Xem bản demo

Cập nhật phiên bản mới nhất: & NBSP; 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 được chuyển đổi.

Khi chúng tôi có một nút xem trước và chuyển đổi HTML thành hình ảnh i.e btnconvert. Trên nút Nhấp vào với mã viết dưới đây, chúng tôi có thể chuyển đổi HTML thành một 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();
                });
    });

Khắc phục sự cố:- 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. & NBSP; Trong trường hợp đó, bạn cần chuyển các tham số bổ sung cho phương thức HTML2CANVAS.html2canvas method.

Các tham số bổ sung này là & nbsp; allowtaint, usecors và được đặt là true & nbsp; theo mặc định & nbsp; cả hai đều sai. Vì vậy, mã cuối cùng trông giống như được viết dưới đây: & nbsp;allowTaint, useCORS, and set as true by default both are false. So the final code looks like as written below: 

$("#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 là từ một miền khác, thì hãy đặt Usecors: true, cho phép chúng tôi chuyển đổi thẻ HTML hình ảnh thành một hình ảnh.

Xem bản demo

Cũng đọc: & nbsp; Cách xuất bảng HTML vào Excel trong JavaScript.

Đối với phiên bản cũ hơn, bạn có thể làm theo mã viết dưới đây, nơi chúng tôi có hai nút. Một cho xem trước và một cái khác là Tag Anchor, trong đó tải xuống hình ảnh,

#4 Nhấp vào 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ẽ khiến HTML của chúng tôi trở 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 viết trên sẽ tạo ra một khung vẽ và nối nó vào container div của chúng tôi cho mục đích xem trước.

Xem bản demo & nbsp;

#5 JQuery: Tải xuống HTML xuống Hình ảnh / Ả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 chúng tôi 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.

$("#btn-Convert-Html2Image").on('click', function () {
    var imgageData = getCanvas.toDataURL("image/png");
    // Now browser starts downloading it instead of just showing it
    var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
    $("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData);
});

Kết luận: & nbsp; Đây là một cách dễ dàng để kết xuất HTML thành một hình ảnh như PNG. Vì thật dễ dàng để tạo một hình ảnh từ một tấm bạt. Nhưng để hiển thị các phần tử HTML tiêu chuẩn như Div, UL, LI, Bảng, P thẻ cho 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ủa các trang web HTML của chúng tôi. Cá nhân tôi thấy đây là thư viện tốt nhất & nbsp; JavaScript để chuyển đổi HTML thành hình ảnh. Here's an easy way to render HTML to an image like PNG. As it's easy to create an image from a canvas. But to render standard HTML elements like DIV, UL, LI, Table, P tags to an image we use the HTML2Canvas javascript library. Using HTML2Canvas will take the screenshot of our HTML web pages. I personally found this as the best javascript library to convert HTML to images.

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

1. Xem trước hình ảnh trước khi tải lên nó với jQuery trong ASP.NET.
2. Cách nhận tên tệp, kích thước, nhập nhập trong jQuery [Tệp đầu vào, API tệp].
3. Tạo một bảng HTML động bằng jQuery.
4. Cách loại bỏ hàng bảng Tr trong jQuery trên nút bấm.
5. JQuery: Cách vô hiệu hóa nút, div, thẻ neo.

Cảm ơn bạn đã đọc, xin 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 các bình luận.

Tái bút: Nếu bạn thấy nội dung này có giá trị và muốn cảm ơn tôi? 👳 Mua cho tôi một ly cà phê If you found this content valuable and want to thank me? 👳 Buy Me a Coffee

Theo dõi bản tin của chúng tôi to our newsletter

Nhận mới nhất và lớn nhất từ ​​Codepedia được chuyển thẳng đến hộp thư đến của bạn.

Làm cách nào để chuyển đổi hình ảnh thành HTML?

Làm thế nào có thể chuyển đổi HTML thành JPG trong jQuery?

HTML () trong jQuery là gì?

Hình ảnh () trong JavaScript là gì?