图片转字符画html5版
html5吧
全部回复
仅看楼主
level 9
如题,现在html5功能原来越强大,
lz
没事就写了这个可以把图片转为字符画的代码,完全不需要联网(等等,[黑线]还是引用了jQuery的,如果你本地有jQuery库,那就真的不用联网了)
代码也不长,我就直接贴代码咯
2015年08月30日 06点08分 1
level 9
<!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}
http://code.jquery.com/jquery-2.1.4.min.js">