無法使用phantomjs或wkhtmltoimage將html轉換爲png

我想將html轉換爲png。無法使用phantomjs或wkhtmltoimage將html轉換爲png

這裏是我的html

<!DOCTYPE html> 
<html> 
<head> 
    <style type="text/css">* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    } 

    main { 
    width: 600px; 
    margin: 100px auto; 
    } 

    header { 
    width: 100%; 
    height: auto; 
    background-color: red; 
    background-size: cover; 
    background-repeat: no-repeat; 
    } 

    header .content { 
    width: 80%; 
    margin-left: 10%; 
    margin-right: 10%; 
    display: flex; 
    padding: 40px 0; 
    } 

    .content .column { 
    width: 25%; 
    margin: auto; 
    text-align: center; 
    } 

    .content .column.lfp-logo { 
    width: 30%; 
    } 

    .content .column img { 
    width: 80%; 
    height: auto; 
    } 
    </style> 
</head> 
<body> 
<main> 
    <header> 
    <div class="content"> 
     <div class="column"><img 
     src="https://cdn.shopify.com/s/files/1/1237/5652/products/spiderman_3_compression_shirt_3_small.jpg"></div> 
     <div class="column lfp-logo"><img 
     src="https://cdn.shopify.com/s/files/1/1237/5652/products/spiderman_3_compression_shirt_3_small.jpg"></div> 
     <div class="column"><img 
     src="https://cdn.shopify.com/s/files/1/1237/5652/products/spiderman_3_compression_shirt_3_small.jpg"></div> 
    </div> 
    </header> 
</main> 
</body> 
</html>

這裏的jsfiddle例子。其實這正是我需要在我的PNG文件，以獲得jsfiddle

我試圖用wkhtmltoimage，我得到這個圖像

我也嘗試過使用phantomjs，並得到該圖像我用phantomjs用的NodeJS模塊webshot。

任何人都可以建議我的方式我可以呈現html到PNG圖像。我不需要動態的HTML。我想要渲染的是靜態的。

UPDATE。添加的代碼生成的圖像

const pug = require('pug'); 
const child_process = require('child_process'); 
const fs = require('fs'); 
const webshot = require('webshot'); 

const options = { 
    data: { 
     images: { 
      header: 'https://cdn.shopify.com/s/files/1/1237/5652/products/spiderman_3_compression_shirt_3_small.jpg', 
      team1: 'https://cdn.shopify.com/s/files/1/1237/5652/products/spiderman_3_compression_shirt_3_small.jpg', 
      team2: 'https://cdn.shopify.com/s/files/1/1237/5652/products/spiderman_3_compression_shirt_3_small.jpg', 
      competition: 'https://cdn.shopify.com/s/files/1/1237/5652/products/spiderman_3_compression_shirt_3_small.jpg' 
     } 
    } 
}; 

const html = pug.renderFile('./template/next.pug', options); 

console.log(html); // this is html 

// webshot with wkhtmltoimage 
child_process.exec(`echo "${html}" | wkhtmltoimage --width 600 --disable-smart-width - export/out.png`, (err) => { 
    console.log(err); 
}); 

// webshot with phantomjs 
webshot(html, 'hello_world.png', {siteType:'html'}, function(err) { 
    console.log(err); 
});

來源

2017-04-21 Gor

Gor，你忘了在腳本中加入一個示例代碼來製作屏幕截圖。 – Vaviloff

ok @Vaviloff我將立即更新 – Gor

我要說做類似this。與html2canvas一起工作，您可以輕鬆快捷地完成任務。

convert_to_img = function (do_download) { 
    html2canvas(document.getElementById("contenedor_chimichangas"), { 
    //onrender devuelve el canvas para hacerle los retoques necesarios 
    onrendered: function (canvas) {//sombra aqui, sombra allí!! 
     var context = canvas.getContext('2d');//context from originalCanvas 
     var data_image = canvas.toDataURL("image/png"); //cogemos la url de la imagen sin tratar 
     //añadimos la url en una imagen para poder tratarla y redimensionarla 
     var image_edicion = $("<img/>", { 
     id: "image", 
     src: data_image 
     }).appendTo($("#show_img").empty()); 
     //if we click download: 
     if(do_download === true){ 
      Canvas2Image.saveAsPNG(new_canvas); 
     } 
     }); 

    }, 

    }); 
}

js被記錄在行中。 ; D

來源

2017-07-05 11:25:27

我無法使用Html2Canvas或其他庫。因爲對話必須是服務器端 – Gor

無法使用phantomjs或wkhtmltoimage將html轉換爲png

回答

相關問題