Snorlax Snorlax - 1 year ago 229
HTML Question

Turn DOM element into an image?

I know it's possible to turn DOM elements into base64 images, which you can embed onto the page very, very easily:

However, dom-to-image has an issue with fonts like Font Awesome or the material icons from Google. The generated image either write the text from the HTML element or an empty square, as you can see here:

Font Awesome or Google's Material Icons

The icons are simple:

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

I have submitted a bug about this, but I was wondering if there are other alternative ways to do it? Problem is, I have a "generate image", which generates these icons as HTML, but the actual image I want should be saved as an image in the database (for obvious reasons). So the user can either generate these DOM elements or they can input their own image.

Answer Source

it may be that the error must declare fonts used using CSS font-facedeclaraciones for optimal design and Unicode support

in the example copy all the dom-to-image.js why I found as a link externally apologize for that

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


<div id="root">
    <i class="material-icons">add</i>

<script type="text/javascript" src="assets/js/dom-to-image.js"></script>

 <script type="text/javascript">

    var node = document.getElementById('root');

            .then(function (dataUrl) {
                var img = new Image();
                img.src = dataUrl;
            .catch(function (error) {
                console.error('oops, something went wrong!', error);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download