HTML5 ASCII आर्ट जेनरेटर

शाम हो चुकी थी, कुछ करने को नहीं था

समस्या का बयान

• मूल छवि को लोड करने के दो तरीके हैं: फ़ाइल चयन फ़ील्ड के माध्यम से और एक विशेष क्षेत्र में खींचकर (इसके बाद हम "प्राप्त क्षेत्र" कहेंगे);
• जटिल सेटिंग्स की कमी। केवल सबसे आवश्यक: पृष्ठभूमि का रंग, पाठ का उपयोग और फ़ॉन्ट आकार;
• पारदर्शी पृष्ठभूमि के साथ छवियों को संसाधित करने की क्षमता;
• कार्य केवल ब्राउज़र में होना चाहिए, सर्वर तक पहुंच के बिना और पृष्ठ को फिर से लोड किए बिना।

<h2>Source image</h2> <div class="row"> <div class="source-image-area-out"> <!--     ( ) --> <div id="source-image-area"> Drop source image here... </div> </div> </div> <div class="row"> <!--     --> <label for="source-image-file" style="width: 150px">Or select this here:</label> <input type="file" id="source-image-file" /> </div> 

 <h2>Settings</h2> <div class="left"> <!--   --> <div class="row"> <label for="input-used-text">Used text:</label> <input type="text" id="input-used-text" value="B" /> </div> <!--   --> <div class="row"> <label for="input-font-size">Font size:</label> <input type="number" id="input-font-size" min="3" max="20" step="1" value="8" style="width: 65px" /> px </div> </div> <div class="right"> <!--   --> <div class="row"> <label for="input-background-color">Background:</label> <input type="color" id="input-background-color" /> </div> <!--   --> <div class="row"> <label for="input-background-transparent">Transparent:</label> <input type="checkbox" id="input-background-transparent" /> </div> </div> 

 <h2>Previews</h2> <!--   --> <div id="preview-result" class="left"> <img src="" id="image-result" alt="" /> </div> <!--   --> <div id="preview-source" class="right"> <img src="" id="image-source" alt="" /> </div> 

स्रोत छवि डाउनलोड करें

 //  ,      . var fileData = null; //      . var loadFromField = function(event) { loadFile(event.target.files[0]; }; //    “ ”. var loadFromArea = function(event) { event.stopPropagation(); event.preventDefault(); loadFile(event.dataTransfer.files[0]); }; //   dragover “ ”. var areaDragOverHandler = function(event) { event.stopPropagation(); event.preventDefault(); event.dataTransfer.dropEffect = "copy"; }; //   . //         fileData. var loadFile = function(file) { var reader = new FileReader(); reader.onload = function(data) { fileData = data.target.result; } reader.readAsDataURL(file); } //   . //     document.getElementById("source-image-file").addEventListener("change", loadFromField, false); //  “ ”. document.getElementById("source-image-area").addEventListener("drop", loadFromArea, false); document.getElementById("source-image-area").addeventListener("dragover", areaDragOverHandler, false); 

 var sourceImage = document.getElementById("mage-source"); sourceImage.src = fileData; 

सेटिंग्स

 var usedText = document.getElementById("input-used-text").value; var fontSize = document.getElementById("input-font-size").value; var backgroundColor = (document.getElementById("input-background-transparent").checked == true) ? "rgba(0,0,0,0)" : document.getElementById("input.background-color").value; 

छवि प्रसंस्करण

1. मूल छवि के बारे में डेटा प्राप्त करना। अधिक सटीक रूप से, हमें प्रत्येक पिक्सेल के रंग की आवश्यकता है;
2. किस कला के साथ वर्णों के आकार की गणना;
3. प्रत्येक प्रतीक के रंग और उसके रंग की गणना;
4. प्रत्यक्ष कला पीढ़ी;
5. एक छवि के रूप में कला की प्रस्तुति, ताकि उपयोगकर्ता अपने प्रयासों के फल को बचा सके।

स्रोत छवि डेटा पुनर्प्राप्त कर रहा है

 <canvas id="canvas"></canvas> 

 var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); canvas.width = sourceImage.width; canvas.height = sourceImage.height; context.drawImage(sourceImage, 0, 0); var sourseData = context.getImageData(0, 0, canvas.width, canvas.height).data; 

 var getPixelsGrid = function(source) { var res = []; for (var i = 0; i < source.length; i += 4) { var y = Math.floor(i / (canvas.width * 4)); var x = (i - (y * canvas.height * 4)) / 4; if (typeof res[x] === "undefined") { res[x] = []; } res[x][y] = { r: source+0], g: source[i+1], b: source[i+2], a: source[i+3] } } return res; } var pixelsGrid = getPixelsGrid(sourseData); 

