Great divine moves: convert images into text using JavaScript
- Tram Ho
Today I will show everyone how to convert images into text using JavaScript. And the demo will look like this:
Convert image to text:
Convert video to text:
Below is the source code you found Ruanyu Jian :
The HTML part of turning from image to text in turn and converting from video to text
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Char Picture</title> <style> #show{ font-family: Courier New; font-size: 10px; line-height: 8px; } </style> <script src="2.js"></script> </head> <body> <input type="file" id="file"><button type="button" onclick="showImage()">Tạo</button><br> <img src="" style="width: 100px"/> <pre id="show"></pre> <script> var map=getCharsMap(),show=document.getElementById("show"), img=document.getElementsByTagName("img")[0], canvas = document.createElement("canvas"); function showImage(){ var file = document.getElementById('file').files[0], ctx = canvas.getContext('2d'), url = URL.createObjectURL(file); if(!file){ alert("Vui lòng chọn tệp tin"); } img.src = url; img.onload=function(){ canvas.width=img.naturalWidth; canvas.height=img.naturalHeight; ctx.drawImage(img, 0, 0, canvas.width, canvas.height); show.innerText=toChars(ctx,canvas.width,canvas.height,100); } } </script> </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 | <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/> <title>Char Video</title> <style> html, body { width: 100%; } video { margin: auto; position: relative; top: 0; left: 0; width: 20%; height: 20%; } #stage { margin: auto; position: absolute; top: 0; left: 20%; right: 0; width: 80%; font-family: Courier New; font-size: 16px; line-height: 10px; } #stage img { width: 100%; height: 100%; } </style> <script src="2.js"></script> </head> <body> <input type="file" id="file"> <button id="play" type="button" onclick="play()">Tạo</button> <br> <video controls="controls"> </video> <!--<div id="stage"></div>--> <pre id="stage"></pre> <script type="text/javascript"> var interval, video = document.getElementsByTagName("video")[0], stage = document.getElementById("stage"), canvas = document.createElement("canvas"), captureImage = function () { var ctx; canvas.width = video.videoWidth; canvas.height = video.videoHeight; if (canvas.width) { ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(video, 0, 0, canvas.width, canvas.height); stage.innerText = toChars(ctx, canvas.width, canvas.height, 100); } }, beginCapture = function () { interval = setInterval(function () { captureImage(1) }, 100); }, endCapture = function () { if (interval) { clearInterval(interval); } }, play = function () { var file = document.getElementById('file').files[0]; var url = URL.createObjectURL(file); if (!file) { alert("Chọn tệp tin"); } console.log(url); video.src = url; video.play(); }; video.addEventListener("play", beginCapture); video.addEventListener("pause", endCapture); video.addEventListener("ended", endCapture); video.addEventListener("playing", function () { endCapture(); beginCapture(); }); </script> </body> </html> |
And this is the main part of the algorithm, JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | /** * Created by Ruanyu Jian */ var map=getCharsMap(); /* * Chuyển hình ảnh thành text */ function toChars(context, width, height, rowChars) { var pixels = [], output = "", imageData = context.getImageData(0, 0, width, height), rowChars = width < rowChars ? width : rowChars, char_h = width / rowChars, char_w = char_h, rows = height / char_h, cols = rowChars, getBlockGray = function (x, y, w, h) { var sumGray = 0, pixels; for (var row = 0; row < w; row++) { for (var col = 0; col < h; col++) { var cx = x + col, cy = y + row, index = (cy * imageData.width + cx) * 4, data = imageData.data, R = data[index], G = data[index + 1], B = data[index + 2], gray = ~~(R * 0.3 + G * 0.59 + B * 0.11); sumGray += gray; } } pixels = w * h; return ~~(sumGray / pixels); }; for (var r = 0; r < rows; r++) { for (var c = 0; c < cols; c++) { var pos_x = ~~(c * char_h), pos_y = ~~(r * char_h), avg = getBlockGray(pos_x, pos_y, ~~char_w, ~~char_h), ch = map[avg]; output += ch; } output += 'rn'; } ; return output; } function getCharsMap() { var chars = ['@', 'w', '#', '$', 'k', 'd', 't', 'j', 'i', '.', ' ']; var step = 25, map = {}; for (var i = 0; i < 256; i++) { var index = ~~(i / 25) map[i] = chars[index]; } ; return map; } |
With only a few code you can impress by converting your avatar image to text. Hope you will like this post.
Source : Techtalk