HTML到图像到Base64

Question

I am struggling with this situation, where I have some HTML markup in a JavaScript variable.

What I want is, to convert the value of that variable into an image and get the base64 value:

var print_markup = '';
print_markup += '<h2 style="text-align:center">' + $scope.config.business_name + '</h2>';
print_markup += '<p style="text-align:center">' + $scope.config.business_address + '</p>';

I tried this html2canvas but it needs a dom element as its argument not an HTML string, or I am not using it right.

html2canvas(print_markup, {
    onrendered: function(canvas) {
        var dataURL = canvas.toDataURL();
        var base64String = dataURL.split(',')[1];

   }
})

But I get this:

html2canvas.js:592 Uncaught (in promise) Proxy must be used when rendering url

Answer 1

Please refer the link : here

var node = document.getElementById('my-node');

domtoimage.toPng(node)
    .then (function (dataUrl) {
        var img = new Image();
        img.src = dataUrl;
        document.appendChild(img);
    })
    .catch(function (error) {
        console.error('oops, something went wrong!', error);
    });

Answer 2

正如@Kaiido建议的那样， html2canvas的第一个参数是一个附加到原始文档的元素 ，有关更多信息，请参阅此html2canvas