Форум

new_boy · #1 (**permalink**) 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 · #2 (**permalink**) 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 · #3 (**permalink**) 23.12.2016, 14:37

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

Форум

Справочник

Discord чат

Курсы javascript