如何使用javascript将文本转换为具有字体样式的图像? [英] How to convert text to image with font style using javascript?

问题描述

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

My code converts text to image successfully, but cannot convert to image with font style. How can I do it?

.....................................……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………......

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

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>

推荐答案

您需要设置上下文的 font 属性.它的默认值为 '10px sans-serif'，并且该属性不支持 'inherit' 值 _{(与 direction)}.

You need to set your context's font property. Its default value is '10px sans-serif', and this property doesn't support 'inherit' value _{(unlike direction)}.

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

But since you are resizing your canvas, there is a little thing you need to be aware: setting either the width or height property of your canvas will reset all the properties of your context. So, we need to set this font property twice, before measure the text and after setting the canvas size.

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

Also, note that you should probably wait for your font has loaded, using the 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>

这篇关于如何使用javascript将文本转换为具有字体样式的图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！