將html視圖轉換爲圖像

-4

我想將html視圖轉換爲圖像。這是格碼將html視圖轉換爲圖像

<html> 
<div class="row"> 
<!--image div --> 
<div id="imgspace1" class="container cropit-image-preview1" class="col-md-12" style="border: 1px solid black; height: 250px; position: absolute; top: 10px; right: 10px; left: 10px; background-size: cover;"> 
convert this div to a image.</div></div> 
</html>

我想將此html視圖轉換爲圖像。有人知道嗎？

來源

2015-09-17 wtharin

[wkhtml2pdf（http://wkhtmltopdf.org/） – NDM

你想要的方式？ –

如果您想重新使用它作爲頁面的圖像。您可以將此代碼保存在表中，然後可以將其插入到以後要顯示的位置。 –

有一個庫將HTML轉換爲HTML-Canvas。此畫布可以保存爲圖像。退房的例子：

http://html2canvas.hertzen.com/

來源

2015-09-17 10:59:36 DoubleVoid

您可以使用html2canvas庫：

function convertImg() { 
 
    html2canvas(document.querySelector('.row'), { 
 
    onrendered: function(canvas) { 
 
     document.body.appendChild(canvas); 
 
    } 
 
    }); 
 
} 
 

 
$('button').click(convertImg);

.row > div { 
 
    background: red; 
 
    color: white; 
 
    overflow: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script> 
 
<button>Convert page as img.</button> 
 
<div class="row" style='height:260px; position:relative; top:10px;'> 
 
    <div id="imgspace1" class="container cropit-image-preview1" class="col-md-12" style="border: 1px solid black; height: 250px; position: absolute; top: 10px; right: 10px; left: 10px; background-size: cover;"> 
 
    convert this div to a image.</div> 
 
</div>

來源

2015-09-17 11:07:28 Jai

將html視圖轉換爲圖像

回答

相關問題