Текст в изображение
Всем привет, подскажите плз, как лучше реализовать решение с преобразованием текста в изображение? Дело в том, что необходим функционал, как на 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); Но это решение для одного текстового поля. А как быть с несколькими полями для ввода текста? Всем заранее спасибо!) |
Разделить предложение на слова и тем же самым 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>
|
Спасибо, пошел пробовать!)
|
| Часовой пояс GMT +3, время: 11:27. |