canvas马赛克

来源：互联网发布：3g网络精灵编辑：程序博客网时间：2024/04/30 08:48

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas马赛克</title>
<style>
*{
margin:0;
padding:0;
}
html,body{
width:100%;
height:100%;
}
#canvas{
position:relative;
margin:50px auto;
}
#images{
display:none;
}
</style>
<script>
/* requestAnimationFrame.js
* by zhangxinxu 2013-09-30
*/
(function() {
var lastTime = 0;
var vendors = ['webkit', 'moz','ms','o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || // name has changed in Webkit
window[vendors[x] + 'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
var id = window.setTimeout(function() {
callback(currTime + timeToCall);
}, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
}
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}
}());
</script>
</head>
<body>
<img id="images" src="./images/coke.png" alt="">
<div id="canvas" style="width:500px;height:500px;"></div>
</body>
</html>
<script>
var jquery = (function(){
var $ = function(id){
return document.getElementById(id) || id;
}
return $;
}());

var test = (function($){
var onload = 0;
var extend = function(target,source){ //继承option
for(key in source){
if(key in target){
target[key] = source[key]
}
}
return target;
}

var addEvent = function(obj,event,func){ //绑定事件，兼容性处理
obj.addEventListener ? obj.addEventListener(event,func,false) : obj.attachEvent("on"+event,function(){func.call(obj);})
}

var init = function(opt){
this.option = {
element : null,
}

extend(this.option,opt);
this.initialize();
}
init.prototype = {
initialize : function(){
this.canvas = this.createCanvas();
this.ctx = this.canvas.getContext("2d");
this.drawImages();

},
drawImages : function(){
var _this = this;
var image = new Image();
image.src = $('images').src;
console.log(image);
image.onload = function(){
onload = 1; //代表图片加载完成
$(_this.option.element).style.width = parseInt(image.width)+"px";
$(_this.option.element).style.height = parseInt(image.height)+"px";
_this.canvas.width = parseInt(image.width);
_this.canvas.height = parseInt(image.height);
_this.ctx.drawImage(image,0,0);
var imageData = _this.ctx.getImageData(0,0,image.width,image.height); //getImageData有跨域问题，建立服务器访问，或在火狐浏览
// console.log(imageData.data);

//马赛克思路：
/**
定义马赛克的宽度，初始的步进值
在循环imagedata时，每隔宽度，就获取一次新的imagedata

例如初始获取 imagedata[0] 的值，下一个就是 imagedata[10] 的值
imagedata.data[0-9] 的值都是 imagedata[0]的值
imagedata.data[10-19] 的值都是 imagedata[10]的值
如此类推

*/
var pxwidth = 10; //马赛克宽度
var pxset = 0; //步进值，因为imagedata循环的步进值是4,所以要另外设置一个步进值
var pxR = imageData.data[0]; //初始数据
var pxG = imageData.data[1]; //初始数据
var pxB = imageData.data[2]; //初始数据
var pxA = imageData.data[3]; //初始数据

for(var i = 0;i < imageData.data.length;i += 4){
if(pxset % pxwidth == 0){
pxR = imageData.data[i];
pxG = imageData.data[i+1];
pxB = imageData.data[i+2];
pxA = imageData.data[i+3];
}
imageData.data[i] = pxR;
imageData.data[i+1] = pxG;
imageData.data[i+2] = pxB;
imageData.data[i+3] = pxA;
pxset++;

}
_this.ctx.putImageData(imageData,0,0);
}
},
createCanvas : function(){
var canvas = document.createElement("CANVAS");
canvas.innerHTML = "您的浏览器不支持canvas，赶紧换一个吧！";
$(this.option.element).appendChild(canvas);
canvas.width = parseInt($(this.option.element).style.width);
canvas.height = parseInt($(this.option.element).style.height);
return canvas;
}
}
return init; //暴露参数给调用

}(jquery || {}))

window.onload = function(){
var option = {
element : "canvas",
}
new test(option);
}
</script>

阅读全文

0 0