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属性。其默认值为'10px sans-serif'，并且此属性不支持'inherit'值_{（不同于direction）}。

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

var tCtx = document.getElementById('textCanvas').getContext('2d'),
    imageElem = document.getElementById('image');

document.getElementById('text').addEventListener('keyup', function (){
    // Set it before getting the size
    tCtx.font = '400 50px "Fredoka One script=all rev=2", "Adobe Blank"';
    // 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 = '400 50px "Fredoka One script=all rev=2", "Adobe Blank"';
    // 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>

Answer 2

与线路中断的变化

另一篇文章（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

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

2 个答案: