如果文章对你有收获，还请不要吝啬【点赞??收藏?评论?】三连哦，你的鼓励将是我成长助力之一！谢谢！
先看实现效果
实现方式1：图片像素化处理
完整源码如下：
① 加载图片；② 点击图片即可像素化；③ 当然，你可以扩展比如一开始就将图片进行像素画，又或者选中指定图片进行像素化。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片像素化</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #333;
}
#pixelate {
width: 300px;
height: 300px;
image-rendering: pixelated;
cursor: pointer;
}
</style>
</head>
<body>
<img id="pixelate" src="./images/3d/美女2.png" alt="Pixelate Image" onclick="pixelateImage()">
<script>
function pixelateImage() {
const img = document.getElementById('pixelate');
const pixelSize = 10; // 像素块的大小
// 创建一个canvas元素
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
// 绘制图片到canvas
ctx.drawImage(img, 0, 0, img.width, img.height);
// 获取图片数据
const imageData = ctx.getImageData(0, 0, img.width, img.height);
const data = imageData.data;
// 像素化处理
for (let y = 0; y < img.height; y += pixelSize) {
for (let x = 0; x < img.width; x += pixelSize) {
const i = (y * img.width + x) * 4;
const r = data[i];
const g = data[i + 1];
const b = data[i + 2];
ctx.fillStyle = `rgb(${r}, ${g}, ${b})`;
ctx.fillRect(x, y, pixelSize, pixelSize);
}
}
// 将处理后的图片数据放回img元素
img.src = canvas.toDataURL();
}
</script>
</body>
</html>实现方式2：遮罩层模糊化处理-原生JS
先看实现效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片模糊化</title>
<!--
讲解：
HTML: 包含一个原始图片和一个用于模糊蒙版的<div>元素。
CSS: 使用filter: blur()属性来实现模糊效果，并设置蒙版的透明度。
JavaScript: 在页面加载完成后，将原始图片的URL设置为模糊蒙版的背景图片。
这个示例中，原始图片和模糊蒙版叠加在一起，通过CSS的filter: blur()属性实现模糊效果。你可以根据需要调整模糊程度和蒙版的透明度。
-->
<!-- <link rel="stylesheet" href="styles.css"> -->
<style type="text/css">
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.image-container {
position: relative;
width: 250px; /* 根据需要调整 */
height: 250px; /* 根据需要调整 */
}
#originalImage {
width: 100%;
height: 100%;
object-fit: cover;
}
.blur-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
filter: blur(10px); /* 调整模糊程度 */
opacity: 10; /* 调整透明度：值越小透明度越小，值越大越模糊 */
}
</style>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
const originalImage = document.getElementById('originalImage');
const blurredImage = document.getElementById('blurredImage');
// 设置模糊蒙版的背景图片
blurredImage.style.backgroundImage = `url(${originalImage.src})`;
});
</script>
</head>
<body>
<div class="image-container">
<img id="originalImage" src="./images/3d/美女2.png" alt="原始图片">
<div id="blurredImage" class="blur-overlay"></div>
</div>
<script src="script.js"></script>
</body>
</html>【推荐】实现方式3：遮罩层模糊化处理-第三方JS
完美效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片模糊化</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script type="text/javascript">
function preload() {
this.img = loadImage("./images/3d/美女2.png");
}
function setup() {
createCanvas(this.img.width , this.img.height );
this.img.filter(BLUR, 10); // 调整模糊程度(值越大图片越模糊)
image(this.img, 10, 10);
}
</script>
</head>
<body>
</body>
</html>小结
- CSS方法：简单快捷，适用于静态图片的模糊处理。
- JavaScript 和 Canvas方法：更灵活，可以动态处理图片，适用于需要交互的场景。
- P5.js方法：功能强大，适用于复杂的图像处理任务。
如果文章对你有收获，还请不要吝啬【点赞??收藏?评论?】三连哦，你的鼓励将是我成长助力之一！谢谢！