Как преобразовать текст в изображение с помощью стиля шрифта с помощью JavaScript? - PullRequest
Новая
       7

Как преобразовать текст в изображение с помощью стиля шрифта с помощью JavaScript?

0 голосов
/ 18 октября 2018

Мой код успешно преобразует текст в изображение, но не может преобразовать его в изображение со стилем шрифта.Как я могу это сделать?

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

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>

1 Ответ

0 голосов
/ 18 октября 2018

Вам необходимо установить свойство контекста font .Его значение по умолчанию '10px sans-serif', и это свойство не поддерживает 'inherit' значение (в отличие от direction ) .

Но поскольку вы изменяете размер холста,есть кое-что, о чем вы должны знать: установка свойства width или height вашего холста сбросит все свойства вашего контекста.Итак, нам нужно установить это свойство шрифта дважды, перед измерением текста и после установки размера холста. 

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>
...