首页 > 网页制作 >Canvas绘制像素风图片的示例代码

Canvas绘制像素风图片的示例代码

来源：互联网 2026-04-14 17:52:02

前言你是否还记得童年玩红白机的时光？尤其是国内小霸王游戏机风靡的年代。那个身穿背带裤、留着大胡子的马里奥大叔形象，是否至今仍历历在目？这种独特的视觉风格，便是像素艺术。它的精髓在于，能够使用极为简单的色块，组合出复杂且令人过目不忘的画面。正因其构成单元极为纯粹，反而带来了无限的创作可能。本文将探

前言

你是否还记得童年玩红白机的时光？尤其是国内小霸王游戏机风靡的年代。那个身穿背带裤、留着大胡子的马里奥大叔形象，是否至今仍历历在目？

Canvas绘制像素风图片的示例代码

长期稳定更新的攒劲资源： >>>点此立即查看<<<

这种独特的视觉风格，便是像素艺术。它的精髓在于，能够使用极为简单的色块，组合出复杂且令人过目不忘的画面。正因其构成单元极为纯粹，反而带来了无限的创作可能。本文将探讨一个有趣的技术实践：如何将一张普通的高清图片，批量转换为充满怀旧感的像素风格图片。作为笔者的第一篇技术短文，若有不足之处，敬请谅解。

像素艺术转换原理

如何将清晰的图片转变为像素风格？关键在于理解像素画的本质——它是由一个个不重叠的纯色色块排列组合而成的图像。

Canvas绘制像素风图片的示例代码

因此，实现思路非常清晰：首先，上传并绘制原始图片。然后，以网格采样的方式，按固定间隔获取指定位置的颜色值与坐标。最后，将这些采集到的颜色值，以“放大色块”的形式重新绘制到画布的对应区域。一张像素风格图片的生成原理，便是如此。

实现步骤详解

1. 上传原始图片

第一步是在页面中添加文件上传控件。通过accept属性限制上传文件类型为常见的JPEG和PNG格式。同时监听输入框的change事件，以便在用户选择文件后立即获取文件对象。

接下来定义核心的uploadImage函数。

function uploadImage(e) {
    let file = e.target.files[0];
    if (!file) return;
    let fileReader = new FileReader();
    fileReader.readAsDataURL(file);
    fileReader.onload = () => {
        createImage(fileReader);
        e.target.value = "";
        document.querySelectorAll("canvas").forEach(node=>{node.remove();})
    };
}
function createImage(obj) {
    let img = new Image();
    img.onload = () => {
        drawImage(img);
    };
    img.src = obj.result;
}

此函数使用FileReader读取文件，并从fileReader.result获取图片的DataURL。随后调用createImage函数，将地址实例化为Image对象，便于Canvas绘制。保持函数功能单一性是一种良好的编程习惯。

2. 绘制原始图片

function drawImage(img) {
        let canvas = document.createElement("canvas");
        let ctx = canvas.getContext("2d");
        canvas.width = ctx.width;
        canvas.height = ctx.heigh
        let w = img.width,
          h = img.height;
        ctx.drawImage(img,0,0,w,h);
        document.body.appendChild(canvas);
 }

Canvas绘制像素风图片的示例代码

我们先通过以上代码将图片原样绘制到画布上。现在需要明确：我们希望生成多大尺寸、多精细的像素画？以下全局变量用于控制最终效果：

let width = 32;
let height = 32;
let size = 10;

width和height定义像素画的“分辨率”，即宽度和高度上的色块数量。size决定每个色块在画布上的实际像素尺寸，也等同于采样间隔：每隔size个像素采集一次颜色值。

基于这些变量，我们改造drawImage函数：

function drawImage(img) {
    let canvas = document.createElement("canvas");
    let ctx = canvas.getContext("2d");
    canvas.width = ctx.width = width * size;
    canvas.height = ctx.height = height * size;
    let w = img.width,
        h = img.height;
    let v = w / h;
    if (v > 1) {
        w = width;
        h = w / v;
    } else {
        h = height;
        w = h * v;
    }
    ctx.drawImage(
        img,
        ((width - w) / 2) * size,
        ((height - h) / 2) * size,
        w * size,
        h * size
    );
    document.body.appendChild(canvas);

    let pxMap = createPxMap(ctx);
    drawPXCanvas(pxMap)
}

在将原始图片适应并居中绘制于像素画布后，我们需要生成一个包含所有像素点信息的数组，即像素画的“配方”，用于后续生成像素风格图片。

3. 生成并绘制像素画

function createPxMap(ctx){
    let pxMap = [];
    for (let i = 0; i < width * size; i += size) {
        for (let j = 0; j < height * size; j += size) {
            let pixel = ctx.getImageData(i, j, 1, 1).data;
            let color = `rgba(${pixel[0]},${pixel[1]},${pixel[2]},${pixel[3]/255})`;
            pxMap.push({ x: i / size, y: j / size, color });
        }
    }
    return pxMap;
}

此函数负责颜色采集。通过双重循环按size间隔进行网格化采样。ctx.getImageData方法获取指定位置像素的RGBA数据，我们将颜色信息及其对应的网格坐标（归一化至像素画分辨率）一并存储。

最后进行像素画绘制：

function drawPXCanvas(pxMap) {
    let canvas = document.createElement("canvas");
    let ctx = canvas.getContext("2d");
    canvas.width = ctx.width = width * size;
    canvas.height = ctx.height = height * size;
    pxMap.forEach((px) => {
        const { color, x, y } = px;
        ctx.fillStyle = color;
        ctx.fillRect(x*size, y*size, size, size);
    });
    document.body.appendChild(canvas);
}

创建新画布，遍历“像素配方”数组，将每个颜色填充至对应网格位置。当所有色块绘制完成，一幅完整的像素风格图片便呈现出来。整个过程逻辑清晰直接。

Canvas绘制像素风图片的示例代码