javascript - 如何使用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

您需要设置上下文的 font属性(property)。它的默认值是'10px sans-serif'，并且这个属性不支持'inherit'值_{(不像direction)}。

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

另外，请注意，您可能应该使用 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>