Chinese character phonetic notation, Chinese characters to pinyin, support image recognition text, support result transfer image download, attach small program core source code

The "Text Zhuyin" applet is simultaneously launched on WeChat, ByteDance, Alipay, QQ and other applet platforms. Search for "Text Zhuyin" in WeChat, Toutiao, Douyin, Alipay and QQ.

1. Function

Convert Chinese characters to Pinyin, support image recognition text, support result transfer to image download. This small program can easily output text after the phonetic notation, without authorization, without registration, just come and use. You can also use it to identify the text in the picture and then the phonetic notation, or at any time after taking a photo to recognize the text and then phoneticated. At the same time, it supports copying Pinyin after Zhuyin is completed, and supports saving the result as a picture and downloading it to the local phone. Welcome to scan the small program codes of each platform below to try it out.

2. Platform Mini Program Code

WeChat Mini Program	Douyin/Toutiao Mini Program	QQ applet

Three, the core source code:

Original link: https://www.i847.cn/article/3033.html

Part of the source code preview:

save:function(){
    var _that = this;
    _that.down = true;
    //先设置canvas得高度
    _that.canvasHeight = _that.canvasStaticHeight;
    _that.showCanvas = true;
    setTimeout(function(){
        var ctx = uni.createCanvasContext("canvas",_that);
        ctx.rect(0, 0, _that.canvasWidth, _that.canvasHeight);
        ctx.setFillStyle('white');
        ctx.fill();
        ctx.setFillStyle('black');
        // 字体大小
        ctx.setFontSize(14);
        var fontHeight = 14;
        // 宽度
        var width = _that.canvasWidth;
        // 横向间隔
        var transverse = 9;
        // 纵向小间隔
        var portraitSmall = 4;
        // 纵向大间隔
        var portraitBig = 7;
        // 外间距
        var padding = 20;
        // 横向距离累计
        var transverseCumulative = padding;
        // 纵向距离累计
        var portraitCumulative  = padding;
        var lineHeight = portraitSmall  + portraitBig + (fontHeight*2);
        for(var i=0;i<_that.list.length;i++){
            // canvas高度变化
            if(i==0){
                _that.canvasHeight = portraitCumulative + lineHeight;
                setTimeout(function(){},10);
            }
            var item = _that.list[i];
            var metrics = ctx.measureText(item.pinyin);
            var tempX = transverseCumulative + transverse + metrics.width;
            if(tempX > (width-padding) || item.pinyin=="enter"){
                transverseCumulative = padding;
                portraitCumulative = portraitCumulative + lineHeight;
                _that.canvasHeight = portraitCumulative + lineHeight;
                setTimeout(function(){},10);
            }
            if(item.pinyin!="enter"){
                var x1;
                if(transverseCumulative==padding){
                    x1 = transverseCumulative;
                }else{
                    x1 = transverseCumulative + transverse;
                }
                var y1 = portraitCumulative;
                ctx.fillText(item.pinyin, x1, y1);
                var x2 = x1;
                var y2 = y1 + portraitSmall + fontHeight;
                ctx.fillText(item.value,x2, y2);
                transverseCumulative = x1 + metrics.width;
            }
        }
        ctx.draw();
        setTimeout(function(){
            uni.canvasToTempFilePath({
                width: _that.canvasWidth,
                height:  _that.canvasHeight,
                destWidth: _that.canvasWidth * _that.pixelRatio,
                destHeight:  _that.canvasHeight * _that.pixelRatio,
                canvasId: 'canvas',
                success: function(res) {
                uni.saveImageToPhotosAlbum({
                    filePath: res.tempFilePath,
                    success:function(){
                        uni.showToast({
                            title:"保存成功"
                        })
                    },
                    complete:function(){
                        _that.showCanvas = false;
                        _that.down = false;
                    }
                });
                },
                fail:function(e){
                    console.log(e);
                _that.showCanvas = false;
                _that.down = false;
                }
            })
        },100);
    },100);
}