如何從HTML中獲取Base64字符串

Question

我有一個包含圖像和一些文本的div。 用戶可以對其進行自定義。 完成他的修改后，我想將div保存為帶有文本的圖像。 就像他拍了截圖一樣。

我可以在PHP端從Base64字符串保存圖像，但無法從HTML獲取正確的Base64。

因此，我想知道如何使用JavaScript或jQuery從div內的HTML獲取base64。 我也可以添加插件。

Answer 1

嘗試

var elem = $("div")[0].outerHTML;
var blob = new Blob([elem], {
    "type": "text/html"
});
var reader = new FileReader();
reader.onload = function (evt) {
    if (evt.target.readyState === 2) {
        console.log(
                     // full data-uri
                     evt.target.result
                     // base64 portion of data-uri
                   , evt.target.result.slice(22, evt.target.result.length));
        // window.open(evt.target.result)
    };
};
reader.readAsDataURL(blob);

jsfiddle http://jsfiddle.net/guest271314/9mg5sf7o/

Answer 2

試試html2canvas

http://html2canvas.hertzen.com/examples.html

html2canvas($("#div"), {
    onrendered: function(canvas) {
        var myImage = canvas.toDataURL("img/png");
        window.open(myImage);
    }
});