我知道可以将 DOM 元素转换为 base64 图像，您可以非常非常轻松地将其嵌入到页面中:https://github.com/tsayen/dom-to-image
但是，dom-to-image 对于 Font Awesome 或来自 Google 的 Material 图标等字体存在问题。生成的图像要么写入 HTML 元素中的文本，要么写入一个空方 block ，如您在此处所见:
Font Awesome或 Google's Material Icons
图标很简单:
<i class="material-icons">add</i>
我已经提交了一个关于这个的错误，但我想知道是否有其他替代方法可以做到这一点？问题是，我有一个“生成图像”，它将这些图标生成为 HTML，但我想要的实际图像应该作为图像保存在数据库中(原因很明显)。因此，用户可以生成这些 DOM 元素，也可以输入自己的图像。
最佳答案
可能是错误 must declare fonts used using CSS font-facedeclaraciones for optimal design and Unicode support
在示例中复制所有 dom-to-image.js 为什么我发现作为外部链接为此道歉 https://jsfiddle.net/sLc2kcwy/
<style type="text/css">
body{background: url('assets/img/fondo.jpg') no-repeat;overflow: auto;color:#fff;padding: 0px;margin: 0px;}
body {
background: #000;
}
.label {
display: inline-block;
width: 200px;
color: white;
}
#root {
display: inline-block;
width: 200px;
height: 300px;
text-align: center;
color: #ccc;
font-size: 20pt;
vertical-align: top;
}
#captured {
display: inline-block;
vertical-align: top;
}
.square {
display: block;
margin-top: 50px;
margin-left: 50px;
margin-bottom: 50px;
width: 100px;
height: 100px;
background: blue;
transform: rotate(45deg);
}
/* fallback */
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v17/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
</style>
</head>
<body>
<div id="root">
<i class="material-icons">add</i>
</div>
<script type="text/javascript" src="assets/js/dom-to-image.js"></script>
<script type="text/javascript">
var node = document.getElementById('root');
domtoimage.toPng(node)
.then(function (dataUrl) {
var img = new Image();
img.src = dataUrl;
document.body.appendChild(img);
})
.catch(function (error) {
console.error('oops, something went wrong!', error);
});
</script>
关于javascript - 将 DOM 元素转换为图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39310761/