mardi 27 janvier 2015

HTML Canvas Pixalation Image problem


hello everyone I need help I'm trying to show an example of Pixelation with an image but it wont work i don't what I'm doing wrong here is my code



<html>
<head>
<title>jjj</title>

<script language="JavaScript" type="text/javascript">
<!--
var image = new Image();
image.src = "http://ift.tt/1Ce9KMb";
$(image).load(function(){ context.drawImage (image,0,0,1024,683,0,0,500,500);

var imageData = context.getImageData(0,0, canvas.width(), canvas.height());
var pixels = imageData.data;

context.clearRect(0,0, canvas.width(), canvas.height());

var numTileRows = 20;
var numTileCols = 20;

var tileWidth = imageData.width/numTileCols;
var tileHeight = imageData.height/numTileRows;

for (var r = 0; r < numTileRows; r++){
for (var c = 0; c < numTileCols; c++){
};
};
});


var red = pixels[pos];
var green = pixels[pos+1];
var blue = pixels[pos+2];

context.fillStyle = "rgb"("+red+", "+green+", "+blue+");
context.fillRect(x-(tileWidth/2), y-(tileHeight/2), tileWidth,tileHeight);
//-->
</script>
</head>
<body>
<canvas id="myCanvas" width="500" height="500">
<!-- Insert fallback content here -->
</canvas>
</body>
</html>




Aucun commentaire:

Enregistrer un commentaire