中⽂汉字注⾳，汉字转拼⾳，⽀持图⽚识别⽂字，⽀持结果转图下
载，附上⼩程序核⼼源码
“⽂字注⾳”在、头条、抖⾳、⽀付宝、QQ中搜索“⽂字注⾳”即可获得。
⼀、功能
汉字转拼⾳，⽀持图⽚识别⽂字，⽀持结果转图下载。该款⼩程序能够轻松将⽂字注⾳后输出，⽆需授权，⽆需注册，即来即⽤。你还可以⽤它来识别图⽚中的⽂字后注⾳，或者随时拍照后识别⽂字再注⾳。同时⽀持注⾳完成后复制拼⾳，⽀持将结果保存成图⽚下载到⼿机本地。欢迎扫描下⾯的各平台得⼩程序码来尝试⼀下。
|
1 |
2
⼆、平台⼩程序码
直接去搜索名字。
三、核⼼源码：
<template>
<view class="content" >
<view class="uni-textarea" >
<textarea v-if="status==0" :value="value" @input="valueChange" :
placeholder="请在这⾥输⼊或者粘贴⽂字，⽀持上传图⽚⾃动识别⽂字，⽀持中⽂注⾳。" maxlength="-1" adjust-position="{{keyUp}}"              @focus="focusTextarea" @blur="blurTextarea" />
<view v-if="status==1" : id="result">
<view class="uni-row" >
<view v-for="(item,i) in list" v-if="item.pinyin!='enter'" v-bind:key="i" class="uni-flex uni-column" >
<view class="flex-item" >{{item.pinyin}}</view>
<view class="flex-item">{{item.value}}</view>
</view>
<view v-else ></view>
</view>
</view>
</view>
</view>
<view >
<view v-if="status==0" >
<text @tap="fromImg('album')">图⽚识别</text>
<text @tap="fromImg('camera')">拍照识别</text>
<text >（上传图⽚不宜过⼤）</text>
</view>
<view class="uni-flex uni-row" >
<view v-if="status==0" class="flex-item" >
<button type="primary" @tap="zhuyin()">注⾳</button>
</view>
<view v-if="status==1" class="flex-item" >
<button type="primary" @tap="copy()">复制</button>
</view>
<view v-if="status==1" class="flex-item" >
<button type="primary" :loading="down" :disabled="down" @tap="save()">下载</button>
</view>
<view class="flex-item"  >
<button type="default" @tap="reset()">清空</button>
</view>
<view ></view>
</view>
</view>
<canvas canvas-id="canvas" : v-if="showCanvas"></c    </view>
</template>
<script>
var bopomofo = require('../../static/bopomofo.min.js');
export default {
data() {
return {
value: '',
status: 0,
list:[] ,
textareaHeight: 0,
resultHeight: 0,
baiduToken: {},
showCanvas: false,
down:false,
canvasWidth:0,
canvasHeight:0,
pixelRatio :1,
textareaStaticHeight:0,
canvasStaticHeight:0,
keyUp:false,
}
},
onLoad() {
},
onReady(){
var _that = this;
success: function (res) {
var windowHeight = res.windowHeight;
_areaHeight = windowHeight - 115;
_areaStaticHeight = windowHeight - 115;
_sultHeight = windowHeight - 70;
_that.canvasWidth = res.windowWidth;
_that.canvasHeight = res.windowHeight * 10;
_that.canvasStaticHeight = res.windowHeight * 10;
_that.pixelRatio = res.pixelRatio;
}
});
key: 'baiduToken',
success: function (res) {
success: function (res) {
_that.baiduToken = res.data;
var now =  new Date().getTime();
if(!_that.baiduToken || now > _pires){
_BaiduToken();
}
},
fail:function(e) {
_BaiduToken();
}
});
uni.showShareMenu();
},
methods: {
focusTextarea:function(e){
},
blurTextarea:function(e){
},
save:function(){
var _that = this;
_that.down = true;图片下载站源码
//先设置canvas得⾼度
_that.canvasHeight = _that.canvasStaticHeight;
_that.showCanvas = true;
setTimeout(function(){
var ctx = ateCanvasContext("canvas",_that);
<(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 = asureText(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;