преобразовать текст в изображение, используя отображение текста на холсте - PullRequest
Новая
       38

преобразовать текст в изображение, используя отображение текста на холсте

0 голосов
/ 01 апреля 2020

Я видел в нескольких случаях преобразование текста в изображения, но никто не упомянул, что если текст слишком длинный, то есть более 1000 слов, как я могу отобразить их в изображении с использованием размера шрифта 15px
мой HTML код 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
</head>
<body>
<div id="the_text"></div>
<button id="show_img_btn">Convert to Image</button>
<div id="show_img_here"></div>
</body>

мой код сценария 

window.onload=function(){
  $("#show_img_btn").on("click", function () {
    var canvas = document.createElement("canvas");
    canvas.width = 620;
    canvas.height = 80;
    var ctx = canvas.getContext('2d');
    ctx.font = "30px Arial";
    var text = $("#the_text").text();
    ctx.fillText(text,10,50);
    var img = document.createElement("img");
    img.src=canvas.toDataURL();
    $("#show_img_here").append(img);
    //$("body").append(canvas);
  });
};

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

1 Ответ

0 голосов
/ 01 апреля 2020

Создайте фиктивный элемент и примените тот же стиль, добавьте его в dom и получите его. на основании этого вы можете разделить текст. Полезный фрагмент приведен ниже.

// JS: 

function getDimen(text) {
    var div = document.getElementById("dummy");
    div.innerHTML = text
    var h = (div.clientHeight + 1) + "px";
    var w = (div.clientWidth + 1) + "px"
    return({ h, w })
}
console.log(getDimen("some text hi a a s a a s as a s as a s as a s as a s"))

// HTML

<div id="dummy"></div>

// CSS: 

#dummy {
    position: absolute;
    visibility: hidden;
    height: auto;
    width: auto;
    white-space: nowrap;

}
...