index.js
function asciifyImage( canvasRenderer, oAscii ) {

		oCtx.clearRect( 0, 0, iWidth, iHeight );
		oCtx.drawImage( oCanvasImg, 0, 0, iWidth, iHeight );
		var oImgData = oCtx.getImageData( 0, 0, iWidth, iHeight ).data;

		// Coloring loop starts now
		var strChars = "";

		// console.time('rendering');

		for ( var y = 0; y < iHeight; y += 2 ) {

			for ( var x = 0; x < iWidth; x ++ ) {

				var iOffset = ( y * iWidth + x ) * 4;

				var iRed = oImgData[ iOffset ];
				var iGreen = oImgData[ iOffset + 1 ];
				var iBlue = oImgData[ iOffset + 2 ];
				var iAlpha = oImgData[ iOffset + 3 ];
				var iCharIdx;

				var fBrightness;

				fBrightness = ( 0.3 * iRed + 0.59 * iGreen + 0.11 * iBlue ) / 255;
				// fBrightness = (0.3*iRed + 0.5*iGreen + 0.3*iBlue) / 255;

				if ( iAlpha == 0 ) {

					// should calculate alpha instead, but quick hack :)
					//fBrightness *= (iAlpha / 255);
					fBrightness = 1;

				}

				iCharIdx = Math.floor( ( 1 - fBrightness ) * ( aCharList.length - 1 ) );

				if ( bInvert ) {

					iCharIdx = aCharList.length - iCharIdx - 1;

				}

				// good for debugging
				//fBrightness = Math.floor(fBrightness * 10);
				//strThisChar = fBrightness;

				var strThisChar = aCharList[ iCharIdx ];

				if ( strThisChar === undefined || strThisChar == " " )
					strThisChar = "&nbsp;";

				if ( bColor ) {

					strChars += "<span style='"
						+ "color:rgb(" + iRed + "," + iGreen + "," + iBlue + ");"
						+ ( bBlock ? "background-color:rgb(" + iRed + "," + iGreen + "," + iBlue + ");" : "" )
						+ ( bAlpha ? "opacity:" + ( iAlpha / 255 ) + ";" : "" )
						+ "'>" + strThisChar + "</span>";

				} else {

					strChars += strThisChar;

				}

			}
			strChars += "<br/>";

		}

		oAscii.innerHTML = "<tr><td>" + strChars + "</td></tr>";

		// console.timeEnd('rendering');

		// return oAscii;

	}
function asciifyImage( canvasRenderer, oAscii ) {

		oCtx.clearRect( 0, 0, iWidth, iHeight );
		oCtx.drawImage( oCanvasImg, 0, 0, iWidth, iHeight );
		var oImgData = oCtx.getImageData( 0, 0, iWidth, iHeight ).data;

		// Coloring loop starts now
		var strChars = "";

		// console.time('rendering');

		for ( var y = 0; y < iHeight; y += 2 ) {

			for ( var x = 0; x < iWidth; x ++ ) {

				var iOffset = ( y * iWidth + x ) * 4;

				var iRed = oImgData[ iOffset ];
				var iGreen = oImgData[ iOffset + 1 ];
				var iBlue = oImgData[ iOffset + 2 ];
				var iAlpha = oImgData[ iOffset + 3 ];
				var iCharIdx;

				var fBrightness;

				fBrightness = ( 0.3 * iRed + 0.59 * iGreen + 0.11 * iBlue ) / 255;
				// fBrightness = (0.3*iRed + 0.5*iGreen + 0.3*iBlue) / 255;

				if ( iAlpha == 0 ) {

					// should calculate alpha instead, but quick hack :)
					//fBrightness *= (iAlpha / 255);
					fBrightness = 1;

				}

				iCharIdx = Math.floor( ( 1 - fBrightness ) * ( aCharList.length - 1 ) );

				if ( bInvert ) {

					iCharIdx = aCharList.length - iCharIdx - 1;

				}

				// good for debugging
				//fBrightness = Math.floor(fBrightness * 10);
				//strThisChar = fBrightness;

				var strThisChar = aCharList[ iCharIdx ];

				if ( strThisChar === undefined || strThisChar == " " )
					strThisChar = "&nbsp;";

				if ( bColor ) {

					strChars += "<span style='"
						+ "color:rgb(" + iRed + "," + iGreen + "," + iBlue + ");"
						+ ( bBlock ? "background-color:rgb(" + iRed + "," + iGreen + "," + iBlue + ");" : "" )
						+ ( bAlpha ? "opacity:" + ( iAlpha / 255 ) + ";" : "" )
						+ "'>" + strThisChar + "</span>";

				} else {

					strChars += strThisChar;

				}

			}
			strChars += "<br/>";

		}

		oAscii.innerHTML = "<tr><td>" + strChars + "</td></tr>";

		// console.timeEnd('rendering');

		// return oAscii;

	}
function asciifyImage ( canvasRenderer , oAscii ) { oCtx . clearRect ( 0 , 0 , iWidth , iHeight ) ; oCtx . drawImage ( oCanvasImg , 0 , 0 , iWidth , iHeight ) ; var oImgData = oCtx . getImageData ( 0 , 0 , iWidth , iHeight ) . data ; // Coloring loop starts now var strChars = "" ; // console.time('rendering'); for ( var y = 0 ; y < iHeight ; y += 2 ) { for ( var x = 0 ; x < iWidth ; x ++ ) { var iOffset = ( y * iWidth + x ) * 4 ; var iRed = oImgData [ iOffset ] ; var iGreen = oImgData [ iOffset + 1 ] ; var iBlue = oImgData [ iOffset + 2 ] ; var iAlpha = oImgData [ iOffset + 3 ] ; var iCharIdx ; var fBrightness ; fBrightness = ( 0.3 * iRed + 0.59 * iGreen + 0.11 * iBlue ) / 255 ; // fBrightness = (0.3*iRed + 0.5*iGreen + 0.3*iBlue) / 255; if ( iAlpha == 0 ) { // should calculate alpha instead, but quick hack :) //fBrightness *= (iAlpha / 255); fBrightness = 1 ; } iCharIdx = Math . floor ( ( 1 - fBrightness ) * ( aCharList . length - 1 ) ) ; if ( bInvert ) { iCharIdx = aCharList . length - iCharIdx - 1 ; } // good for debugging //fBrightness = Math.floor(fBrightness * 10); //strThisChar = fBrightness; var strThisChar = aCharList [ iCharIdx ] ; if ( strThisChar === undefined || strThisChar == " " ) strThisChar = "&nbsp;" ; if ( bColor ) { strChars += "<span style='" + "color:rgb(" + iRed + "," + iGreen + "," + iBlue + ");" + ( bBlock ? "background-color:rgb(" + iRed + "," + iGreen + "," + iBlue + ");" : "" ) + ( bAlpha ? "opacity:" + ( iAlpha / 255 ) + ";" : "" ) + "'>" + strThisChar + "</span>" ; } else { strChars += strThisChar ; } } strChars += "<br/>" ; } oAscii . innerHTML = "<tr><td>" + strChars + "</td></tr>" ; // console.timeEnd('rendering'); // return oAscii; }
can't get a span or div to flow like an img element, but a table works? convert img element to ascii
can t get a span or div to flow like an img element but a table works? convert img element to ascii