चरित्र आकार

 var countUsedTextSize = function(symbol, size) { var block = document.createElement("span"); block.innerHTML = symbol; block.style.fontSize = size + "px"; block.style.fontFamily = "Monospace"; document.body.appendChild(block); var re = [(block.offsetWidth, Math.floor(block.offsetHeight * 0.8)] document.body.removeChild(block); return re; }; //   ,    . var size = countUsedTextSize(usedText[0], fontSize); var usedTextWidth = size[0] var usedTextHeight[1]; 

पात्रों की स्थिति और रंग की गणना

 var getAvgPixelsList = function(grid) { var res = []; var stepX = usedTextWidth; var stepY = usedTextHeight; var countStepsX = canvas.width / stepX; var countStepsY = canvas.height / stepY; for (var y = 0; y < countStepsY; y++) { for (var x = 0; x < countStepsX; x++) { res.push({ x: x * stepX, y: y * stepY, r: grid[x * stepX][y * stepY].r, g: grid[x * stepX][y * stepY].g, b: grid[x * stepX][y * stepY].b, a: grid[x * stepX][y * stepY].a }); } } return res; }; var avgPixelsList = getAvgPixelsList(pixelsGrid); 

 var nextUsedChart = 0; var getNextUsedChart = function() { var re = usedText.substring(nextUsedChart, nextUsedChart+1); nextUsedChart++; if(nextUsedChart == str.length) { nextUsedChart = 0; } return re; }; 

कला सृजन

 var getResultData = function(list) { //        . context.clearRect(0, 0, canvas.width, canvas.height); context.fillStyle = backgroundColor; context.fillRect(0, 0, canvas.width, canvas.height); //  . for (var i = 0; i < list.length; i++) { var px = list[i]; context.fillStyle = "rgba(" + px.r +", " + px.g + ", " + px.b + ", " + px.a + ")"; context.font = fontSize + "px Monospace"; context.fillText(getNextUsedChart(), px.x, px.y); } return canvas.toDataURL(); }; var resultData = getResultData(avgPixelsList); 

 var resultImage = document.getElementById("image-result"); resultimage.src = resultData; 

परिणाम

~ 150Kb

~ 750 केबी

लेकिन पारदर्शी पृष्ठभूमि के साथ ~ 300 केबी

• क्रोम में, एप्लिकेशन अन्य ब्राउज़रों की तुलना में कई गुना तेजी से काम करता है;
• जब एक बड़ी छवि प्रसंस्करण (1000x1000 से अधिक)। "मेमोरी से बाहर" संदेश के साथ टैब को मारते हुए, क्रोम इसे एक नई विंडो में खोलने से इनकार करता है। अन्य ब्राउज़रों में, यह धीरे-धीरे काम करता है। मुझे लगता है कि यह इस तथ्य के कारण है कि जब कोई छवि url के माध्यम से प्रेषित होती है, तो स्ट्रिंग बहुत लंबी होती है;

निष्कर्ष

• अब, यदि कोई उपयोगकर्ता एक पुराने ब्राउज़र के साथ लॉग इन करता है, तो एप्लिकेशन कुछ भी नहीं कहेगा, यह सिर्फ काम नहीं करेगा। उपयोग की जाने वाली तकनीकों का समर्थन करने के लिए एक परीक्षण जोड़ना आवश्यक है। उपयोगकर्ता इनपुट के सत्यापन को जोड़ना भी आवश्यक है;
• यदि मूल छवि का आकार प्रतीक के आकार का एक से अधिक नहीं है, तो खाली पट्टियाँ नीचे और दाईं ओर दिखाई देती हैं। इस समस्या को हल करना आवश्यक है।
• खैर, क्रॉस-ब्राउज़र संगतता। मुझे केवल क्रोमियम 25, क्रोम 27, फायरफॉक्स 21, ओपेरा 12 और आईफोन पर सफारी (मुझे संस्करण नहीं मिला) में जांचने का अवसर मिला। अन्य ब्राउज़रों में, आपको बग्स का परीक्षण करने और उन्हें ठीक करने की आवश्यकता है।