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);
    }
});

如何从HTML中获取Base64字符串

2 个答案: