Отрегулируйте размер холста относительно размера текста

Question

В моем приложении AngularJS мне нужно сгенерировать текстовое изображение, и для этого я использую скрытый элемент canvas, а затем добавляю значение изображения в тег img.

Размер шрифта текста может быть изменен, и данные изображения должны обновляться одновременно.

Для этого я создал функцию javascript

$scope.updateTextLogo = function() {

        // Update canvas element
        var canvas = $scope.canvas;
        var ctx = canvas.ctx;
        var text = $scope.text;

        // Set canvas
        ctx.canvas.width = ctx.measureText(text.text).width;

        var font_string = '';
        // Add font size
        font_string += ' ' + text.size + 'px';

        ctx.font = font_string;
        ctx.fillStyle = '#ff00ff';
        ctx.fillText(logoText.text, 0, 10);

        // Convert data to image
        var imageElement = canvas.image;
        imageElement.src = ctx.canvas.toDataURL();

        document.getElementById('logoTextImgContainer').appendChild(imageElement);
    };

и вызываю функцию из ползунка

<slider class="slider-parent" ng-model="text.size" min="10" step="1" max="50" value="14" ng-change="updateTextLogo();"></slider>

Все работает нормально, но размер холста (ширина и высота) фиксируется при изменении размера шрифта.Выходные данные выглядят как

Текстовое содержимое: Hello World , размер шрифта 21px ,Кроме того, посмотрите большую высоту (пробел) под текстом.

1. Я хочу, чтобы высота холста была высотой текста.
2. Кроме того, ширинахолст должен быть шириной текста.

Как динамически изменить размер холста с изменением длины или размера текста?

Answer 1

Используется https://github.com/vincent7128/text-image плагин для создания изображения из текста.

Плагин также поддерживает настройку и специальные символы.