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在一行中渲染textarea或输入框值，并修剪单词之间的多个空格。所以我通过将文本区域转换为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。

对于我来说，我收到一个错误消息，表明该选项在我下载的lib中不存在

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

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

{{ name.replace(" ", "&nbsp;") }}

也许会帮助那些也尝试过一切但仍无济于事的人....

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);
});

因此，基本上，您可以将“ textArea”替换为“ div”，并将画布渲染为图像后，将新创建的“ 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)

html2canvas删除多个空格和换行符

4 个答案: