如何使用javascript将文本转换为具有字体样式的图像？

Question

我的代码成功将文本转换为图像，但无法转换为具有字体样式的图像。我该怎么做？

.................................................. ..................................................... ..................................................... ......

var tCtx = document.getElementById('textCanvas').getContext('2d'),
    imageElem = document.getElementById('image');

document.getElementById('text').addEventListener('keyup', function (){
    tCtx.canvas.width = tCtx.measureText(this.value).width;
    tCtx.fillText(this.value, 0, 10);
    imageElem.src = tCtx.canvas.toDataURL();
    console.log(imageElem.src);
}, false);

.xx{
    font-family: "Fredoka One script=all rev=2", "Adobe Blank";
    font-weight: 400;
    font-style: normal;
    font-size: 50px;
}

@font-face {
  font-family: 'Fredoka One script=all rev=2';
  font-style: normal;
  font-weight: 400;
  src:   url(https://fonts.gstatic.com/l/font?kit=k3kUo8kEI-tA1RRcTZGmTmHEG9St0C3d1om8Mz6slqBKRtvjzUJ6xAJaGHLTbv9tHVEq-h1ylCtXSeDBENILlzkfzUJOiM594gqLtnzccnJfhpQc-ZP_ud1_NbotCXKqzPs_SH7xk6cjQyW2echUD_r7vTfZ5gJBot49AddTHjLYLXysgiMDRZKV&skey=fac42792a60c2aba&v=v5) format('woff2');
}

canvas{
    border: 1px black solid;
}
#textCanvas{
    display: none;
}

<canvas class="xx" id='textCanvas' height=20></canvas>
<img id='image'>
<br>
<textarea id='text'></textarea>

Answer 1

有换行符的变化

这个其他帖子 (https://stackoverflow.com/a/12328759/3865092) 的变体也负责换行：

HTML：

<textarea id='atext' rows='5'>Transform all 
this different lines
into one single
image!</textarea>
<button id="generate">
Generate image
</button>
<br/>
<canvas id='aCanvas' height=200 width=200 style='display:none'></canvas>
<img id='image' style="background-color:red">

和javascript：

var ctx = document.getElementById('aCanvas').getContext('2d');
var imageElem = document.getElementById('image');
var atext = document.getElementById('atext');

document.getElementById('generate').addEventListener('click', function (){
 
    //split text into lines and find the longest one
  var lines = atext.value.split("\n");
  ctx.font = "30px Verdana"
  let longest = lines.reduce((r, e) => r.length < e.length ? e : r, "");
  ctx.canvas.width = ctx.measureText(longest).width + 90;
  ctx.font = "30px Verdana"
  for(var i=0; i<lines.length; i++){
        ctx.fillText(lines[i], 20, 40*i +40);
  }
  imageElem.src = ctx.canvas.toDataURL();
  console.log(imageElem.src);
}, false);

这里jsfiddle

Answer 2

您需要设置上下文的font 属性。它的默认值为'10px sans-serif'，该属性不支持'inherit'值_{（不像direction）}。

但是由于您正在调整画布的大小，因此您需要注意一点：设置画布的width 或height 属性将重置您的上下文的所有属性。所以，我们需要设置这个字体属性两次，在测量文本之前和设置画布大小之后。

另外，请注意，您可能应该等待字体加载完毕，使用 FontFaceSet API：

var tCtx = document.getElementById('textCanvas').getContext('2d'),
  imageElem = document.getElementById('image');

var font = '400 50px "Fredoka One script=all rev=2", "Adobe Blank"';

document.fonts.load(font)
  .then(function() {
    document.getElementById('text').addEventListener('keyup', function() {
      // Set it before getting the size
      tCtx.font = font
      // this will reset all our context's properties
      tCtx.canvas.width = tCtx.measureText(this.value).width;
      // so we need to set it again
      tCtx.font = font;
      // set the color only now
      tCtx.fillStyle = '#A0A';
      tCtx.fillText(this.value, 0, 50);
      imageElem.src = tCtx.canvas.toDataURL();
    }, false);
  });

.xx {
  font-family: "Fredoka One script=all rev=2", "Adobe Blank";
  font-weight: 400;
  font-style: normal;
  font-size: 50px;
}

@font-face {
  font-family: 'Fredoka One script=all rev=2';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/l/font?kit=k3kUo8kEI-tA1RRcTZGmTmHEG9St0C3d1om8Mz6slqBKRtvjzUJ6xAJaGHLTbv9tHVEq-h1ylCtXSeDBENILlzkfzUJOiM594gqLtnzccnJfhpQc-ZP_ud1_NbotCXKqzPs_SH7xk6cjQyW2echUD_r7vTfZ5gJBot49AddTHjLYLXysgiMDRZKV&skey=fac42792a60c2aba&v=v5) format('woff2');
}

canvas {
  border: 1px black solid;
}

#textCanvas {
  display: none;
}

<canvas class="xx" id='textCanvas' height=65></canvas>
<img id='image'>
<br>
<textarea id='text'></textarea>