將HTML5作爲圖像下載

如何將我的div下載爲圖像？（在JavaScript中，jQuery的或PHP）將HTML5作爲圖像下載

我有一個簡單的HTML代碼：

<div id="downloadThis"> 
    <div style="width: 200px; height: 100px; background: red"></div> 
    <div style="width: 200px; height: 100px; background: blue"></div> 
</div> 
<button id="downloader" onClick="download('downloadThis')">Download</button>

我想下載它作爲一個形象：

<script> 
    function download(id){ 
    document.getElementById(id).downloadAsImage("jpeg"); 
    } 
</script>

來源

2015-02-08 Tomato

檢查文檔https://github.com/kiloev/html-to-image – Ananth 2015-02-08 15:50:22

我想下載一切爲一個圖像 – Tomato 2015-02-08 15:51:35

您在網絡瀏覽器中看到什麼當你打開一個頁面是重新編輯一個頁面的結果。你不要下載渲染的結果，它已經在你的電腦上和你的記憶中。你正在做的是做一個截圖。

在Javascript中，沒有用於截取渲染頁面的標準API - 畢竟，它不是Web瀏覽器的工作，而是您的系統工具。但是你可以做的一個技巧是將你的DOM（或者DOM）的一部分分開渲染成<canvas>並將該畫布的內容保存到圖像中。這個答案解釋了這個過程的一般機制：https://stackoverflow.com/a/6678156/1542343

現在，你可以說有在線服務可以讓你下載在不同瀏覽器上完成的網站的屏幕截圖，但是這些服務實質上做的是他們運行瀏覽器在服務器上使用操作系統工具截取所需頁面的屏幕截圖。他們也可以截取在他們的服務器上運行的微軟Word或其他任何內容的屏幕截圖，這本質上與瀏覽器無關。

來源

2015-02-08 16:08:45 gvlasov

出於安全原因，瀏覽器不允許程序員導出Divs的內容 - 您的銀行信息可能在div內。

你可以做的是發送創建div的html + css到一個庫中，以一種可以被成像的方式重新呈現該html + css。

這裏有2個庫，重新渲染HTML + CSS：

html2canvas使用蠻力所有HTML + CSS轉換爲畫布繪製。它適用於基本內容，但對於更復雜的內容無效。它也具有安全限制，無法重新呈現從網頁本身加載的其他網域的內容。鏈接：http://html2canvas.hertzen.com/

PhantomJS是一個使用webkit重新呈現html + css的服務器端庫。它會從發送給它的html + css中創建一個更真實的圖像，因爲它使用webkit的瀏覽器引擎來進行渲染。鏈接：http://phantomjs.org/

來源

2015-02-08 16:32:11 markE

將HTML5作爲圖像下載

回答

相關問題