还是引用了jQuery的，如果你本地有jQuery库，那就真的不用联网了）
<!doctype html><html><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/><title>像素操作</title><style>@charset "UTF-8";body{left:0;margin:0;padding:0}
#wrapper{position:absolute;top:0;left:0;overflow:hidden;width:100%;height:100%}
body,input,textarea{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-appearance:none}
#a{position:absolute;top:45px;left:0;overflow:scroll;width:100%;height:calc(100% - 45px)}
canvas{display:block;background:url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD/4QBYRXhpZgAATU0AKgAAAAgAAgESAAMAAAABAAEAAIdpAAQAAAABAAAAJgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAMKADAAQAAAABAAAAMAAAAAD/7QA4UGhvdG9zaG9wIDMuMAA4QklNBAQAAAAAAAA4QklNBCUAAAAAABDUHYzZjwCyBOmACZjs+EJ+/8AAEQgAMAAwAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/bAEMAAgICAgICAwICAwQDAwMEBQQEBAQFBwUFBQUFBwgHBwcHBwcICAgICAgICAoKCgoKCgsLCwsLDQ0NDQ0NDQ0NDf/bAEMBAgICAwMDBgMDBg0JBwkNDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDf/dAAQAA//aAAwDAQACEQMRAD8A+zSG8/yuPNzt/h3Z/nX0CSPI83nysbsfNtx/KgkeR5vPlY3Y+bbj+VfPxDef5XHm52/w7s/zoACG8/yuPNzt/h3Z/nX0CSPI83nysbsfNtx/KgkeR5vPlY3Y+bbj+VfPxDef5XHm52/w7s/zoACG8/yuPNzt/h3Z/nX0CSPI83nysbsfNtx/KgkeR5vPlY3Y+bbj+VfPxDef5XHm52/w7s/zoA//0Ps0hvP8rjzc7f4d2f519AkjyPN58rG7HzbcfyoJHkebz5WN2Pm24/lXz8Q3n+Vx5udv8O7P86AAhvP8rjzc7f4d2f519AkjyPN58rG7HzbcfyoJHkebz5WN2Pm24/lXz8Q3n+Vx5udv8O7P86AAhvP8rjzc7f4d2f519AkjyPN58rG7HzbcfyoJHkebz5WN2Pm24/lXz8Q3n+Vx5udv8O7P86AP/9H7NIbz/K483O3+Hdn+dfQJI8jzefKxux823H8qCR5Hm8+Vjdj5tuP5V8/EN5/lcebnb/Duz/OgAIbz/K483O3+Hdn+dfQJI8jzefKxux823H8qCR5Hm8+Vjdj5tuP5V8/EN5/lcebnb/Duz/OgAIbz/K483O3+Hdn+dfQJI8jzefKxux823H8qXgweZz5WN2Pm24/lXz6QfP8AK483O3+Hdn+dA7M//9k=)}
#a textarea,canvas{position:absolute;top:0;left:0}
#a textarea{display:none;padding:0;width:100%;height:400%;border:none;border-radius:0;background:#fff;text-align:center;font-size:5px;font-family:Courier;line-height:2px}
#title{overflow:hidden;background:#54bded;color:#fff;-webkit-transition:all .5s;transition:all .5s}
#menu_key,#title{position:absolute;top:0;left:0;width:100%;height:45px}
#menu_key{margin:0;padding:0;border:none;border-bottom:1px solid #000;border-radius:0;background:0 0;text-align:center;font-size:20px}
#menu{position:absolute;top:45px;left:0;width:100%;height:calc(100% - 45px)}
#menu input{position:absolute;left:5%;width:90%;height:40px;border-radius:10px;font-size:1em}
#copy{top:20px;background:green;color:#fff}
#url{top:75pt;background:#fff}
#put{top:150px}
#put,#sto{background:green;color:#fff}
#sto{top:230px}
</style></head><body><div id="wrapper"><div id="a"></div><div id="title"><input id="menu_key"value="点这里打开菜单"readonly/><div id="menu"><input id="copy"type="button"value="手动复制上面颜色代码"><div><input id="url"type="text"placeholder="在此输入新图片路径…"/><input id="put"type="button"value="更换图片"/><input id="sto"type="button"value="转换图片"/></div></div></div><div id="error"><script src="http://code.jquery.com/jquery-2.1.4.min.js"></script><script>$(function(){function a(a,b,c){var f,g,d=[],e=4*c*a.width+4*b;for(g=0;4>g;g++)if(d.push(f=a.data[e+g]),"undefined"==typeof f)return;return"rgba("+d.join(", ")+")"}function b(a){var a=a-0||0;return a=a?a%255||255:0,a=parseInt(a,10).toString(16),a.length>1?a:"0"+a}function c(a){var d,c=a.split(/\(|\,|\)/);return 0==c[4]?"#000":(d="#",d+=b(c[1]-0>170?0:255),d+=b(c[2]-0>170?0:255),d+=b(c[3]-0>170?0:255))}function d(){p.style["background-color"]=p.value=a(n,l,m-45),p.style["color"]=c(a(n,l,m-45))}function s(a,b){var c=new Image;c.onload=function(){var a,d,e;(c.width>h||c.height>i)&&((c.width>c.height||c.width>h)&&(c.height=h/c.width*c.height,c.width=h),c.height>i&&(c.width=i/c.height*c.width,c.height=i)),a=(j-c.height)/2,d=(f-c.width)/2,r.clearRect(0,0,f,j),r.drawImage(c,d,a,c.width,c.height),e=r.getImageData(0,0,f,j),x.hide(),b.call(e,e.data)},c.src=a}var e,f,g,h,i,j,k,l,m,n,o,p,q,r,t,u,v,w,x;URL=window.webkitURL||window.URL,e=$("html").get(0),f=e.clientWidth,g=e.clientHeight,h=f-20,i=g-65,j=g-45,o=$("#title"),p=$("#menu_key").click(function(){o.css({height:"45px"==o.css("height")?"100%":"45px"})}).focus(function(){this.setAttribute("readonly","readonly")}).get(0),q=$("<canvas></canvas><textarea></textarea>").attr({width:f,height:j}).appendTo("#a").get(0),$(q).on("touchstart",function(){event.preventDefault(),k=event.touches[0],l=k.pageX,m=k.pageY}).on("touchmove",function(){event.preventDefault(),k=event.touches[0]||k,l=k.pageX,m=k.pageY,d()}).on("touchend",function(){event.preventDefault(),k=event.touches[0]||k,l=k.pageX,m=k.pageY,d()}),r=q.getContext("2d"),s("http://image.zzd.sm.cn/17748406973606263776.jpg?id=0",function(){n=this}),$("#copy").click(function(){p.value.indexOf("rgba(")?alert("没找到颜色代码"):$(p).removeAttr("readonly").focus()}),t=new FileReader,t.onload=function(){v.value="正在加载图片",s(this.result,function(){n=this,o.css({height:"45px"}),v.val("更换图片")})},u=$('<input type="file" accept="image/*">').change(function(){var a;try{a=this.files[0].getAsDataURL()}catch(b){}return a||(a=URL.createObjectURL(this.files[0])),a?(v.value="正在加载图片",s(a,function(){n=this,o.css({height:"45px"}),v.val("更换图片")}),void 0):t.readAsDataURL(this.files[0])}),v=$("#put").click(function(){var a=$("#url").val().trim();return a.length?(0!=a.indexOf("http://")&&(a="http://"+a),this.value="正在加载图片",s(a,function(){n=this,o.css({height:"45px"}),v.val("更换图片")}),void 0):u.click()}),w="MWEBHFNARKXYZVGUSPQDOCTLJI!;,.",x=$("#a textarea"),$("#sto").click(function(){var a,b,c,d,e,f,g,i;try{for(a=255/w.length,b=n.data,e="",f=[],g=0,c=0;c<n.height;c++)if(0==c%2){for(i=4*c*n.width,d=0;d<n.width;d++)0==d%3&&(0==b[i+4*d+3]?e+=" ":(g=Math.floor(Math.max(b[4*d+i],b[4*d+i+1],b[4*d+i+2])/a),e+=w[g]||" "));f.push(e),e=""}x.val(f.join("\n")).show(),o.css("height","45px")}catch(j){alert(j)}})});</script></div></div></body></html>
#wrapper{position:absolute;top:0;left:0;overflow:hidden;width:100%;height:100%}
body,input,textarea{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-appearance:none}
#a{position:absolute;top:45px;left:0;overflow:scroll;width:100%;height:calc(100% - 45px)}
canvas{display:block;background:url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD/4QBYRXhpZgAATU0AKgAAAAgAAgESAAMAAAABAAEAAIdpAAQAAAABAAAAJgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAMKADAAQAAAABAAAAMAAAAAD/7QA4UGhvdG9zaG9wIDMuMAA4QklNBAQAAAAAAAA4QklNBCUAAAAAABDUHYzZjwCyBOmACZjs+EJ+/8AAEQgAMAAwAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/bAEMAAgICAgICAwICAwQDAwMEBQQEBAQFBwUFBQUFBwgHBwcHBwcICAgICAgICAoKCgoKCgsLCwsLDQ0NDQ0NDQ0NDf/bAEMBAgICAwMDBgMDBg0JBwkNDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDf/dAAQAA//aAAwDAQACEQMRAD8A+zSG8/yuPNzt/h3Z/nX0CSPI83nysbsfNtx/KgkeR5vPlY3Y+bbj+VfPxDef5XHm52/w7s/zoACG8/yuPNzt/h3Z/nX0CSPI83nysbsfNtx/KgkeR5vPlY3Y+bbj+VfPxDef5XHm52/w7s/zoACG8/yuPNzt/h3Z/nX0CSPI83nysbsfNtx/KgkeR5vPlY3Y+bbj+VfPxDef5XHm52/w7s/zoA//0Ps0hvP8rjzc7f4d2f519AkjyPN58rG7HzbcfyoJHkebz5WN2Pm24/lXz8Q3n+Vx5udv8O7P86AAhvP8rjzc7f4d2f519AkjyPN58rG7HzbcfyoJHkebz5WN2Pm24/lXz8Q3n+Vx5udv8O7P86AAhvP8rjzc7f4d2f519AkjyPN58rG7HzbcfyoJHkebz5WN2Pm24/lXz8Q3n+Vx5udv8O7P86AP/9H7NIbz/K483O3+Hdn+dfQJI8jzefKxux823H8qCR5Hm8+Vjdj5tuP5V8/EN5/lcebnb/Duz/OgAIbz/K483O3+Hdn+dfQJI8jzefKxux823H8qCR5Hm8+Vjdj5tuP5V8/EN5/lcebnb/Duz/OgAIbz/K483O3+Hdn+dfQJI8jzefKxux823H8qXgweZz5WN2Pm24/lXz6QfP8AK483O3+Hdn+dA7M//9k=)}
#a textarea,canvas{position:absolute;top:0;left:0}
#a textarea{display:none;padding:0;width:100%;height:400%;border:none;border-radius:0;background:#fff;text-align:center;font-size:5px;font-family:Courier;line-height:2px}
#title{overflow:hidden;background:#54bded;color:#fff;-webkit-transition:all .5s;transition:all .5s}
#menu_key,#title{position:absolute;top:0;left:0;width:100%;height:45px}
#menu_key{margin:0;padding:0;border:none;border-bottom:1px solid #000;border-radius:0;background:0 0;text-align:center;font-size:20px}
#menu{position:absolute;top:45px;left:0;width:100%;height:calc(100% - 45px)}
#menu input{position:absolute;left:5%;width:90%;height:40px;border-radius:10px;font-size:1em}
#copy{top:20px;background:green;color:#fff}
#url{top:75pt;background:#fff}
#put{top:150px}
#put,#sto{background:green;color:#fff}
#sto{top:230px}
</style></head><body><div id="wrapper"><div id="a"></div><div id="title"><input id="menu_key"value="点这里打开菜单"readonly/><div id="menu"><input id="copy"type="button"value="手动复制上面颜色代码"><div><input id="url"type="text"placeholder="在此输入新图片路径…"/><input id="put"type="button"value="更换图片"/><input id="sto"type="button"value="转换图片"/></div></div></div><div id="error"><script src="http://code.jquery.com/jquery-2.1.4.min.js"></script><script>$(function(){function a(a,b,c){var f,g,d=[],e=4*c*a.width+4*b;for(g=0;4>g;g++)if(d.push(f=a.data[e+g]),"undefined"==typeof f)return;return"rgba("+d.join(", ")+")"}function b(a){var a=a-0||0;return a=a?a%255||255:0,a=parseInt(a,10).toString(16),a.length>1?a:"0"+a}function c(a){var d,c=a.split(/\(|\,|\)/);return 0==c[4]?"#000":(d="#",d+=b(c[1]-0>170?0:255),d+=b(c[2]-0>170?0:255),d+=b(c[3]-0>170?0:255))}function d(){p.style["background-color"]=p.value=a(n,l,m-45),p.style["color"]=c(a(n,l,m-45))}function s(a,b){var c=new Image;c.onload=function(){var a,d,e;(c.width>h||c.height>i)&&((c.width>c.height||c.width>h)&&(c.height=h/c.width*c.height,c.width=h),c.height>i&&(c.width=i/c.height*c.width,c.height=i)),a=(j-c.height)/2,d=(f-c.width)/2,r.clearRect(0,0,f,j),r.drawImage(c,d,a,c.width,c.height),e=r.getImageData(0,0,f,j),x.hide(),b.call(e,e.data)},c.src=a}var e,f,g,h,i,j,k,l,m,n,o,p,q,r,t,u,v,w,x;URL=window.webkitURL||window.URL,e=$("html").get(0),f=e.clientWidth,g=e.clientHeight,h=f-20,i=g-65,j=g-45,o=$("#title"),p=$("#menu_key").click(function(){o.css({height:"45px"==o.css("height")?"100%":"45px"})}).focus(function(){this.setAttribute("readonly","readonly")}).get(0),q=$("<canvas></canvas><textarea></textarea>").attr({width:f,height:j}).appendTo("#a").get(0),$(q).on("touchstart",function(){event.preventDefault(),k=event.touches[0],l=k.pageX,m=k.pageY}).on("touchmove",function(){event.preventDefault(),k=event.touches[0]||k,l=k.pageX,m=k.pageY,d()}).on("touchend",function(){event.preventDefault(),k=event.touches[0]||k,l=k.pageX,m=k.pageY,d()}),r=q.getContext("2d"),s("http://image.zzd.sm.cn/17748406973606263776.jpg?id=0",function(){n=this}),$("#copy").click(function(){p.value.indexOf("rgba(")?alert("没找到颜色代码"):$(p).removeAttr("readonly").focus()}),t=new FileReader,t.onload=function(){v.value="正在加载图片",s(this.result,function(){n=this,o.css({height:"45px"}),v.val("更换图片")})},u=$('<input type="file" accept="image/*">').change(function(){var a;try{a=this.files[0].getAsDataURL()}catch(b){}return a||(a=URL.createObjectURL(this.files[0])),a?(v.value="正在加载图片",s(a,function(){n=this,o.css({height:"45px"}),v.val("更换图片")}),void 0):t.readAsDataURL(this.files[0])}),v=$("#put").click(function(){var a=$("#url").val().trim();return a.length?(0!=a.indexOf("http://")&&(a="http://"+a),this.value="正在加载图片",s(a,function(){n=this,o.css({height:"45px"}),v.val("更换图片")}),void 0):u.click()}),w="MWEBHFNARKXYZVGUSPQDOCTLJI!;,.",x=$("#a textarea"),$("#sto").click(function(){var a,b,c,d,e,f,g,i;try{for(a=255/w.length,b=n.data,e="",f=[],g=0,c=0;c<n.height;c++)if(0==c%2){for(i=4*c*n.width,d=0;d<n.width;d++)0==d%3&&(0==b[i+4*d+3]?e+=" ":(g=Math.floor(Math.max(b[4*d+i],b[4*d+i+1],b[4*d+i+2])/a),e+=w[g]||" "));f.push(e),e=""}x.val(f.join("\n")).show(),o.css("height","45px")}catch(j){alert(j)}})});</script></div></div></body></html>
