我已經內格創建了數據（含模板的圖像，文本，標籤等），現在我想將其轉換成圖像格式。有沒有什麼技術可以在不使用canvas的情況下將特定的div內容轉換爲圖片。 我想整個「mydiv」內容轉換爲圖像和圖像保存到我的形象目錄，當我點擊保存？如何將整個div數據轉換爲圖像並將其保存到目錄中而不使用畫布？
<html>
<header>
</header>
<body>
<label> Template Design</label>
<div id="mydiv">
<label> Good Morning</label>
<img src="mug.png" id="img1" height="100" width="100" />
</div>
<input name="save" type="button" value="SAVE" />
</body>
</html>
UPDATE（2018日）：未來的你好的人！這個答案仍然有很多流量，我注意到我放在一起的舊JSFiddle被破壞了，所以它已經被更新了。顯示這種技術的新JSFiddle在這裏：https://jsfiddle.net/Sq7hg/1913。
-
你可能想尋找到一個基於Flash的解決方案，如果您不能使用<canvas>（雖然除非特別需要在舊版本IE的工作，我不知道爲什麼你可以」 T）。
http://flashcanvas.net/是一個使用Flash的模擬<canvas>，可能會讓你到你需要去的地方。該文件說，它支持toDataURL()，這樣可以爲你工作。
你能否提供更多的洞察周圍<canvas>的限制是，你已經嘗試嘗試已經是什麼？
//編輯
根據您的評論下面你也許能夠使用<canvas>，在這種情況下，你可以嘗試使用http://html2canvas.hertzen.com - 這是一個JavaScript的解決方案，基本上是重新寫的指定部分的DOM您碼到<canvas>，然後讓你與它進行交互不過你想要的，包括通過toDataURL()將其轉化爲圖像數據。
我沒有使用過它，但你的JavaScript代碼會是這個樣子：
html2canvas([document.getElementById('mydiv')], {
onrendered: function(canvas) {
var data = canvas.toDataURL('image/png');
// AJAX call to send `data` to a PHP file that creates an image from the dataURI string and saves it to a directory on the server
}
});
我撞倒在一起的這種快速的jsfiddle在這裏的行動：https://jsfiddle.net/Sq7hg/1913/（注：更新的鏈接如上所示）
此jsfiddle顯示如何使用toDataURL()方法將畫布轉換爲圖像並將其附加到文檔。生成的圖像保存到服務器的無限更復雜的任務，因爲這將需要一個AJAX調用或諸如此類發送圖像數據，生成的data: URL轉換爲實際的圖像的PHP腳本，然後將其保存到一個目錄，你有權寫入。如果這就是你需要做的，而不是進入那裏，我建議從這個堆棧溢出問題開始：How to save an HTML5 Canvas as an image on a server?
這很好用...一定是最簡單的解決方案。
// HTML
<div id="mydiv" style="background-image:url(Koala.jpg) ;background-size: 100%;
background-size :200px 200px;
background-repeat: no-repeat;">
<p>text!</p>
<img src="mug.png" height="100" width="100"/></div>
<div id="canvas">
<p>Canvas:</p>
</div>
<div style="width:200px; float:left" id="image">
<p style="float:left">Image: </p>
</div>
<div style="float:left;margin-top: 120px;" class="return-data">
</div>
<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
//風格
#mydiv {
background-color: lightblue;
width: 200px;
height: 200px
}
//腳本
<script language="javascript">
html2canvas([document.getElementById('mydiv')], {
onrendered: function (canvas) {
document.getElementById('canvas').appendChild(canvas);
var data = canvas.toDataURL('image/png');
//display 64bit imag
var image = new Image();
image.src = data;
document.getElementById('image').appendChild(image);
// AJAX call to send `data` to a PHP file that creates an PNG image from the dataURI string and saves it to a directory on the server
var file= dataURLtoBlob(data);
// Create new form data
var fd = new FormData();
fd.append("imageNameHere", file);
$.ajax({
url: "uploadFile.php",
type: "POST",
data: fd,
processData: false,
contentType: false,
}).done(function(respond){
$(".return-data").html("Uploaded Canvas image link: <a href="+respond+">"+respond+"</a>").hide().fadeIn("fast");
});
}
});
function dataURLtoBlob(dataURL) {
// Decode the dataURL
var binary = atob(dataURL.split(',')[1]);
// Create 8-bit unsigned array
var array = [];
for(var i = 0; i < binary.length; i++) {
array.push(binary.charCodeAt(i));
}
// Return our Blob object
return new Blob([new Uint8Array(array)], {type: 'image/png'});
}
</script>
我相信會有一個瀏覽器插件，可以爲你做這個。 – leftclickben
到目前爲止你做了什麼？這只是html。 –
是的，但我想點擊保存按鈕後，「mydiv」的所有內部數據轉換爲圖像格式？有沒有解決方法？ – luckyamit