【VUE3.0】如何得到一张像素风格的图片？

引言
网络途径获取
代码转换已有的图片
- 0. 先看效果
- 1. 上传图片，这个没什么好说的，前端上传图片基本操作。
- 2. 通过滑动条提供一个1-10的数字，用于放缩图片画质。
- 3. 函数拿到图片资源后先对图片进行缩小100倍尺寸处理，此时画质已经崩的的很离谱，不过没关系要的就是这个效果。
- 4. 再将得到的缩小的图像投射到canvas上放大100倍，注意此时要将抗锯齿关掉，因为我们需要每个像素不平滑。
- 5. 将结果转换为下载链接赋予一个按钮提供下载图片。
- 6. 完整代码（基于vue3.0）
总结

引言

像素风图片是一种以像素为基本单位的图像风格。在数字图像中，每一个像素实际上就是一个小方块，它有自己的颜色。在早期的计算机图形学中，由于硬件限制，图像分辨率较低，因此图像由较大且明显的像素组成。随着时间的发展和技术的进步，虽然我们可以创建更高分辨率的图像，但是像素艺术（Pixel Art）作为一种复古的艺术形式依然受到许多人的喜爱。

基于我写的一个像素风组件库教程，引出一个问题：我该如何得到一张像素风的图片？
像素风组件库教程

网络途径获取

获得一种资源的最直接的方式就是白嫖从网络中查找免费资源。我整理了几个比较喜欢的像素风的资源：

DOTOWN：这是一个来自于前田设计事务所的专注于像素风图片设计的网站，可以用作商业用途（日文猜的=。=），网站素材做了分类，每个种类的数量和质量都还不错。
网站地址：DOTOWN
KENNEY：这是一个游戏素材网站，我猜测为游戏设计的素材会更强调加载性能，所以不用担心素材的大小问题，应该是已经优化过的状态。素材包含：2d、3d、Audio、Textures等，根据需求选取。下载时会问你要不要捐助，点下边的小字Continue without donating...下载即可。
网站地址：KENNEY
iconfont：阿里巴巴矢量图标库，这个没什么好介绍的，做前端的应该都懂，全局搜pixel或像素即可获取到跟像素相关icon。

代码转换已有的图片

这部分代码可以由纯前端来完成，处理逻辑如下：

0. 先看效果

像素化

1. 上传图片，这个没什么好说的，前端上传图片基本操作。

// html部分
<inputclass="fileInput"type="file"accept="image/*"@change="handleFile"
/>
// js部分
let currentImage = ref("");
function handleFile(e) {let file = e.target.files[0];if (!file.type.match("image.*")) {return;}let reader = new FileReader();reader.readAsDataURL(file);reader.onload = function (data) {currentImage.value = data.target.result;render();};
}

2. 通过滑动条提供一个1-10的数字，用于放缩图片画质。

// html部分
<inputclass="slider"type="range"min="1"max="10"v-model="scale"@change="changeScale"
/>
// js部分
let scale = ref(1);
function changeScale() {render();
}

3. 函数拿到图片资源后先对图片进行缩小100倍尺寸处理，此时画质已经崩的的很离谱，不过没关系要的就是这个效果。

function render() {// 判断图片是否存在if (!currentImage.value) {alert("请先上传图片");return;}// 创建临时canvas用于处理图片const canvasTemp = document.createElement("canvas");const context = canvasTemp.getContext("2d");const image = new Image();image.src = currentImage.value;image.onload = function () {// 缩小画面尺寸并绘制在临时canvas上canvasTemp.width = (image.width * scale.value) / 100;canvasTemp.height = (image.height * scale.value) / 100;context.drawImage(image, 0, 0, canvasTemp.width, canvasTemp.height);};
}

4. 再将得到的缩小的图像投射到canvas上放大100倍，注意此时要将抗锯齿关掉，因为我们需要每个像素不平滑。

// html部分<section class="outputImg" ref="outputImg"><h3>preview:</h3><canvas ref="conversionView"></canvas></section>
// js部分// 继续在步骤三的image.onload函数中添加逻辑const dataURL = canvasTemp.toDataURL();const ctx = conversionView.value.getContext("2d");const img = new Image();img.src = dataURL;img.onload = function () {let defaultWidth = outputImg.value.offsetWidth * 0.8;// 这里的0.618只是个自己定的比例没啥特殊含义，主要是为了放置图片宽高比太离谱超出页面宽高。let defaultHeight = defaultWidth * 0.618;// 将图片大小还原回去let imgWidth = (img.width * 100) / scale.value;let imgHeight = (img.height * 100) / scale.value;// 这里处理好宽高比例让投射出来的图像不要超出屏幕范围导致产生滚动就好。if (imgWidth >= imgHeight / 0.618) {imgHeight = (defaultWidth / imgWidth) * imgHeight;imgWidth = defaultWidth;} else {imgWidth = (defaultHeight / imgHeight) * imgWidth;imgHeight = defaultHeight;}// 确定好画框的宽高conversionView.value.width = imgWidth;conversionView.value.height = imgHeight;// 关闭抗锯齿ctx.imageSmoothingEnabled = false;ctx.mozImageSmoothingEnabled = false;ctx.webkitImageSmoothingEnabled = false;ctx.msImageSmoothingEnabled = false;// 绘制图片到预览区域ctx.drawImage(img, 0, 0, imgWidth, imgHeight);

