html2canvas resetting letter spacing

Question

$('#cypher-branding-letter-spacing').change(function(e) {
  $('#cypher-branding-main-edit-right-txt-text').css('letter-spacing', $('#cypher-branding-letter-spacing').val() + 'px');
});

//add text to design
$(document).on('click', '#cypher-branding-btn-add-to-design-text', function() {

  //remove the canvas border before creating the image, then add it back
  $("#cypher-branding-main-edit-right-txt-text-wrapper").css('border', 'none');

  html2canvas($("#cypher-branding-main-edit-right-txt-text-wrapper"), {
    onrendered: function(canvas) {
      var id = guid();

      var img = new Image();
      img = $('#cypher-branding-text-temp-img').find('img')[0];
      img.src = canvas.toDataURL('image/png');

      var w = canvas.width;
      var h = canvas.height;

      //var elem = $('<div id="cypher_container_' + id + '" class="cypher-container"><div id="cypher_container_inner_' + id + '" class="tooltip"><img id="cypher_container_img' + id + '" onclick=showLogoCommands("' + id + '"); src="' + img.src + '" class="cypher-blocks" style="width:' + w + 'px; height:' + h + 'px" /><span class="tooltiptext"><a href="#" onclick=rotatePlus("' + id + '");>Rotate +</a><a href="#" onclick=rotateMinus("' + id + '");>Rotate -</a><a href="#" onclick=removeFromDesign("' + id + '");>Remove</a><br /></span></div></div>');
      var elem = $('<div id="cypher_container_' + id + '" class="cypher-container" style="width:100px;"><div id="cypher_container_inner_' + id + '" class="tooltip"><span class="tooltiptext"><a href="#" onclick=removeFromDesign("' + id + '");>x</a><br /></span><img id="cypher_container_img' + id + '" onclick=showLogoCommands("' + id + '"); src="' + img.src + '" class="cypher-blocks" style="width:' + w + 'px; height:' + h + 'px" /></div></div>');
      $('.cypher-block').append(elem);

      elem.draggable({
        cancel: ".ui-rotatable-handle"
      });

      //rotate handles
      var nw = $("<div>", {
        class: "ui-rotatable-handle"
      });
      var ne = nw.clone();
      var se = nw.clone();

      elem.find('.cypher-blocks:first').resizable();
      elem.rotatable();

      elem.addClass("ui-rotatable-handle-sw");
      elem.addClass("ui-rotatable-handle-nw");
      elem.addClass("ui-rotatable-handle-ne");
      elem.addClass("ui-rotatable-handle-se");
      // Assign handles to box
      elem.find('.cypher-blocks:first').append(nw, ne, se);

      elem.find("div[class*='ui-rotatable-handle-']").bind("mousedown", function(e) {
        elem.find('.cypher-blocks:first').rotatable("instance").startRotate(e);
      });
    }
  });

  //$("#cypher-branding-main-edit-right-txt-text-wrapper").css('border', '1px dashed #777');

});

.cypher-blocks {
  display: inline-block;
  width: initial;
  cursor: move;
}

.cypher-block {
  padding: 10px;
  border: none;
  margin: 0px;
  margin-left: auto;
  margin-right: auto;
  overflow-x: hidden;
  overflow-y: hidden;
  background: transparent;
  height: 100%;
  width: 100%;
}

.cypher-block .ui-resizable-handle,
.cypher-block .ui-resizable-se {
  border: none;
  background-color: none;
  color: none;
  background-image: url("")
}

.cypher-block .ui-resizable-handle {}

.cypher-block .ui-rotatable-handle {
  background-image: url("")
}

.cypher-block:hover .ui-resizable-handle,
.cypher-block:hover .ui-resizable-se {
  border: 1px dotted #fff;
  background-color: #f00;
  color: #fff;
  resize: both;
}

.cypher-block:hover .ui-rotatable-handle {
  background: url('cypher-brand/rotate.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 16px;
  width: 16px;
  position: absolute;
}

<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.ui.rotatable/1.0.1/jquery.ui.rotatable.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>


<div class="cypher-block" style="margin-top:20px;"></div>


<div id="cypher-branding-main-edit-right-txt-text-wrapper" style="width:300px;height:170px;padding:0;">
  <div id="cypher-branding-main-edit-right-txt-text">Sample Text</div>
</div>


<input type="number" id="cypher-branding-letter-spacing" class="cypher-branding-text-input" value="0" />

<span id="cypher-branding-btn-add-to-design-text" class="cypher-branding-input-btn cypher-branding-command-padding">Add to Product Design</span>

I'm trying to create an image from text, then add it to another div.

The issue is with 'letter-spacing' CSS style.

After applying the CSS, then creating an image using html2canvas, the CSS on the image does not show.

Just to note, all other CSS styles I apply to the div shows, like line-spacing, color, font etc. It's only letter-spacing that is the issue.

I've added a snippet, however it's giving me a 'Script error' this is only when adding the external scripts. Not sure yet on how to resolve it as I'm new to snippets.

Answer 1

You need to set letterRendering:true

  html2canvas($("#cypher-branding-main-edit-right-txt-text-wrapper"), {
    onrendered: function(canvas) {
      var id = guid();

      var img = new Image();
      img = $('#cypher-branding-text-temp-img').find('img')[0];
      img.src = canvas.toDataURL('image/png');

      var w = canvas.width;
      var h = canvas.height;

      //var elem = $('<div id="cypher_container_' + id + '" class="cypher-container"><div id="cypher_container_inner_' + id + '" class="tooltip"><img id="cypher_container_img' + id + '" onclick=showLogoCommands("' + id + '"); src="' + img.src + '" class="cypher-blocks" style="width:' + w + 'px; height:' + h + 'px" /><span class="tooltiptext"><a href="#" onclick=rotatePlus("' + id + '");>Rotate +</a><a href="#" onclick=rotateMinus("' + id + '");>Rotate -</a><a href="#" onclick=removeFromDesign("' + id + '");>Remove</a><br /></span></div></div>');
      var elem = $('<div id="cypher_container_' + id + '" class="cypher-container" style="width:100px;"><div id="cypher_container_inner_' + id + '" class="tooltip"><span class="tooltiptext"><a href="#" onclick=removeFromDesign("' + id + '");>x</a><br /></span><img id="cypher_container_img' + id + '" onclick=showLogoCommands("' + id + '"); src="' + img.src + '" class="cypher-blocks" style="width:' + w + 'px; height:' + h + 'px" /></div></div>');
      $('.cypher-block').append(elem);

      elem.draggable({
        cancel: ".ui-rotatable-handle"
      });

      //rotate handles
      var nw = $("<div>", {
        class: "ui-rotatable-handle"
      });
      var ne = nw.clone();
      var se = nw.clone();

      elem.find('.cypher-blocks:first').resizable();
      elem.rotatable();

      elem.addClass("ui-rotatable-handle-sw");
      elem.addClass("ui-rotatable-handle-nw");
      elem.addClass("ui-rotatable-handle-ne");
      elem.addClass("ui-rotatable-handle-se");
      // Assign handles to box
      elem.find('.cypher-blocks:first').append(nw, ne, se);

      elem.find("div[class*='ui-rotatable-handle-']").bind("mousedown", function(e) {
        elem.find('.cypher-blocks:first').rotatable("instance").startRotate(e);
      });
    },
    letterRendering:true
  });

That should work I think.

Based on this Letter-spacing isn't supported