正文 

当前位置： 首页 > java > java语法

[canvas,js,fileapi]图片转文字

望边缘      2022-02-08     291

关键词：

语言:javascript

API及元素：canvas,file API

读取图片像素值，变化为灰度，根据画面设定，替换为文字显示

---

效果图【福字】：

猜猜下面是什么：

【金鸡】

原图：

继续猜猜：

源码非常简单：

  1 <html>
  2 <head>
  3 <title>pic2Str</title>
  4 <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
  5 <style>
  6 .floatLeft{float:left;}
  7 .clear{clear:both;}
  8 input[type=number]{width:50px;}
  9 </style>
 10 </head>
 11 <body>
 12 <div>
 13     <p><input type="file" id='fileInput' accept="image/*" /></p>
 14     <p>
 15         灰度范围 [深色] ：<input type="number" min="0" max="255" value='0' id='rgb1f' />
 16          - 
 17          <input type="number" maxlength="3" value='120' id='rgb1t' />
 18           : 
 19           替换文字：<input type="text" size="1" maxlength="1" value='9' id='rgb1s' />
 20     </p>
 21     <p>
 22         灰度范围[普通色]：<input type="number" min="0" max="255" value='120' id='rgb2f' />
 23          - 
 24          <input type="number" maxlength="3" value='200' id='rgb2t' />
 25           : 
 26           替换文字：<input type="text" size="1" maxlength="1" value='0' id='rgb2s' />
 27     </p>
 28     <p>
 29         灰度范围 [浅色] ：<input type="number" min="0" max="255" value='200' id='rgb3f' />
 30          - 
 31          <input type="number" maxlength="3" value='255' id='rgb3t' />
 32           : 
 33           替换文字：<input type="text" size="1" maxlength="1" value='1' id='rgb3s' />
 34     </p>
 35     <p>
 36         一文字横向跨度<input type="number" min="0" max="100" value='2' id='wpx' />
 37          - 
 38         一文字纵向跨度<input type="number" min="0" max="100" value='2' id='hpx' />
 39     </p>
 40 </div>
 41 <div><input type="button" value="pic2Str" onclick="pic2Str()" /></div>
 42 <div><img style="display:none" id='img' /></div>
 43 <div><canvas style="display:none" id='canvas' ></canvas></div>
 44 <div id='pic2Str'></div>
 45 
 46 
 47 <script>
 48 var hasFile = false;
 49 $(function(){
 50     // bind file change event to load the image file
 51     var fileInput = document.getElementById("fileInput");
 52     fileInput.addEventListener('change', function(event) {
 53         var file = fileInput.files[0];
 54         var imageType = /^image\//;
 55         if ( !imageType.test(file.type) ) {
 56             alert('file type error: ' + file.type +'(image excepted)');
 57             return;
 58         }
 59         var img = document.getElementById("img");
 60         img.file = file;
 61         // 读取File对象中的内容
 62         var reader = new FileReader();
 63         reader.onload = (function(aImg) { 
 64             return function(e) {
 65                 aImg.src = e.target.result; 
 66                 $("#canvas").css({width:aImg.width+'px',height:aImg.height+'px'});
 67                 $("#canvas").attr('width',aImg.width);
 68                 $("#canvas").attr('height',aImg.height);
 69                 var c=document.getElementById("canvas");
 70                 var ctx=c.getContext("2d");
 71                 ctx.drawImage(aImg,0,0);
 72                 hasFile = true;
 73             }; 
 74         })(img);
 75         reader.readAsDataURL(file);
 76     }, false);
 77 });
 78 function pic2Str(){
 79     var wpx = $("#wpx").val();
 80     var hpx = $("#hpx").val();
 81     var rgb1f = $("#rgb1f").val();
 82     var rgb1t = $("#rgb1t").val();
 83     var rgb1s = $("#rgb1s").val();
 84     var rgb2f = $("#rgb2f").val();
 85     var rgb2t = $("#rgb2t").val();
 86     var rgb2s = $("#rgb2s").val();
 87     var rgb3f = $("#rgb3f").val();
 88     var rgb3t = $("#rgb3t").val();
 89     var rgb3s = $("#rgb3s").val();
 90     if(!hasFile)
 91         return;
 92     if(wpx=='' || hpx=='')
 93         return;
 94     var c=document.getElementById("canvas");
 95     var ctx=c.getContext("2d");
 96     var imgData=ctx.getImageData(0,0,c.width,c.height);
 97     var wi = Math.floor( imgData.width / wpx);
 98     var hi = Math.floor( imgData.height / hpx);
 99     var strRst = [];
100     for(var i = 0;i<hi;i++){
101         var strRow = "";
102         for(var j = 0;j<wi;j++){
103             var rgbAvg = 0;
104             for(var h=0;h<hpx;h++){
105                 for(var l=0;l<wpx;l++){
106                     var min = Math.min(imgData.data[(i*hpx+h)*4*imgData.width+(j*wpx*4+l)]
107                         , imgData.data[(i*hpx+h)*4*imgData.width+(j*wpx*4+l)+1]
108                         , imgData.data[(i*hpx+h)*4*imgData.width+(j*wpx*4+l)+2]);
109                     var max = Math.max(imgData.data[(i*hpx+h)*4*imgData.width+(j*wpx*4+l)]
110                         , imgData.data[(i*hpx+h)*4*imgData.width+(j*wpx*4+l)+1]
111                         , imgData.data[(i*hpx+h)*4*imgData.width+(j*wpx*4+l)+2]);
112                     rgbAvg += (min+max)*0.5;
113                 }
114             }
115             rgbAvg = rgbAvg / (hpx*wpx);
116             if(rgbAvg>=rgb1f && rgbAvg<rgb1t){
117                 strRow += ''+ rgb1s;
118             }else if(rgbAvg>=rgb2f && rgbAvg<rgb2t){
119                 strRow += ''+rgb2s;
120             }else if(rgbAvg>=rgb3f && rgbAvg<=rgb3t){
121                 strRow += ''+rgb3s;
122             }else{
123                 strRow += "&nbsp;";
124             }
125         }
126         strRst.push(strRow);
127     }
128     strRstHtml = "";
129     for(var x = 0;x<strRst.length;x++)
130         strRstHtml += strRst[x] + '<br/>'
131     $("#pic2Str").html(strRstHtml);
132 }
133 </script>
134 </body>
135 </html>

 

