devbox
Monodyee
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

uni保存canvas图片_中文汉字注音，汉字转拼音，支持图片识别文字，支持结果转图下载，附上小程序核心源码...

作者：Monodyee | 2024-04-21 02:36:05

赞

踩

uniapp怎么canvas转换成打印机可以识别的字符串

“文字注音”小程序在微信、字节跳动、支付宝、QQ等小程序平台同步上线，微信、头条、抖音、支付宝、QQ中搜索“文字注音”即可获得。

一、功能

汉字转拼音，支持图片识别文字，支持结果转图下载。该款小程序能够轻松将文字注音后输出，无需授权，无需注册，即来即用。你还可以用它来识别图片中的文字后注音，或者随时拍照后识别文字再注音。同时支持注音完成后复制拼音，支持将结果保存成图片下载到手机本地。欢迎扫描下面的各平台得小程序码来尝试一下。

5e3696e097ff57164e6b5fdc1d878706.png

9a6c9431ae98c370b005ea4e8024bedd.png

二、平台小程序码

359e39b474ea1ab704ebf74de91a1fc1.png

三、核心源码：

原文链接：

中文汉字注音，汉字转拼音，支持图片识别文字，支持结果转图下载，附上小程序核心源码 | 文思齐远 | 分享你我他​www.i847.cn
ca586ab0b2906c7d9a9e19b49a85b9c3.png 
  1. <template>
  2. 	<view class="content" style="width:100%">
  3. 		<view class="uni-textarea" style="width: 95%;margin: 0 auto;">
  4. 			<textarea v-if="status==0" :value="value" @input="valueChange" :style="{'height':textareaHeight+'px'}"
  5. 			 placeholder="请在这里输入或者粘贴文字，支持上传图片自动识别文字，支持中文注音。" maxlength="-1" adjust-position="{{keyUp}}"
  6. 			  @focus="focusTextarea" @blur="blurTextarea" />
  7.  
  8. 			<view v-if="status==1" :style="{'height':resultHeight+'px','width': '100%','overflow-y': 'scroll'}" id="result">
  9. 				<view class="uni-row" style="padding: 9px 2%;font-size: 14px;text-align: center;">
  10. 					<view v-for="(item,i) in list" v-if="item.pinyin!='enter'" v-bind:key="i" class="uni-flex uni-column" style="float: left;margin: 3px;">
  11. 						 <view class="flex-item" style="min-width: 1px;">{{item.pinyin}}</view>
  12. 						 <view class="flex-item">{{item.value}}</view>
  13. 					</view>
  14. 					<view v-else style="clear: both;"></view>
  15. 				</view>
  16. 			</view>
  17. 		</view>
  18. 		<view style="position: fixed;bottom: 15px;width: 100%;">
  19. 			<view v-if="status==0" style="width: 92%;margin: 0 auto;margin-bottom: 10px;font-size: 16px;color: #6495ED;">
  20. 				<text style="cursor: pointer;" @tap="fromImg('album')">图片识别</text>
  21. 				<text style="cursor: pointer;margin-left: 10px;" @tap="fromImg('camera')">拍照识别</text>
  22. 				<text style="font-size: 12px;color: #B2B2B2;">（上传图片不宜过大）</text>
  23. 			</view>
  24. 		
  25. 			<view class="uni-flex uni-row" style="width: 92%;margin: 0 auto;">
  26. 				<view v-if="status==0" class="flex-item" style="width: 70%;">
  27. 					<button type="primary" style="width: 99%;float: left;" @tap="zhuyin()">注音</button>
  28. 				</view>
  29. 				
  30. 				<view v-if="status==1" class="flex-item" style="width: 35%;">
  31. 					<button type="primary" style="width: 99%;float: left;" @tap="copy()">复制</button>
  32. 				</view>
  33. 				
  34. 				<view v-if="status==1" class="flex-item" style="width: 35%;">
  35. 					<button type="primary" style="width: 99%;float: right;" :loading="down" :disabled="down" @tap="save()">下载</button>
  36. 				</view>
  37. 				
  38. 			    <view class="flex-item"  style="width: 30%;">
  39. 			    	<button type="default" style="width: 90%;float: right;" @tap="reset()">清空</button>
  40. 			    </view>
  41. 				<view style="clear: both;"></view>
  42. 			</view>
  43. 		</view>
  44. 		<canvas canvas-id="canvas" :style="{'z-index': '-1','position': 'absolute','top': '0px','left': '0px','width': canvasWidth + 'px','height': canvasHeight + 'px'}" v-if="showCanvas"></canvas>
  45. 	</view>
  46. </template>
  47.  
  48. <script>
  49. 	var bopomofo = require('../../static/bopomofo.min.js');
  50. 	export default {
  51. 		data() {
  52. 			return {
  53. 				value: '',
  54. 				status: 0,
  55. 				list:[] ,
  56. 				textareaHeight: 0,
  57. 				resultHeight: 0,
  58. 				baiduToken: {},
  59. 				showCanvas: false,
  60. 				down:false,
  61. 				canvasWidth:0,
  62. 				canvasHeight:0,
  63. 				pixelRatio :1,
  64. 				textareaStaticHeight:0,
  65. 				canvasStaticHeight:0,
  66. 				keyUp:false,
  67. 			}
  68. 		},
  69. 		onLoad() {
  70. 			this.reset();
  71. 		},
  72. 		onReady(){
  73. 			var _that = this;
  74. 			uni.getSystemInfo({
  75. 			    success: function (res) {
  76. 					var windowHeight = res.windowHeight;
  77. 					_that.textareaHeight = windowHeight - 115;
  78. 					_that.textareaStaticHeight = windowHeight - 115;
  79. 					_that.resultHeight = windowHeight - 70;
  80. 					_that.canvasWidth = res.windowWidth;
  81. 					_that.canvasHeight = res.windowHeight * 10;
  82. 					_that.canvasStaticHeight = res.windowHeight * 10;
  83. 					_that.pixelRatio = res.pixelRatio;
  84. 			    }
  85. 			});
  86. 			uni.getStorage({
  87. 			    key: 'baiduToken',
  88. 			    success: function (res) {
  89. 			        _that.baiduToken = res.data;
  90. 					var now =  new Date().getTime();
  91. 					if(!_that.baiduToken || now > _that.baiduToken.expires){
  92. 						_that.getBaiduToken();
  93. 					}
  94. 			    },
  95. 				fail:function(e) {
  96. 					_that.getBaiduToken();
  97. 				}
  98. 			});
  99. 			uni.showShareMenu();
  100. 		},
  101. 		methods: {
  102. 			focusTextarea:function(e){
  103. 				this.textareaHeight = 100;
  104. 			},
  105. 			blurTextarea:function(e){
  106. 				this.textareaHeight = this.textareaStaticHeight;
  107. 			},
  108. 			save:function(){
  109. 				var _that = this;
  110. 				_that.down = true;
  111. 				//先设置canvas得高度
  112. 				_that.canvasHeight = _that.canvasStaticHeight;
  113. 				_that.showCanvas = true;
  114. 				setTimeout(function(){
  115. 					var ctx = uni.createCanvasContext("canvas",_that);
  116. 					ctx.rect(0, 0, _that.canvasWidth, _that.canvasHeight);
  117. 					ctx.setFillStyle('white');
  118. 					ctx.fill();
  119. 					ctx.setFillStyle('black');
  120. 					// 字体大小
  121. 					ctx.setFontSize(14);
  122. 					var fontHeight = 14;
  123. 					// 宽度
  124. 					var width = _that.canvasWidth;
  125. 					// 横向间隔
  126. 					var transverse = 9;
  127. 					// 纵向小间隔
  128. 					var portraitSmall = 4;
  129. 					// 纵向大间隔
  130. 					var portraitBig = 7;
  131. 					// 外间距
  132. 					var padding = 20;
  133. 					// 横向距离累计
  134. 					var transverseCumulative = padding;
  135. 					// 纵向距离累计
  136. 					var portraitCumulative  = padding;
  137. 					var lineHeight = portraitSmall  + portraitBig + (fontHeight*2);
  138. 					for(var i=0;i<_that.list.length;i++){
  139. 						// canvas高度变化
  140. 						if(i==0){
  141. 							_that.canvasHeight = portraitCumulative + lineHeight;
  142. 							setTimeout(function(){},10);
  143. 						}
  144. 						var item = _that.list[i];
  145. 						var metrics = ctx.measureText(item.pinyin);
  146. 						var tempX = transverseCumulative + transverse + metrics.width;
  147. 						if(tempX > (width-padding) || item.pinyin=="enter"){
  148. 							transverseCumulative = padding;
  149. 							portraitCumulative = portraitCumulative + lineHeight;
  150. 							_that.canvasHeight = portraitCumulative + lineHeight;
  151. 							setTimeout(function(){},10);
  152. 						}
  153. 						if(item.pinyin!="enter"){
  154. 							var x1;
  155. 							if(transverseCumulative==padding){
  156. 								x1 = transverseCumulative;
  157. 							}else{
  158. 								x1 = transverseCumulative + transverse;
  159. 							}
  160. 							var y1 = portraitCumulative;
  161. 							ctx.fillText(item.pinyin, x1, y1);
  162. 							var x2 = x1;
  163. 							var y2 = y1 + portraitSmall + fontHeight;
  164. 							ctx.fillText(item.value,x2, y2);
  165. 							transverseCumulative = x1 + metrics.width;
  166. 						}
  167. 					}
  168. 					ctx.draw();
  169. 					setTimeout(function(){
  170. 						uni.canvasToTempFilePath({
  171. 						  width: _that.canvasWidth,
  172. 						  height:  _that.canvasHeight,
  173. 						  destWidth: _that.canvasWidth * _that.pixelRatio,
  174. 						  destHeight:  _that.canvasHeight * _that.pixelRatio,
  175. 						  canvasId: 'canvas',
  176. 						  success: function(res) {
  177. 							uni.saveImageToPhotosAlbum({
  178. 								filePath: res.tempFilePath,
  179. 								success:function(){
  180. 									uni.showToast({
  181. 										title:"保存成功"
  182. 									})
  183. 								},
  184. 								complete:function(){
  185. 									_that.showCanvas = false;
  186. 									_that.down = false;
  187. 								}
  188. 							});
  189. 						  },
  190. 						  fail:function(e){
  191. 							  console.log(e);
  192. 						  	_that.showCanvas = false;
  193. 						  	_that.down = false;
  194. 						  }
  195. 						})
  196. 					},100);
  197. 				},100);
  198. 			},
  199. 			getBaiduToken:function(){
  200. 				var _that = this;
  201. 				var now =  new Date().getTime();
  202. 				uni.request({
  203. 				    url: 'https://aip.baidubce.com/oauth/2.0/token', 
  204. 					method: 'GET',
  205. 				    data: {
  206. 				        grant_type: 'client_credentials',
  207. 						client_id: '',
  208. 						client_secret: '',
  209. 				    },
  210. 				    success: (res) => {
  211. 				        _that.baiduToken = {
  212. 							access_token:res.data.access_token,
  213. 							expires:(res.data.expires_in * 1000 + now - 24 * 60 * 60 * 1000)
  214. 						}
  215. 						uni.setStorage({
  216. 						    key: 'baiduToken',
  217. 						    data: _that.baiduToken,
  218. 						    success: function () {
  219. 						        
  220. 						    }
  221. 						});
  222. 				    }
  223. 				});
  224. 			},
  225. 			fromImg:function(type){
  226. 				var _that = this;
  227. 				uni.chooseImage({
  228. 				    count: 1, 
  229. 					sourceType: [type],
  230. 				    success: function (res) {
  231. 						uni.getFileSystemManager().readFile({
  232. 							filePath: res.tempFilePaths[0], 
  233. 							encoding: 'base64', 
  234. 							success: res => { 
  235. 								var base64 = res.data;
  236. 								uni.showLoading({
  237. 								    title: '上传中...',
  238. 									mask:true
  239. 								});
  240. 								uni.request({
  241. 								    url: 'https://aip.baidubce.com/rest/2.0/ocr/v1/general_basic', 
  242. 									method: 'POST',
  243. 								    header: {
  244. 										'Content-Type': 'application/x-www-form-urlencoded'
  245. 									},
  246. 								    data: {
  247. 								        access_token: _that.baiduToken.access_token,
  248. 										image: encodeURI(base64),
  249. 										detect_direction: true
  250. 								    },
  251. 								    success: (res) => {
  252. 										uni.hideLoading();
  253. 										if(res.data){
  254. 											var value = '';
  255. 											for(var i=0;i<res.data.words_result_num;i++){
  256. 												value += res.data.words_result[i].words + "n";
  257. 											}
  258. 											_that.value = value;
  259. 										}
  260. 								    }
  261. 								});
  262. 								
  263. 							},fail: (e) => {
  264. 								console.log(e);
  265. 							}
  266. 						})
  267. 				    }
  268. 				});
  269. 			},
  270. 			copy:function(){
  271. 				if(this.list.length>0){
  272. 					var data = "";
  273. 					for(var i=0;i<this.list.length;i++){
  274. 						if(this.list[i].pinyin=="　"){
  275. 							data += this.list[i].value;
  276. 						}else if(this.list[i].pinyin=="enter"){
  277. 							data += "n";
  278. 						}else{
  279. 							data += this.list[i].pinyin + " ";
  280. 						}
  281. 					}
  282. 					uni.setClipboardData({
  283. 					    data: data,
  284. 					    success: function () {
  285. 					        uni.showToast({
  286. 					            title: '复制成功',
  287. 					            duration: 2000
  288. 					        });
  289. 					    }
  290. 					});
  291. 				}
  292. 			},
  293. 			zhuyin:function(){
  294. 				var _that = this;
  295. 				if(this.value!=''){
  296. 					// 敏感词过滤
  297. 					uni.request({
  298. 					    url: 'https://aip.baidubce.com/rest/2.0/solution/v1/text_censor/v2/user_defined', 
  299. 						method: 'POST',
  300. 					    header: {
  301. 							'Content-Type': 'application/x-www-form-urlencoded'
  302. 						},
  303. 					    data: {
  304. 					        access_token: _that.baiduToken.access_token,
  305. 							text: _that.value,
  306. 					    },
  307. 					    success: (res) => {
  308. 							if(res.data.conclusionType == 1){
  309. 								_that.zhuyinDo();
  310. 							}else{
  311. 								var checkList = res.data.data;
  312. 								var content = "";
  313. 								for(var i=0;i<checkList.length;i++){
  314. 									var checkItem = checkList[i];
  315. 									content += (i+1) + "、" + checkItem.msg.replace("不合规","的字词") + "n";
  316. 								}
  317. 								uni.showModal({
  318. 									title: "请删除后重试",
  319. 									content: content,
  320. 									showCancel: false
  321. 								})
  322. 								console.log(res.data);
  323. 							}
  324. 					    }
  325. 					});
  326. 				}
  327. 			},
  328. 			zhuyinDo:function(){
  329. 				var arr = this.value.split('');
  330. 				for(var i=0;i<arr.length;i++){
  331. 					var cur = arr[i];
  332. 					if(cur=="n" || cur=="↵"){
  333. 						this.list.push({
  334. 							value: "enter",
  335. 							pinyin: "enter"
  336. 						});
  337. 					}
  338. 					if(this.isChinese(cur)){
  339. 						var pinyin = bopomofo.pinyin(cur);
  340. 						if(pinyin==cur || pinyin=='null'){
  341. 							pinyin="　";
  342. 						}
  343. 						var tmp = {
  344. 							value: cur,
  345. 							pinyin: pinyin
  346. 						}
  347. 						this.list.push(tmp);
  348. 					}
  349. 				}
  350. 				this.status = 1;
  351. 				this.value = "";
  352. 			},
  353. 			reset:function(){
  354. 				this.value = "";
  355. 				this.status = 0;
  356. 				this.list = [];
  357. 				this.showCanvas = false;
  358. 				this.down = false;
  359. 			},
  360. 			valueChange:function(e){
  361. 				this.value = e.detail.value;
  362. 			},
  363. 			isChinese:function(value){
  364. 				if (escape(value).indexOf( "%u" )<0) {
  365. 					return false;
  366. 				}
  367. 				return true;
  368. 			}
  369. 		}
  370. 	}
  371. </script>
  372.  
  373. <style>
  374. 	@import "../../static/uni.css";  
  375. </style>
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/460621
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号