html2canvas重置字母间距

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