Javascript 如何从HTML中获取Base64字符串

我有一个包含图像和一些文本的div。用户可以自定义它。一旦他的修改完成，我想把div保存为一个带有文本的图像。 就像他拍了张截图一样

我能够在PHP端保存Base64字符串中的图像，但无法从HTML中获得正确的Base64

因此，我想知道如何使用JavaScript或jQuery从div中的HTML中获取base64。我还可以添加插件。

试试看

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

jshiddle

试试看

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

jshiddle

试试看

试一试

---

成功了，谢谢！你应该做出一个真实的回答，这样我才能确认它是否有效谢谢！你应该做出一个真实的答案，这样我才能确认下一个答案是正确的。不需要画布。这个涉及画布的答案令人费解。下一个答案是正确的。不需要画布。这个涉及画布的答案令人费解。