Hi!
This is a tutorial to convert an image to HTML pixel by pixel, with this you can analyze your image :)
first, you need some HTML
<!-- canvas need to be hidden, here you will load your image and take information about it --><canvasid="canvas"style="visibility: hidden;"></canvas><!-- here you will print your matrix of span tags, each of them with a single color --><divid="final-image"style="line-height: 7px;letter-spacing: -3px;"></div>now some javascript
constcanvas=document.getElementById("canvas");constctx=canvas.getContext("2d");constimgUrl="https://images.unsplash.com/photo-1549740425-5e9ed4d8cd34?ixid=MXwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8MXwzOTU0NTB8fGVufDB8fHw%3D&ixlib=rb-1.2.1&w=1000&q=80";constimg=newImage();constimgWidth=100;lethtml="";img.crossOrigin="Anonymous";img.onload=function(){canvas.width=imgWidth;canvas.height=(this.height*canvas.width)/this.width;ctx.drawImage(img,0,0,canvas.width,canvas.height);for(leti=0;i<canvas.height;i++){for(letj=0;j<canvas.width;j++){add(ctx.getImageData(j,i,1,1).data);}html+="<br />";}document.getElementById("final-image").innerHTML=html;canvas.parentNode.removeChild(canvas);};img.src=imgUrl;functionadd(c){html+=`<span>■</span>`;}with this code, you can print your image on text
Top comments(0)
Subscribe
Some comments may only be visible to logged-in visitors.Sign in to view all comments.
For further actions, you may consider blocking this person and/orreporting abuse