canvas转图片中的文字自动换行(代码片段)

概述最近项目用到了canvas转图片，但是由于canvas对文字排版的支持非常弱，一般我们在canvas上画不同排版的文字（比如竖排文字）都是利用js计算横纵坐标，然后一个字一个字地画出来，今天无意中看到一个使用svg的方法，记录... 查看详情

vue图片上绘制文字(js图片上动态生成文字)

newTestImage(text) varcanvas=document.createElement("canvas") varcxt=canvas.getContext("2d") varimg=newImage() img.src 查看详情

vue图片上绘制文字(js图片上动态生成文字)

newTestImage(text) varcanvas=document.createElement("canvas") varcxt=canvas.getContext("2d") varimg=newImage() img.src 查看详情

vue图片上绘制文字(js图片上动态生成文字)

newTestImage(text) varcanvas=document.createElement("canvas") varcxt=canvas.getContext("2d") varimg=newImage() img.src 查看详情

vue+canvas图片加水印(代码片段)

思路：将两张图片绘制为一张目标：输入的文字，绘制到图片上，简单实现图片水印效果：输入的文字1:‘你猜猜’+图片2=图片3（不要看清除水印的按钮，本人垃圾没实现）   选择图片html　　<inputtype="file"id="... 查看详情

怎么把一个text文本转换成canvas对象

...到想屏蔽浏览器的翻译功能，使用这个方法将文字转成了图片，从而实现屏蔽翻译的功能源码：/*** js使用canvas将文字转换成图像数据base64* @param string    text              文字内容  "abc"* @param string    fontsize   ... 查看详情

html页面转成图片，并提供下载

（2）下载素材html2canvas.min.js下载地址：canvas2image.js下载地址：base64.js下载地址：（3）引入js    <script src="你的路径/html2canvas.min.js"></script>    <script s 查看详情

图片在canvas中显示，给canvas添加文字，文字描边，将canvas保存成图片下载到本地

  <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge"/><metaname="viewport"content="width=device-widt 查看详情

vue实现转图片打印

参考技术A首先安装两个插件npminstall--savehtml2canvasnpminstallprint-js--save1，设置打印区域ref2，引入插件转图片打印需要先安装html2Canvas和print-js3,js4,单纯的打印,与html2canvas不同的是，这里的printCons要设置为id而不是ref 查看详情

python实现文字转图片(代码片段)

文章目录一、需求二、实现文字转单个图片代码三、实现文字转配对图片代码一、需求目前想要将输入的文字，转为指定风格的图片，比如宋体、草体二、实现文字转单个图片代码importosimportpdbimportPILimportnumpyasnpfromPILimpor... 查看详情

文字图片化

...现类似现在网上流行的长微博生成器，就是把长文字转成图片。当然功能比不上网上流传的，不知道网上那些用的什么方法。我这是用的HTML5的Canvas特性，也算一种实现吧。   示例地址： TextToImage，仅作大家交流... 查看详情

为图片添加文字canvas

<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>无标题文档</title></head><body><canvasid=‘myCanvas‘>& 查看详情

canvas图片、文字模糊问题

...末尾遗留问题部分有详细解释说明。之前做了一个在线给图片添加文本框的工具，大体思路是先把图片加载到一个DOM结构中，然后通过html2canvas导出到一个canvas，最后通过canvas自带的toDataURL方法导出成图片。这个思路并不复杂，... 查看详情

安卓自定义view进阶-canvas之图片文字

Canvas之图片文字作者微博:@GcsSloop【本系列相关文章】在上一篇文章Canvas之画布操作中我们了解了画布的一些基本操作方法，本次了解一些绘制图片文字相关的内容。如果你对前几篇文章讲述的内容熟练掌握的话，那么... 查看详情

canvas文字自动换行圆角矩形画法生成图片手机长按保存(代码片段)

canvas的文字自动换行函数封装//str:要绘制的字符串//canvas:canvas对象//initX:绘制字符串起始x坐标//initY:绘制字符串起始y坐标//lineHeight:字行高，自己定义个值即可functioncanvasTextAutoLine(str,canvas,initX,initY,lineHeight)varctx=canvas.getContext("2d") 查看详情

canvas中的那些坑

年前做了一个合成图片的小工具，需求大体为：用户输入要在一整张大图片显示的文字、图片及它们所在大图的坐标，合成一张大图用来干啥干啥。做法当然是用canvas做的。canvas就不细说了，来说说他的坑吧。坑之一：输入的文... 查看详情

利用html5fileapi读取图片进行本地操作

...片的md5值可以确保唯一性。针对这个需求，可以使用HTML5fileapi来读取文件。实现方法如下：document.getElementById("file").addEventListener("ch 查看详情

canvas将图片转成base64格式以及验证图片是否透明(代码片段)

...mg=newImage();img.src=e.target.result;self.isAlphaBackground=false;//缩放图片需要的canvasvarcanvas=document.createElement(‘canvas‘);varcontext=canvas.getContext(‘2d‘);//base64地址图片加载完毕后img.onload=function()//图片原始尺寸varoriginWidth=this.width;varoriginHeight=... 查看详情