һ
 ע

QQ¼

ֻһٿʼ

ƼĶ

+
̳ WEBҳǰ뿪 ǰ̨ű

canvasJavaScript APIͼƬתַ

[]
16572 happy175 2014-2-17 10:15:19
| ʾȫ¥
1F



ַһdzϤˣôΰһеͼƬתַأHTML5ܱʵͨcanvasԺʵܡʵԭܼ򵥣ɨͼƬӦλõص㣬ټҶֵݻҶֵĴСֱַ#*+Ϳո䡣
Դ룺 HTMLһcanvasԪ#cvһַ#txt
  1. <canvas id="cv">fuck ie</canvas>
  2. <div id="txt"></div>

ƴ

cssÿһp䣬pheightfont-sizeСӦһ¶12pxԱÿгֿ϶
  1. * {margin: 0;padding: 0;}
  2. body {font-size: 12px; margin: 10px; font-family: simsun; background: #fff;}
  3. p { height: 12px;}
  4. p.ts { margin: 10px 0 0 0; width: 500px; float: left;}
  5. span {width: 12px;}
  6. #cv, #txt {float: left;}
  7. #cv { margin-right: 5px;}
ƴ

javascript뿴עͺĽ͡
  1. var cv = document.getElementById('cv');
  2. var c = cv.getContext('2d');
  3. var txtDiv = document.getElementById('txt');
  4. var fileBtn = document.getElementById("up-button");
  5. var img = new Image();
  6. img.src = 'a.jpg';
  7. img.onload = init; // ͼƬ꿪ʼת
  8. fileBtn.onchange = getImg;

  9. // ݻҶӦַ
  10. function toText(g) {
  11.     if (g <= 30) {
  12.         return '#';
  13.     } else if (g > 30 && g <= 60) {
  14.         return '&';
  15.     } else if (g > 60 && g <= 120) {
  16.         return '
  17. [b]ȡӦصĻҶȣ[/b]
  18. getImageDataһÿصrgbaֵdata棬һһλ飬Ҳ˵rgbaֱӦһֵȻžһصrgbagetImageData.dataֵΪ[1,2,3,4,5,6,7,8]ôgetImageDataΧͰ2ص㣬һصrgbaֱֵ1,2,3,4ڶصľ45,6,7,8ˣȡÿصrgbaֵʱindexӦصֵϳ4ȻͨgetGray()Ҷȡ
  19. [b]ζӦַ[/b]
  20. ٿһÿַĿ6px߶12pxDzÿص㶼ҪӦһַɵͼdzֻܸ֮ͼƬߣһ6px12pxȡһأԱ֤ɵַСԭͼһ¡
  21. 뿴demo [url=http://www.cssha.com/img2txt/]http://www.cssha.com/img2txt/[/url]



  22. ;
  23.     }  else if (g > 120 && g <= 150) {
  24.         return '*';
  25.     } else if (g > 150 && g <= 180) {
  26.         return 'o';
  27.     } else if (g > 180 && g <= 210) {
  28.         return '!';
  29.     } else if (g > 210 && g <= 240) {
  30.         return ';';
  31.     }  else {
  32.         return ' ';
  33.     }
  34. }


  35. // rgbֵҶ
  36. function getGray(r, g, b) {
  37.     return 0.299 * r + 0.578 * g + 0.114 * b;
  38. }

  39. // ת
  40. function init() {
  41.     txtDiv.style.width = img.width + 'px';
  42.     cv.width = img.width;
  43.     cv.height = img.height;
  44.     c.drawImage(img, 0, 0);
  45.     var imgData = c.getImageData(0, 0, img.width, img.height);
  46.     var imgDataArr = imgData.data;
  47.     var imgDataWidth = imgData.width;
  48.     var imgDataHeight = imgData.height;
  49.     var html = '';
  50.     for (h = 0; h < imgDataHeight; h += 12) {
  51.         var p = '
  52.   ';
  53.           for (w = 0; w < imgDataWidth; w += 6) {
  54.               var index = (w + imgDataWidth * h) * 4;
  55.               var r = imgDataArr[index + 0];
  56.               var g = imgDataArr[index + 1];
  57.               var b = imgDataArr[index + 2];
  58.               var gray = getGray(r, g, b);
  59.               p += toText(gray);
  60.           }
  61.           p += '

  62. ';
  63.         html += p;
  64.     }
  65.     txtDiv.innerHTML = html;
  66. }

  67. // ȡͼƬ
  68. function getImg(file) {
  69.     var reader = new FileReader();
  70.     reader.readAsDataURL(fileBtn.files[0]);
  71.     reader.onload = function () {
  72.         img.src = reader.result;
  73.     }
  74. }
ƴ

ȡӦصĻҶȣ
getImageDataһÿصrgbaֵdata棬һһλ飬Ҳ˵rgbaֱӦһֵȻžһصrgbagetImageData.dataֵΪ[1,2,3,4,5,6,7,8]ôgetImageDataΧͰ2ص㣬һصrgbaֱֵ1,2,3,4ڶصľ45,6,7,8ˣȡÿصrgbaֵʱindexӦصֵϳ4ȻͨgetGray()Ҷȡ
ζӦַ
ٿһÿַĿ6px߶12pxDzÿص㶼ҪӦһַɵͼdzֻܸ֮ͼƬߣһ6px12pxȡһأԱ֤ɵַСԭͼһ¡
뿴demo http://www.cssha.com/img2txt/



аԴ

Ҫ ¼ ſػ鿴ûʺţע  

x
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ
ѿ 2014-3-17 21:07:12
| ʾȫ¥
2F
˵ĺãһظ
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ ֧
콵kpp 2014-4-29 18:20:18
| ʾȫ¥
3F
ٶȹٷװˣǮyouqian.baidu.com뼼Աƹ
ٶǮע롿ԱѡٶǮװ ٶƹ
ٶɱ1Ԫ/װ/̨ٶʿ1Ԫ/װ/̨ٶ1Ԫ1Ԫ/װ/̨ٶ뷨0.1Ԫ/װ/̨
JJϷ5Ԫ0.5Ԫpps 0.5Ԫhao123ٶӰȰٶȹٷƷ½ƹ㡣
hao123ҳ 60-100Ԫ/1000IP/ս㡣
㣺ÿ5-10Ž㣬̨ϵͳתˣ1Ԫ֧
ٶȹ˾ٷˣҵñ֤۸ߣ㼰ʱ
ٶǮעַhttp://youqian.baidu.com
ȡעᣬٶǮƹ£


0I037PNT        δ/ʹ        -        -
0I05LS2C        δ/ʹ        -        -
0LX7IIZQ        δ/ʹ        -        -
0LXB3OGD        δ/ʹ        -        -
0LX2ZHQG        δ/ʹ        -        -
0LX1M00F        δ/ʹ        -        -
0LXA2RG7        δ/ʹ        -        -
0N1QH6N6        δ/ʹ        -        -
0N17X2S1        δ/ʹ        -        -
0N1W0GQK        δ/ʹ        -        -
0N16Q3H2        δ/ʹ        -        -
0N1S7JLL        δ/ʹ        -        -
0U8UKNU0        δ/ʹ        -        -
0U8YNXV2        δ/ʹ        -        -
0U9AF81N        δ/ʹ        -        -
0U8S4ENW        δ/ʹ        -        -
0U938H01        δ/ʹ        -        -
0U8RJHQV        δ/ʹ        -        -
0WFFEOB1        δ/ʹ        -        -
0WF3F82R        δ/ʹ        -        -
0WF3F82R        δ/ʹ        -        -
0WFFEOB1        δ/ʹ        -        -
0WF6B7KM        δ/ʹ        -        -
0WFBGMXM        δ/ʹ        -        -
0WF94UJP        δ/ʹ        -        -
0WFEWSXH        δ/ʹ        -        -
0WFENCFO        δ/ʹ        -        -
0WF8HAP0        δ/ʹ        -        -
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ ֧
б

ֹ

̳¡ͼƬѷϴվԭתԻ,µİȨԭ
վַİȨ֪ͨǵĹԱ,Ա(Email:admin@websjy.com)ʱȡȨɾ
ܾκκʽڱ̳л񹲺͹ִ!

QQ| 42011102000510|Archiver|ֻ|Դ ( ICP14013341-1

GMT+8, 2018-9-25 05:08

Powered by Discuz! X3.2

ԴԴվ  ԴAPPӦ֮

ٻظ ض б