Tuyệt chiêu thần thánh: chuyển đổi hình ảnh sang text bằng JavaScript
- Tram Ho
Hôm nay mình sẽ giới thiệu với mọi người cách chuyển đổi hình ảnh sang text bằng JavaScript. Và demo sẽ như sau:
Chuyển ảnh sang text:
Chuyển video sang text:
Dưới đây là source code mình tìm được của bạn Ruanyu Jian:
Phần HTML lần lượt của việc chuyển từ ảnh sang text và chuyển từ video sang 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> |
Và đây là phần chính của thuật toán, 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; } |
Chỉ với vài đoạn code bạn đã có thể gây ấn tượng bằng cách chuyển hình avatar của mình sang text. Hy vọng anh em sẽ thích bài này.
Nguồn bài viết : Techtalk