<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script> window.onload = function (){ var oc = document.getElementById('c1'); var ogc = oc.getContext('2d'); var yimg = new Image(); yimg.onload = function () { draw(this); }; yimg.src = 'img/5-5.jpg'; function draw(obj) { oc.width = obj.width; oc.height = obj.height * 2; ogc.drawImage(obj,0,0); var oimg = ogc.getImageData(0,0,obj.width,obj.height); var w = oimg.width; var h = oimg.height; var num = 5; var newimg = ogc.createImageData(obj.width,obj.height); var stepw = w/num; var steph = h/num; for(var i = 0; i < steph; i++) { for(var j = 0; j < stepw; j++) { var color = getXY(oimg,j*num+Math.floor(Math.random()*num),i*num+Math.floor(Math.random()*num)); for(var k = 0; k < num; k++) { for(var l = 0; l < num; l++) { setXY(newimg,j*num+l,i*num+k,color); } } } } ogc.putImageData(newimg,0,obj.height); } function getXY(obj,x,y) { var w = obj.width; var h = obj.height; var d = obj.data; var color = []; color[0] = d[ 4*(y*w+x)]; color[1] = d[ 4*(y*w+x) +1]; color[2] = d[ 4*(y*w+x) +2]; color[3] = d[ 4*(y*w+x) +3]; return color; } function setXY(obj,x,y,color) { var w = obj.width; var h = obj.height; var d = obj.data; d[ 4*(y*w+x)] = color[0]; d[ 4*(y*w+x) +1] = color[1]; d[ 4*(y*w+x) +2] = color[2]; d[ 4*(y*w+x) +3] = color[3]; } } </script> <style> body{ background:pink; } #c1{ background:white; } </style> </head> <body> <canvas id="c1" width="400" height="400"></canvas> </body> </html>