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

Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách chuyển đổi nội dung HTML DOM trên trang web thành hình ảnh JPEG hoặc PNG. Chúng tôi sẽ sử dụng thư viện html2canvas để chuyển đổi trang web HTML thành canvas sau đó chuyển đổi canvas đó thành Hình ảnh có thể là hình ảnh JPEG hoặc PNG

Html2canvas là một thư viện mạnh hoạt động rất tốt để thực hiện nhiều thao tác khác nhau trên HTML liên quan đến canvas. Chúng tôi sẽ sử dụng các phương thức thư viện html2canvas để chuyển đổi HTML thành canvas. Canvas được tạo có thể được sử dụng để tạo PDF hoặc chúng tôi chỉ cần thêm vào tài liệu ở đâu đó cần thiết. Ở đây chúng tôi sẽ chuyển đổi tài liệu HTML hoặc bất kỳ thành phần nào thành canvas mà sau này chúng tôi sẽ chuyển đổi thành Hình ảnh của loại JPG hoặc PNG

Hãy bắt đầu…

Bước 1] Đưa Thư viện HTML2Canvas vào dự án của bạn trong phần đầu

Bước 2] Gọi phương thức html2canvas sẽ lấy một phần của phần tử HTML hoặc toàn bộ tài liệu bạn muốn chuyển đổi thành Hình ảnh

Ở đây chúng tôi đã cung cấp tài liệu. nội dung cho toàn trang, phần này cũng có thể được sử dụng với bất kỳ phần nào của trang HTML bằng cách sử dụng bộ chọn

			//var container = document.getElementById["image-wrap"]; //specific element on page
			var container = document.body; // full page 
			html2canvas[container].then[function[canvas] {
                var link = document.createElement["a"];
                document.body.appendChild[link];
                link.download = "html_image.png";
                link.href = canvas.toDataURL["image/png"];
                link.target = '_blank';
                link.click[];
            }];

Tìm liên kết Demo đang hoạt động

# Sự cố hiển thị Hình ảnh trong Canvas đã chuyển đổi

Nếu bạn có bất kỳ hình ảnh nào trong nội dung HTML mà bạn muốn chuyển đổi thành hình ảnh canvas, thì hình ảnh đó phải nằm trên cùng một miền. Bạn sẽ không chuyển đổi nội dung hình ảnh trong HTML nếu nó liên kết với một số tên miền khác

Làm theo hai bước sau để chuyển đổi cả hình ảnh trong HTML

Bước 1] Thêm tùy chọn "allowTaint:true" làm đối tượng thuộc tính thứ hai trong the html2canvas[]. Vì vậy, mã sẽ trông giống như

		var container = document.getElementById["htmltoimage"];; // full page 
		html2canvas[container,{allowTaint : true}].then[function[canvas] {
		
			var link = document.createElement["a"];
			document.body.appendChild[link];
			link.download = "html_image.png";
			link.href = canvas.toDataURL["image/png"];
			link.target = '_blank';
			link.click[];
		}];

Bước 2] Đồng thời thay đổi URL hình ảnh trong nội dung HTML thành cùng miền mà chúng tôi đang tạo Canvas/Hình ảnh. Ví dụ

Thay cái này

hình nền. url[ https. //www. kinh dị. com/wp-content/uploads/2017/08/cropped-fjlogo2. png ];

để này

hình nền. url[ /wp-content/uploads/2017/08/cropped-fjlogo2. png ];

Sau hai bước này, bạn sẽ có thể xem Hình ảnh trong Canvas/ Hình ảnh được tạo bằng thư viện html2canvas

Tệp nguồn HTML hoàn chỉnh sẽ có mã sau

    
    
    HTML TO IMAGE
    
    

        function downloadimage[] {
            //var container = document.getElementById["image-wrap"]; //specific element on page
            var container = document.getElementById["htmltoimage"];; // full page 
            html2canvas[container, { allowTaint: true }].then[function [canvas] {

                var link = document.createElement["a"];
                document.body.appendChild[link];
                link.download = "html_image.jpg";
                link.href = canvas.toDataURL[];
                link.target = '_blank';
                link.click[];
            }];
        }

    


    
        #htmltoimage {
            width: 65%;
            margin: auto;
        }
    





    

        

            Here. Just click on button below to download Image of this HTML content which
        is wrapped in an ID named "htmltoimage". Now I am typing some randome stuff, so that image downloaded will have
        some content to show blah blah blah :P :D 

        Click To Download Image
    

Phần kết luận. Ở đây chúng tôi nhanh chóng thảo luận về cách chuyển đổi HTML thành hình ảnh bằng các phương thức thư viện html2canvas

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

Làm cách nào để sử dụng HTML để hình ảnh npm?

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

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