/uploads/20230629/2eaee9b252f48d95836aa8450fd97708.png,/uploads/20230629/25b2916b5c49db617f52fa5ea48efee7.jpg,.png" /> <script> document.querySelector("input[type=file]").addEventListener("change",uploadImage, false); </script>
首先我们先要在页面放置一个上传文件得input。这些用accept属性限制他得上传类型，因为涉及到常规的一些图片上传这里就传jpeg，jpg，png三种格式了。
与此同时，要监听他的改变从而拿到所需要转换的文件。
接下来我将定义一个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.result拿到上传后的图片地址了，再写一个createImage函数用来接收文件对象实例化成Image方便给画布绘制。毕竟一个函数尽量只做单一的一件事也算是个好习惯吧。
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);
}
我们先实现把图片绘制到画布上康康，到底啥样。现在我们就想了，我们到底要生成多大的像素画呢。这里我们想做一个全局变量吧。
let width = 32; let height = 32; let size = 10;
我们定义生成一个宽度，高度，像素尺寸。宽高故名思议，就是我们要生成多少宽多少个点，高多少个点的像素。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;
}
我首先要得到点的位置和颜色信息，ctx.getImageData可以获取到一个buffer数组，0-3位分别代表红，绿，蓝，透明度的信息。我们要将这些信息存储起来。
到了最后我们终于要可以绘制像素画了。
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);
}
我们要重新生成一个画布，将刚刚收集到的像素信息逐个绘制到画布上，这样一张简单的像素画就这么完成了，是不是很容易。
拓展
其实拿到像素信息的时候，可以不局限于canvas2d像素画了。
还有以下思路：
我们可以借助于css的box-shadow来生成像素画，用：root 或者scss 更容易控制大小和位置，配合animation生成动画也未尝不可。
- 像素孙悟空
- 像素小狐狸
甚至我们也可以拓展webgl的，生成3d像素，或者其他风格也未尝不可。
3d皮卡丘
我们可以将再深入分析像素化构成逐帧生成视频和动画。。。
到此这篇关于Canvas绘制像素风图片的示例代码的文章就介绍到这了,更多相关Canvas 像素风内容请搜索Devmax以前的文章或继续浏览下面的相关文章，希望大家以后多多支持Devmax！