当前位置：首页 → 问答吧 → [小玩具]图片转换HTML

[小玩具]图片转换HTML

时间：2010-05-10

来源：互联网

通过图片转换为网页的像素显示，为了取imageData，只好采用canvas来做，至于目的和意义暂时还没有想到，只是好玩
所以只有再现代浏览器（webkit内核，mozilla内核,opera内核）中能够使用
因为canvas的安全因素，只能选用当前网站目录下面的图片元素。
如果你们要使用就自己下载
猛击下面演示，进入像素世界

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" /> <meta name="Author" content="ariesjia" /> <title>Ballache Mario Generator</title> <style> html,body{overflow:hidden;} canvas { border:1px #666 solid; display:none; } .m * { vertical-align:middle; } .m { line-height:26px; margin-bottom:10px; } #img{ height:24px; line-height:24px; width:200px; vertical-align:middle; border:1px #666 solid; margin-left:5px; background:-moz-linear-gradient(top , #CCCCCC, #ffffff 10px); background:-webkit-gradient(linear, 0 0, 0 10, from(#CCCCCC), to(ffffff)); } #go{ padding:4px 10px; border:1px gray solid; -moz-border-radius:3px; -khtml-border-radius:3px; border-radius:3px; } #loading{background:#000 url('T16WJqXaXeXXXXXXXX-32-32.gif') no-repeat 50% 50%; opacity:0.5; } </style> <script> Array.prototype.unique = array_unique; Array.prototype.ique = array_ique; function array_unique() { var o = new Object(); for (var i=0,j=0; i<this.length; i++) { if (typeof o[this[i]] == 'undefined') { o[this[i]] = j++; } } this.length = 0; for (var key in o) { this[o[key]] = key; } return this; } function array_ique() { for(var i=0;i<this.length;i++) { if(this[i]=='') this.splice(i,1); } } function getpagedimensions() { var bodyOffsetWidth = 0; var bodyOffsetHeight = 0; var bodyScrollWidth = 0; var bodyScrollHeight = 0; var getpagedimensions= [0,0]; if(typeof document.documentElement != "undefined" && typeof document.documentElement.scrollWidth != "undefined") { getpagedimensions[0] = document.documentElement.scrollWidth; getpagedimensions[1] = document.documentElement.scrollHeight; } bodyOffsetWidth = document.body.offsetWidth; bodyOffsetHeight = document.body.offsetHeight; bodyScrollWidth = document.body.scrollWidth; bodyScrollHeight = document.body.scrollHeight; if(bodyOffsetWidth>getpagedimensions[0]) { getpagedimensions[0] = bodyOffsetWidth; } if(bodyOffsetHeight>getpagedimensions[1]) { getpagedimensions[1] = bodyOffsetHeight; } if(bodyScrollWidth>getpagedimensions[0]) { getpagedimensions[0] = bodyScrollWidth; } if(bodyScrollHeight>getpagedimensions[1]) { getpagedimensions[1] = bodyScrollHeight; } return getpagedimensions; } function creatLoading() { var pagedimensions = getpagedimensions(); var dropsheet = document.createElement("div"); dropsheet.setAttribute("id","loading"); dropsheet.style.position = "absolute"; dropsheet.style.left = "0"; dropsheet.style.top = "0"; dropsheet.style.width = pagedimensions[0] + "px"; dropsheet.style.height = pagedimensions[1] + "px"; document.body.appendChild(dropsheet); } function hideLoading() { var elem = document.getElementById('loading'); elem.parentNode.removeChild(elem); } function IsPicture(s) { //判断是否是图片 - strFilter必须是小写列举 var strFilter=".jpg|.png|.gif|.bmp|.jpeg|" if(s.indexOf(".")>-1) { var p = s.lastIndexOf("."); //alert(p); //alert(this.length); var strPostfix=s.substring(p,s.length) + '|'; strPostfix = strPostfix.toLowerCase(); //alert(strPostfix); if(strFilter.indexOf(strPostfix)>-1) { //alert("True"); return true; } } //alert('False'); return false; } function go() { var mvalue = document.getElementById('img').value; if(IsPicture(mvalue)) { creatLoading(); if(window.ActiveXObject) { alert("爷们儿要黑你的屏，快换现代浏览器来玩") return false; } var canvas = document.getElementById('myCanvasElt'); if(canvas&&canvas.getContext('2d')) { var ctx = canvas.getContext('2d'); var img=new Image(); var k=[]; img.src=mvalue; img.onload=function(){ var wid = img.width; var hei = img.height; canvas.width = wid+20; canvas.height = hei+20; ctx.drawImage(img,10,10,wid,hei); try{imgData=ctx.getImageData(10,10,wid,hei);} catch(e){ alert("只能选用当前网页目录下的图片"); hideLoading(); } if(imgData) { var arr = getData(imgData,img.width); createTable(document.getElementById("dt"),arr); } } img.onerror=function(){ alert("图像链接失败") } } } else { alert("你输入的不是图像文件") } } function getData(imgData,wid,bl){ var k=[]; var bl = bl||1; for(var l=0;l<=imgData.height;l++) k.push([]); for(var i=0;i<imgData.width;i+=bl) { for(var j=0;j<imgData.height;j+=bl) { var idx = []; var r = 0; var g = 0; var b = 0; for(var m=0;m<bl;m++) { idx.push((i + j * imgData.width) * 4); idx.push((i+m + j * imgData.width) * 4) idx.push((i + (j+m) * imgData.width) * 4) idx.push((i+m + (j+m) * imgData.width) * 4) } idx.unique(); for(var q=0;q<idx.length;q++) { r += imgData.data[parseInt(idx[q]) + 0]; g += imgData.data[parseInt(idx[q]) + 1]; b += imgData.data[parseInt(idx[q]) + 2]; } r/=idx.length;g/=idx.length;b/=idx.length; var kc = ""+r+","+g+","+b+""; k[j].push(kc); } } k.ique(); return k; } function createTable(par,k) { var data = new Array(); data.push('<table cellpadding="0" cellspacing="0" width="'+k[1].length+'" height="'+k.length+'" ><tbody>'); for (var i = 0; i < k.length ; i++) { data.push('<tr>'); for (var j = 0; j < k[i].length; j++) { data.push('<td style="width:1px;height:1px;background:RGB('+k[i][j]+');"></td>'); } data.push('</tr>'); } data.push('</tbody><table>'); par.innerHTML = data.join(''); document.getElementById('texta').value = data.join(''); hideLoading(); } </script> </head> <body> <div class="m"> <label for="img" >图像地址<input id="img" name="img" type="text" value="http://bbs.blueidea.com/images/default/reply.gif" ></label>（图像超过500*500，浏览器无情挂掉的几率很大） <input id="go" name="Button1" type="button" onclick="go()" value="生成"> </div> <div id="dt"></div> <textarea id="texta" name="texta" cols="76" rows="20"></textarea> <canvas id='myCanvasElt' width="200" height="200" > </canvas> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 ariesjia 于 2010-5-10 19:13 编辑 ]

作者: ariesjia 发布时间: 2010-05-10

黑屏

作者: 章之小依发布时间: 2010-05-10

黑屏.看不鳥

作者: skybot 发布时间: 2010-05-10

黑屏的换浏览器，用FF可以看到效果，不过实用性不强。

作者: EraIT 发布时间: 2010-05-10