Language: JavaScript
APIs and elements: Canvas,file API
Read image pixel value, change to grayscale, according to screen settings, replace with text display
---
"Fu word":
Guess what the following is:
Jinji
Original:
Continue to guess:
The source code is very simple:
123<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;}8Input[type=Number ] {width:50px;}9</style>Ten One<body> A<div> -<p><input type= "file" id= ' FileInput ' accept= "image/*"/></p> -<p> theGrayscale range [Dark]: <input type= "number" min= "0" max= "255" value= ' 0 ' id= ' rgb1f '/> -- -<input type= "Number" maxlength= "3" value= ' id= ' rgb1t '/> - : +Alternate text: <input type= "Text" size= "1" maxlength= "1" value= ' 9 ' id= ' Rgb1s '/> -</p> +<p> AGrayscale range [normal color]:<input type= "number" min= "0" max= "255" value= ' + ' id= ' rgb2f '/> at- -<input type= "Number" maxlength= "3" value= ' "id= ' rgb2t '/> - : -Alternate text: <input type= "Text" size= "1" maxlength= "1" value= ' 0 ' id= ' rgb2s '/> -</p> -<p> inGrayscale range [Light]: <input type= "number" min= "0" max= "255" value= ' "id= -- to<input type= "Number" maxlength= "3" value= ' 255 ' id= ' rgb3t '/> + : -Alternate text: <input type= "Text" size= "1" maxlength= "1" value= ' 1 ' id= ' rgb3s '/> the</p> *<p> $A text transverse span <input type= "number" min= "0" max= "value= ' 2 ' id= ' WPX '/>Panax Notoginseng- -A text longitudinal span <input type= "number" min= "0" max= "value= ' 2 ' id= ' hpx '/> the</p> +</div> A<div><input type= "button" value= "Pic2str" onclick= "Pic2str ()"/></div> the<div></div> +<div><canvas style= "Display:none" id= ' canvas ' ></canvas></div> -<div id= ' pic2str ' ></div> $ $ -<script> - varHasFile =false; the$(function(){ - //bind file Change event to load the image fileWuyi varFileInput = document.getElementById ("FileInput"); theFileinput.addeventlistener (' Change ',function(event) { - varFile = Fileinput.files[0]; Wu varImageType =/^image\//; - if( !imagetype.test (File.type)) { AboutAlert (' File type ' ERROR: ' + File.type + ' (Image excepted) '); $ return; - } - varimg = document.getElementById ("img"); -Img.file =file; A //reading the contents of a file object + varReader =NewFileReader (); theReader.onload = (function(aimg) { - return function(e) { $AIMG.SRC =E.target.result; the$ ("#canvas"). CSS ({width:aimg.width+ ' px ', height:aimg.height+ ' px ')}); the$ ("#canvas"). attr (' width '), aimg.width); the$ ("#canvas"). attr (' height '), aimg.height); the varC=document.getelementbyid ("Canvas"); - varCtx=c.getcontext ("2d"); inCtx.drawimage (aimg,0,0); theHasFile =true; the }; About }) (IMG); the reader.readasdataurl (file); the},false); the }); + functionPic2str () { - varWPX = $ ("#wpx"). Val (); the varHPX = $ ("#hpx"). Val ();Bayi varRGB1F = $ ("#rgb1f"). Val (); the varRGB1T = $ ("#rgb1t"). Val (); the varRgb1s = $ ("#rgb1s"). Val (); - varRGB2F = $ ("#rgb2f"). Val (); - varRGB2T = $ ("#rgb2t"). Val (); the varRgb2s = $ ("#rgb2s"). Val (); the varrgb3f = $ ("#rgb3f"). Val (); the varRGB3T = $ ("#rgb3t"). Val (); the varRgb3s = $ ("#rgb3s"). Val (); - if(!hasFile) the return; the if(wpx== "| | hpx==") the return;94 varC=document.getelementbyid ("Canvas"); the varCtx=c.getcontext ("2d"); the varImgdata=ctx.getimagedata (0,0, c.width,c.height); the varWI = Math.floor (Imgdata.width/WPX);98 varhi = Math.floor (imgdata.height/hpx); About varStrrst = []; - for(vari = 0;i){101 varStrrow = "";102 for(varj = 0;j<wi;j++){103 varRgbavg = 0;104 for(varh=0;h){ the for(varl=0;l<wpx;l++){106 varmin = 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 varmax = Math.max (imgdata.data[(i*hpx+h) *4*imgdata.width+ (j*wpx*4+l)] the, 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]); theRgbavg + = (Min+max) *0.5;113 } the } theRgbavg = RGBAVG/(hpx*WPX); the if(rgbavg>=rgb1f && rgbavg<rgb1t) {117Strrow + = "+Rgb1s;118}Else if(rgbavg>=rgb2f && rgbavg<rgb2t) {119Strrow + = "+rgb2s; -}Else if(rgbavg>=rgb3f && rgbavg<=rgb3t) {121Strrow + = "+rgb3s;122}Else{123Strrow + = " ";124 } the }126 Strrst.push (strrow);127 } -strrsthtml = "";129 for(varx = 0;x<strrst.length;x++) theStrrsthtml + = strrst[x] + ' <br/> '131$ ("#pic2Str"). HTML (strrsthtml); the }133</script>134</body>135[Canvas,js,fileapi] picture to text
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
