html2canvas 删除多个空格和换行符

Question

我正在使用 html2canvas 将 html 内容呈现为图像。但它仅支持单词之间的单个空格以及仅在 One 中显示的所有文本。

Example 1

if text is  `Word1      Word2` it become to `word1 word2`

Example 2

This is First line 
This is Second Line 

Image: 

THis is First line This is Second Line

我查看了 html2canvas 代码，我相信下面这两个函数负责绘制文本和空格。帮助我如何实现我的目标。

  function renderText(el, textNode, stack) {
    var ctx = stack.ctx,
    color = getCSS(el, "color"),
    textDecoration = getCSS(el, "textDecoration"),
    textAlign = getCSS(el, "textAlign"),
    metrics,
    textList,
    state = {
      node: textNode,
      textOffset: 0
    };

    if (Util.trimText(textNode.nodeValue).length > 0) {
      textNode.nodeValue = textTransform(textNode.nodeValue, getCSS(el, "textTransform"));
      textAlign = textAlign.replace(["-webkit-auto"],["auto"]);

      textList = (!options.letterRendering && /^(left|right|justify|auto)$/.test(textAlign) && noLetterSpacing(getCSS(el, "letterSpacing"))) ?
      textNode.nodeValue.split(/(\b| )/)
      : textNode.nodeValue.split("");

      metrics = setTextVariables(ctx, el, textDecoration, color);

      if (options.chinese) {
        textList.forEach(function(word, index) {
          if (/.*[\u4E00-\u9FA5].*$/.test(word)) {
            word = word.split("");
            word.unshift(index, 1);
            textList.splice.apply(textList, word);
          }
        });
      }

      textList.forEach(function(text, index) {
        var bounds = getTextBounds(state, text, textDecoration, (index < textList.length - 1), stack.transform.matrix);
        if (bounds) {
          drawText(text, bounds.left, bounds.bottom, ctx);
          renderTextDecoration(ctx, textDecoration, bounds, metrics, color);
        }
      });
    }
  }

      function drawText(currentText, x, y, ctx){
        if (currentText !== null && Util.trimText(currentText).length > 0) {
          ctx.fillText(currentText, x, y);
          numDraws+=1;
        }
      }

Answer 1

html2canvas 将文本区域或输入框值呈现在一行中，并修剪单词之间的所有多个空格。所以我通过将文本区域转换为div标签找到了解决方案，查看html contenteditable Attribute

 Replace  <textarea></textarea> with <div contenteditable="true"></div>

如果您想使用 jquery 对 div 具有相同的 textarea 行为，请使用此代码

$( '#EDITABLE' ).focus();

var selection = window.getSelection();
var range = document.createRange();
var div = $('#div2').get(0);

range.setStartBefore(div);
range.collapse(true);

selection.removeAllRanges();
selection.addRange(range);

// cursor should now be between div1 and div2
range = window.getSelection().getRangeAt(0);
console.log("range object returned is: ", range);

参见示例：http://jsfiddle.net/9ZZpX/3/

Answer 2

我尝试了各种方法，包括存在于特定版本的html2canvas 中的参数，即：letterRendering: true 在您的对象的选项中。

在我的情况下，我收到一条错误消息，指出我下载的库中不存在此选项

html2canvas(document.querySelector("#capture2image"), {
            allowTaint: true,
            useCORS: true,            
            logging: false
        })

所以我只是做了一件简单/不可维护的事情：

{{ name.replace(" ", " ") }}

也许它会帮助那些也尝试了一切但没有任何效果的人......

Answer 3

我知道它很旧，但是，这是我为您的“示例 2”使用 jquery/JS 带来的解决方法：

var oldTextArea = $('#textArea').replaceWith("<div id='divForTA' class='divTextArea'>" + $('#textArea').val().replace(/\n/g, "<br>") + "</div>");
var el = document.querySelector("#container");
html2canvas(el).then(canvas => {
    canvas.toDataURL();
    $('#divForTA').replaceWith(oldTextArea);
});

所以基本上你用“div”替换你的textArea，一旦画布被渲染为图像，你将新创建的“div”恢复为“textArea”

您可以使用“id”为“div”添加边框，使其看起来像“textarea”，如下所示：

 #divForTA {
     border: solid 1px lightgrey;
 }

我建议在 github html2canvas 问题中发表评论，以便在某些时候修复 https://github.com/niklasvh/html2canvas/issues/2008

希望这会对某人有所帮助:-)

Answer 4

html2canvas 中存在竞争条件。 试试这个：

  setTimeout(() => {
    canvas = html2canvas(element, {scale:1});
  }, 0)