<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
canvas{
/*border: 1px solid #ddd;*/
}
</style>
</head>
<body>
<canvas></canvas>
<script>
//获取canvas对象
var canvas = document.querySelector(‘canvas‘);
//设置画布的宽高
canvas.width = 600;
canvas.height = 500;
//2 获取画笔对象
var ctx = canvas.getContext(‘2d‘);
// 3 绘制图片
var img = new Image;
img.src = ‘./img/img23.jpg‘;
img.onload = function(){
ctx.drawImage(img,0,0,600,600 * img.height / img.width);
// 随机颜色显示
var imgData = ctx.getImageData(0,0,canvas.width,canvas.height);
var size = 6;
for(var i =0; i< canvas.width;i+=size){
for(var j=0;j<canvas.height;j+=size){
// 获取坐标点的颜色
var color = getPixel(imgData,i,j);
for(var a=i; a< i + size;a++){
for(var b=j;b<j+size;b++){
setPixel(imgData,a,b,color);
}
}
}
}
// 设置像素 点信息
ctx.putImageData(imgData,0,0);
}
function getPixel(imgData, x, y){
var index = y * 4 * imgData.width + x * 4;
var d = [];
d[0] = imgData.data[index];
d[1] = imgData.data[index+1];
d[2] = imgData.data[index+2];
d[3] = imgData.data[index+3];
return d;
}
// 修改颜色
function setPixel(imgData,x,y,colors){
var index = y * 4 * imgData.width + x * 4;
imgData.data[index] = colors[0];
imgData.data[index+1] = colors[1];
imgData.data[index+2] = colors[2];
imgData.data[index+3] = colors[3];
}
</script>
</body>
</html>
原文：https://www.cnblogs.com/eric-share/p/13773704.html