当前功能的运用场景是:用户需要传文件给他人,在用户选择文件之后需要显示一个文件图标和所选文件的名称。

当前代码部分是摘自网上,但是已经忘记在什么地方获取的,如有侵权联系小弟后自当删除。

注意:必须在html页面里面内置一个canvas

class Text2Img {

    //当前画布的ID
    private static CanvasId: string = "canvas";

    //设置画布ID
    public static SetCanvasId(id: string) {
        this.CanvasId = id;
    }

    //文字字号
    public static FontSize: number = 12;

    //空白的高度
    public static BlankHeight: number = 60;

    static reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");

    //判断是否是汉字
    static CheckChinese(val): any {
        return this.reg.test(val);
    }

    /*转换成图片*/
    public static ToImg(txt: string) {
        var len = txt.length;
        //英文和中文的文字数目
        let chinese = 0, let english = 0;
        for (var j = 0; j < txt.length; j++)
            this.CheckChinese(txt[j]) ? chinese++ : english++;

        var canvas = document.getElementById(Text2Img.CanvasId);
        canvas.width = Text2Img.FontSize * chinese * 1.5 + Text2Img.FontSize * english / 2;
        canvas.height = Text2Img.FontSize * (3 / 2) * (Math.ceil(txt.length / len) + txt.split(\'\n\').length - 1) + Text2Img.BlankHeight;


        var context = canvas.getContext(\'2d\');
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.fillStyle = "#000";
        context.font = \'normal \' + Text2Img.FontSize + \'px 微软雅黑\';
        context.textBaseline = \'top\';
        //canvas.style.display = \'none\';

        var i = 0;
        function fillTxt(text) {
            while (text.length > len) {
                var txtLine = text.substring(0, len);
                text = text.substring(len);
                context.fillText(txtLine, 0, Text2Img.FontSize * (3 / 2) * i++, canvas.width);
            }
            context.fillText(text, 0, (Text2Img.BlankHeight - 10) + Text2Img.FontSize * (3 / 2) * i, canvas.width);
        }

        var txtArray = txt.split(\'\n\');
        for (var j = 0; j < txtArray.length; j++) {
            fillTxt(txtArray[j]);
            context.fillText(\'\n\', 0, Text2Img.FontSize * (3 / 2) * i++, canvas.width);
        }
        //var imageData = context.getImageData(0, 0, canvas.width, canvas.height);

        //返回一个base64图片地址和图片的长度
        return {
            Url: canvas.toDataURL("image/png"),
            ImageWidth: canvas.width,
            ImageHeight: canvas.height
        };
    }
}

  

版权声明:本文为kimbosung原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/kimbosung/p/7085216.html