相对于文本大小调整画布大小

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插件从文本生成图像。

该插件还支持自定义和特殊字符。