Hướng dẫn html to image js - html sang js hình ảnh

Tôi đã đọc câu trả lời của Sjeiti mà tôi thấy rất thú vị, nơi bạn chỉ với một vài dòng JavaScript đơn giản có thể hiển thị HTML trong một hình ảnh.

Tất nhiên chúng tôi phải nhận thức được những hạn chế của phương pháp này (vui lòng đọc về một số trong số chúng trong câu trả lời của anh ấy).

Ở đây tôi đã thực hiện mã của anh ấy một vài bước nữa.

Một hình ảnh SVG có độ phân giải vô hạn nguyên tắc, vì nó là đồ họa vector. Nhưng bạn có thể nhận thấy rằng hình ảnh mà mã của Sjeiti được tạo ra không có độ phân giải cao. Điều này có thể được sửa bằng cách chia tỷ lệ hình ảnh SVG trước khi chuyển nó sang phần tử canvas, mà tôi đã thực hiện trong một trong hai mã ví dụ (Runnable) mà tôi đưa ra dưới đây. Một điều khác tôi đã thực hiện trong mã đó là bước cuối cùng, cụ thể là lưu nó dưới dạng tệp PNG. Chỉ để hoàn thành toàn bộ.

Vì vậy, tôi đưa ra hai đoạn mã có thể chạy được:

Cái đầu tiên cho thấy độ phân giải vô hạn của SVG. Chạy nó và phóng to với trình duyệt của bạn để thấy rằng độ phân giải không giảm khi bạn phóng to.

Trong đoạn trích mà bạn có thể chạy, tôi đã sử dụng backticks để chỉ định một chuỗi mẫu được gọi là ngắt dòng để bạn có thể thấy rõ hơn HTML được hiển thị. Nhưng nếu không, nếu HTML đó nằm trong một dòng, thì mã sẽ rất ngắn, như thế này.

const body = document.getElementsByTagName('BODY')[0];
const img = document.createElement('img')
img.src = 'data:image/svg+xml,' + encodeURIComponent(``);        
body.appendChild(img);

Đây là một đoạn trích có thể chạy được.

const body = document.getElementsByTagName('BODY')[0];
const img = document.createElement('img')
img.src = 'data:image/svg+xml,' + encodeURIComponent(`
  
`);
body.appendChild(img);

Phóng to và kiểm tra độ phân giải vô hạn của SVG.

Runnable tiếp theo, bên dưới, là một trong đó thực hiện hai bước bổ sung mà tôi đã đề cập ở trên, cụ thể là cải thiện độ phân giải bằng cách mở rộng SVG, sau đó tiết kiệm như một hình ảnh PNG.

window.addEventListener("load", doit, false)
var canvas;
var ctx;
var tempImg;
function doit() {
    const body = document.getElementsByTagName('BODY')[0];
    const scale = document.getElementById('scale').value;
    let trans = document.getElementById('trans').checked;
  if (trans) {
    trans = '';
  } else {
    trans = 'background-color:white;';
  }
    let source = `
        

            
            What you see here is only an image, nothing
            else.

            

            I really like cheese.

            

            

                Scaling:
                

                ${scale} times!
            
        
`
    document.getElementById('source').innerHTML = source;
    canvas = document.createElement('canvas');
    ctx = canvas.getContext('2d');
    canvas.width = 200*scale;
    canvas.height = 200*scale;
    tempImg = document.createElement('img');
    tempImg.src = 'data:image/svg+xml,' + encodeURIComponent(`
        
    `);
}
function saveAsPng(){
    ctx.drawImage(tempImg, 0, 0);
    var a  = document.createElement('a');
    a.href = canvas.toDataURL('image/png');
    a.download = 'image.png';
    a.click();
}

    

        

            The claims in the HTML-text is only true for the image created when you click the button.
        
    
    

        

            

            
        
        

            

                     In this example the PNG-image will be squarish even if the HTML here on the left is not exactly squarish. That can be fixed.

                     To increase the resolution of the image you can change the scaling with this slider.
                

                      Make it transparent
                
                110  Save as PNG-image
            
            
        
    

Hãy thử với các tỷ lệ khác nhau. Ví dụ, nếu bạn đặt tỷ lệ thành 10, thì bạn sẽ nhận được độ phân giải rất tốt trong hình ảnh PNG được tạo. Và tôi đã thêm một tính năng bổ sung thêm: một hộp kiểm để bạn có thể làm cho hình ảnh PNG-trong suốt nếu bạn muốn.And I added a little extra feature: a checkbox so that you can make the PNG-image transparent if you like.

Notice:

Save-Button không hoạt động trong Chrome và Edge khi tập lệnh này được chạy ở đây tại Stack Overflow. Lý do là https://www.chromestatus.com/feature/5706745674465280.

Do đó, tôi cũng đã đặt đoạn trích này vào https://jsfiddle.net/7gozdq5v/ nơi nó hoạt động cho các trình duyệt đó.