Question

我知道可以将DOM元素转换为base64图像，您可以非常轻松地将其嵌入到页面中：https://github.com/tsayen/dom-to-image

但是，dom-to-image在Font Awesome等字体或Google的素材图标方面存在问题。生成的图像可以写入HTML元素或空方块中的文本，如下所示：

图标很简单：

<i class="material-icons">add</i>

我已经提交了一个关于此的错误，但我想知道是否还有其他方法可以做到这一点？问题是，我有一个“生成图像”，它生成这些图标为HTML，但我想要的实际图像应该保存为数据库中的图像（出于显而易见的原因）。因此，用户可以生成这些DOM元素，也可以输入自己的图像。

Answer 1

可能是错误必须声明使用CSS font-facedeclaraciones使用的字体以获得最佳设计和Unicode支持

在示例中复制所有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>

将DOM元素转换为图像？

1 个答案: