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

【问题标题】：Adjust canvas size relative to text size相对于文本大小调整画布大小
【发布时间】：2019-07-22 02:18:31
【问题描述】：

在我的 AngularJS 应用程序中，我必须生成文本图像，为此，我使用隐藏的画布元素，然后将图像值附加到 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。另外，请参阅文本下方的长高度（空白）。

我希望画布高度是文本的高度。
另外，画布的宽度就是文本的宽度。

如何通过更改文本长度或大小来动态更改画布大小？

【问题讨论】：

标签： javascript angularjs canvas

【解决方案1】：

使用https://github.com/vincent7128/text-image插件从文本生成图像。

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

【讨论】：