5. 将结果转换为下载链接赋予一个按钮提供下载图片。

// html区域
<a ref="downloadBtn" class="downloadBtn">download</a>
// js部分// 继续在步骤四的img.onload函数中添加逻辑
downloadBtn.value.download = "pixel.png";
downloadBtn.value.href = conversionView.value.toDataURL();

6. 完整代码（基于vue3.0）

此处某些样式可能在这里找不到来源，不过不影响使用。如果对样式部分有需求的朋友，可以参考我的

<template><div class="container"><section class="inputImg"><label class="inputArea"><inputclass="fileInput"type="file"accept="image/*"@change="handleFile"/><span class="placeholder" v-show="!currentImage">点击上传图片或拖拽图片至此处</span><img v-show="currentImage" class="preview" :src="currentImage" /></label><label class="pixelSlider"><span class="sliderTitle">像素大小</span><inputclass="slider"type="range"min="1"max="10"v-model="scale"@change="changeScale"/><span class="sliderText">{{ scale }}</span></label></section><section class="outputImg" ref="outputImg"><h3>preview:</h3><canvas ref="conversionView"></canvas><a ref="downloadBtn" class="downloadBtn">download</a></section></div>
</template>
<script setup>
import { ref } from "@vue/reactivity";
let currentImage = ref("");
let scale = ref(1);
const conversionView = ref(null);
const outputImg = ref(null);
const downloadBtn = ref(null);
function handleFile(e) {let file = e.target.files[0];if (!file.type.match("image.*")) {return;}let reader = new FileReader();reader.readAsDataURL(file);reader.onload = function (data) {currentImage.value = data.target.result;render();};
}
function changeScale() {render();
}
function render() {if (!currentImage.value) {alert("请先上传图片");return;}const canvasTemp = document.createElement("canvas");const context = canvasTemp.getContext("2d");const image = new Image();image.src = currentImage.value;image.onload = function () {canvasTemp.width = (image.width * scale.value) / 100;canvasTemp.height = (image.height * scale.value) / 100;context.drawImage(image, 0, 0, canvasTemp.width, canvasTemp.height);const dataURL = canvasTemp.toDataURL();const ctx = conversionView.value.getContext("2d");const img = new Image();img.src = dataURL;img.onload = function () {let defaultWidth = outputImg.value.offsetWidth * 0.8;let defaultHeight = defaultWidth * 0.618;let imgWidth = (img.width * 100) / scale.value;let imgHeight = (img.height * 100) / scale.value;if (imgWidth >= imgHeight / 0.618) {imgHeight = (defaultWidth / imgWidth) * imgHeight;imgWidth = defaultWidth;} else {imgWidth = (defaultHeight / imgHeight) * imgWidth;imgHeight = defaultHeight;}conversionView.value.width = imgWidth;conversionView.value.height = imgHeight;ctx.imageSmoothingEnabled = false;ctx.mozImageSmoothingEnabled = false;ctx.webkitImageSmoothingEnabled = false;ctx.msImageSmoothingEnabled = false;ctx.drawImage(img, 0, 0, imgWidth, imgHeight);downloadBtn.value.download = "pixel.png";downloadBtn.value.href = conversionView.value.toDataURL();};};
}
</script>
<style scoped>
.container {width: 100%;display: grid;grid-template-columns: 2fr 3fr;
}
.inputArea {margin: 0 auto;margin-top: 70px;display: block;width: 80%;height: 300px;position: relative;border-radius: 5px;border: 1px solid #333;box-shadow: 5px 5px #333;
}
.placeholder {display: block;text-align: center;line-height: 300px;font-family: pixel_en, pixel_ch;font-weight: bold;
}
.pixelSlider {margin: 30px auto;display: grid;grid-template-columns: 2fr 3fr 1fr;align-items: center;justify-items: center;width: 80%;cursor: var(--cursor_normal);
}
.sliderTitle {font-family: pixel_en, pixel_ch;
}
.slider {width: 100%;cursor: var(--cursor_pointer);
}
.sliderText {font-family: pixel_en, pixel_ch;
}
.fileInput {width: 100%;height: 100%;position: absolute;z-index: 10;opacity: 0;cursor: var(--cursor_pointer);
}
.preview {position: absolute;width: 100%;height: 100%;object-fit: contain;top: 0;cursor: var(--cursor_pointer);
}
.outputImg {display: flex;flex-direction: column;align-items: flex-start;
}
h3 {margin-top: 30px;font-family: pixel_en, pixel_ch;font-size: var(--title_large);margin-left: 20%;
}
canvas {border: 1px solid;border-radius: 5px;box-shadow: 5px 5px #333;align-self: center;
}
.downloadBtn {display: block;width: 180px;height: 80px;text-align: center;line-height: 80px;border: 1px solid;border-radius: 50%;box-shadow: 5px 5px #333;transform: skewX(-8deg);margin-top: 40px;font-family: pixel_en, pixel_ch;font-size: var(--text_large);cursor: var(--cursor_pointer);align-self: center;text-decoration: none;color: black;margin-bottom: 40px;
}
</style>