HTML到圖像到Base64

Question

我正在努力解決這種情況，我在JavaScript變量中有一些HTML標記。

我想要的是，將該變量的值轉換為圖像並獲取base64值：

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

我嘗試了這個html2canvas，但它需要一個dom元素作為其參數而不是HTML字符串，或者我沒有正確使用它。

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

   }
})

但我明白了：

html2canvas.js：592 Uncaught（in promise）渲染url時必須使用代理

Answer 1

請參考鏈接： 這里

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