注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

百鬼夜行

身是菩提树,心如明镜台,时时勤拂拭,勿使惹尘埃。

 
 
 

日志

 
 

原理分析篇: AlloyPhoto在线纯JAVASCRIPT的PHOTOSHOP(html5 canvas)  

2013-03-27 14:49:58|  分类: HTML5CSS3WEBAPP |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
$(function() {
var canvas = document.createElement("canvas");
    var context = canvas.getContext("2d");

    document.body.appendChild(canvas);
    
    var img = document.getElementById("oImg");

    var temp_img = new Image();
    temp_img.onload = function (){
    canvas.width = 1280;
        canvas.height = 1024;

        context.drawImage(temp_img, 0, 0, 1280, 1024);

        img.style.display = "none";

        //getImageData().data获取的data数组每四个数组值代表一个像素点,rgba四个是一组表示一个像素点,这样一来,一个图像就转化成了数据表示的数组。
        var imgData = context.getImageData(0, 0, 1280, 1024);
        var data = imgData.data;

      //----------------corrode--------------------
        var R = 3;
        var width = imgData.width;
        var height = imgData.height;
        var xLength = R * 2 + 1;

        for(var x = 0; x < width; x ++){

            for(var y = 0; y < height; y ++){
                
                var randomI = parseInt(Math.random() * R * 2) - R ;//区块随机代表
                var randomJ = parseInt(Math.random() * R * 2) - R;//区块随机代表
                var realI = y * width + x;
                var realJ = (y + randomI) * width + x + randomJ;

                for(var j = 0; j < 3; j ++){
                    data[realI * 4 + j] = data[realJ * 4 + j];
                }

            }

        }
      //----------------end corrode--------------------

        
        context.putImageData(imgData, 0 ,0);
    };
    temp_img.src = img.src;
});
  评论这张
 
阅读(277)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018