Текст в изображение [Архив форума]

new_boy

23.12.2016, 12:42

Всем привет, подскажите плз, как лучше реализовать решение с преобразованием текста в изображение? Дело в том, что необходим функционал, как на http://dconvert.net/, только полей для ввода текста должно быть несколько, а на выходе - одно изображение.

Вопрос собственно заключается в том, что лучше использовать для данного решения? JS, Ajax или Imagick? И если на JS, то как это реализовать?

Я только учусь, пока получилось только так:

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, 125);
imageElem.src = tCtx.canvas.toDataURL();
console.log(imageElem.src);
}, false);

Но это решение для одного текстового поля. А как быть с несколькими полями для ввода текста?

Всем заранее спасибо!)

Malleys

23.12.2016, 13:18

Разделить предложение на слова и тем же самым measureText смотреть не слишком ли моного слов в строке

<!DOCTYPE HTML>
<html>
<body>
<style>

html {
height: 100%;
overflow: hidden;
}

body {
margin: 0;
background: linear-gradient(#e1e3e5, #f0f2f4);
}

textarea {
position: absolute;
background: transparent;
top: 50%;
left: 0;
right: 0;
outline: 0;
width: 100%;
height: 50%;
border: 0;
padding: 16px;
font: 16px Consolas;
max-width: 600px;
margin: auto;
background: linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}

</style>
<canvas id="myCanvas"></canvas>
<textarea id="textarea">Аппликатой точки A называется координата этой точки на оси OZ в прямоугольной трёхмерной системе координат. Величина аппликаты точки A равна длине отрезка OD (см. рисунок). Если точка D принадлежит положительной полуоси OZ, то аппликата имеет положительное значение. Если точка D принадлежит отрицательной полуоси OZ, то аппликата имеет отрицательное значение. Если точка A лежит на плоскости XOY, то её аппликата равна нулю. В прямоугольной системе координат ось OZ называется «осью аппликат». Обычно понятие аппликата встречается в теории функции комплексного переменного, где тригонометрические функции теряют периодичность. Поэтому вводится новая ось, называемая аппликатой, по которой откладывается модуль комплексного числа.</textarea>
<script>
(function() {
function wrapText(context, text, x, y, maxWidth, lineHeight) {
context.clearRect(0, 0, canvas.width, canvas.height);
var words = text.split(' ');
var line = '';

context.font = '16px Consolas';
context.fillStyle = '#333';

for(var n = 0; n < words.length; n++) {
var testLine = line + words[n] + ' ';
var metrics = context.measureText(testLine);
var testWidth = metrics.width;
if (testWidth > maxWidth && n > 0) {
context.fillText(line, x, y);
line = words[n] + ' ';
y += lineHeight;
}
else {
line = testLine;
}
}

context.fillText(line, x, y);
}

var canvas = document.getElementById('myCanvas');
var input = document.getElementById('textarea');
var context = canvas.getContext('2d');
var maxWidth = 400;
var lineHeight = 25;
var text = '';

function onResize() {
canvas.width = innerWidth;
canvas.height = innerHeight / 2;

maxWidth = Math.min(innerWidth, 600);
}

function onInput() {
text = input.value;
wrapText(context, text, (canvas.width - maxWidth) / 2, 60, maxWidth, lineHeight);
}

document.addEventListener("input", onInput);
addEventListener("resize", onResize);
addEventListener("resize", onInput);
onResize();onInput()
})();
</script>
</body>
</html>

new_boy

23.12.2016, 14:37

Спасибо, пошел пробовать!)