天马行空工作室

 找回密码
 加入天马
搜索
查看: 2587|回复: 0

canvas像素抓取及字符画生成

[复制链接]
发表于 2015-4-12 21:28:59 | 显示全部楼层 |阅读模式
canvas的drawImage方法可以抓取图像、视频,参数为drawImage(图像node,坐标x,坐标y,宽,高);

这里的图像node不能为跨域资源。
本想做个验证码识别,但后面算法较复杂,只做了抓取像素的,稍后会加上交互界面及像素分析部分。
1、应用地址:
http://tmxk.org/char
源码下载:
http://tmxk.org/char/char.rar
2、图像调用接口,限本站资源:
http://tmxk.org/char/?url=6.png
http://tmxk.org/char/?url=5.png
http://tmxk.org/char/?url=4.png
http://tmxk.org/char/?url=3.png
http://tmxk.org/char/?url=2.png
http://tmxk.org/char/?url=1.png
http://tmxk.org/char/?url=http:/ ... age/common/logo.png
http://tmxk.org/char/?url=r-c.png
3、部分源码:
  1. var r_cimg=function (set){
  2.     this.init=function(){
  3.         var ctmp=d.createElement("canvas"),dtmp=d.createElement("div"), style=d.createElement("style");
  4.         ctmp.id="r_c",ctmp.width=set[5],ctmp.height=set[5],d.body.appendChild(ctmp);
  5.         var c=d.getElementById("r_c").getContext("2d"),   
  6.         stylec=d.createTextNode("#r_cdiv{position:absolute;background:#fff;left:500px;top:0px;width:800px;height:800px}span{display:inline-block;}");
  7.         style.appendChild(stylec),d.body.appendChild(style);      
  8.         dtmp.id="r_cdiv",dtmp.style="",d.body.appendChild(dtmp);
  9.         return c;
  10.     }

  11.     this.char=function(set){
  12.         var id=c.getImageData(0,0,set[0],set[0]),ia=id.data,s=[],t=[];
  13.         for(var i=1;i<=ia.length;i++)
  14.         if (i%4==0)
  15.         {
  16.             t.push("<span style='width:"+set[1]/set[0]+"px;height:"+set[1]/set[0]+"px;font-size:"+set[1]/set[0]+"px;color:rgb("+ia[i-4]+","+ia[i-3]+","+ia[i-2]+")'>"+((ia[i-4]+ia[i-3]+ia[i-2]+ia[i-1]!=set[4])?set[2]:set[3])+"</span>");
  17.             if (i%(set[0]*4)==0)
  18.             {
  19.                 s.push(t.join("")+"<br/>");
  20.                 t=[];
  21.             }
  22.         }
  23.         d.getElementById("r_cdiv").innerHTML=s.join("");
  24.     }

  25.     this.load=function(a){
  26.         var img =new Image();
  27.         a=a||set;
  28.         img.src=a[6];
  29.         c.clearRect(0,0,c.canvas.width,c.canvas.height);
  30.         d.getElementById("r_cdiv").innerHTML="";
  31.         img.onload=function(){
  32.             c.drawImage(img,0,0,a[0],a[0]);
  33.             that.char(a)
  34.         }
  35.     }
  36.      var that=this,d=document,c=this.init();
  37. }
复制代码







您需要登录后才可以回帖 登录 | 加入天马

本版积分规则

Archiver|手机版|小黑屋|天马行空工作室 ( 京ICP备12003429号  

GMT+8, 2018-12-18 21:19 , Processed in 0.291522 second(s), 20 queries .

Powered by Discuz! v8

© 2010-2014 canvas像素抓取及字符画生成 - 编程讨论 天马行空工作室

快速回复 返回顶部 返回列表