canvas实现图片像素化（可调整像素大小、替换图片）

已于 2024-08-21 16:47:58 修改
阅读量480 收藏 4
点赞数 4
分类专栏： 前端常见用法 文章标签： 前端 vue.js javascript css
于 2024-08-15 15:01:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52395343/article/details/141220928
版权

请添加图片描述
实现效果：通过调整像素大小实现图片像素化效果，也可以对图片进行替换

案例1：
在这里插入图片描述
案例2：
在这里插入图片描述

实现图片转像素画的关键点

  • 获取像素数据：通过 Canvas 的 getImageData 方法获取图片的像素数据。这个方法会返回一个包含图片所有像素信息的对象。
  • 像素化算法：实现像素化效果的核心是对图片的像素进行处理。通常会将图片分成若干小块，然后计算每块的平均颜色，并将这块区域的所有像素设置为这个平均颜色。
  • 绘制像素化图片：将处理后的像素数据重新绘制到 Canvas 上，生成像素化效果的图片。

像素化处理函数

 const pixelate = (
  ctx: CanvasRenderingContext2D,
  width: number,
  height: number,
  pixelSize: number
) => {
  // 从画布捕获图像数据
  const imageData = ctx.getImageData(0, 0, width, height);
  // 包含像素数据（RGBA 值）的数组
  const data = imageData.data;
  for (let y = 0; y < height; y += pixelSize) {
    for (let x = 0; x < width; x += pixelSize) {
      // 对于每个像素块，提取左上角像素的颜色。
      const red = data[(width * y + x) * 4];
      const green = data[(width * y + x) * 4 + 1];
      const blue = data[(width * y + x) * 4 + 2];
      // 使用该颜色填充像素块
      ctx.fillStyle = `rgb(${red},${green},${blue})`;
      ctx.fillRect(x, y, pixelSize, pixelSize);
    }
  }
};

🔍Canvas的基本介绍与使用

全部代码（案例1）：

<template>
  <div class="p-30">
    <div class="item-wrap mb-12">
      像素大小
      <el-slider
        v-show="imgUrl"
        v-model="pixelSize"
        style="width:50%"
        :min="2"
        :max="50"
      />
    </div>
    <div class="item-wrap">
      <el-image v-show="imgUrl" :src="imgUrl" fit="cover" class="w-600 h-400" />
      <canvas ref="canvas"></canvas>
    </div>
  </div>
</template>
<script setup lang="ts">
// 像素大小
const pixelSize = ref(10);
const rawFile = ref();
const canvas = ref<HTMLCanvasElement | null>(null);
const imgUrl = ref(
  "https://ts1.cn.mm.bing.net/th/id/R-C.e9e7a51477505f71fd2c2fe5fec52b9b?rik=xV6rWM2vq9wKAA&riu=http%3a%2f%2fwww.deskcar.com%2fdesktop%2ffengjing%2f2014330120325%2f4.jpg&ehk=51IkWePiwFEPiX1GYM7kmYeSWt%2b%2bjz9xUWECm5HN7Qo%3d&risl=&pid=ImgRaw&r=0"
);

// 重新绘制
watch(pixelSize, () => {
  redrawCanvas();
});
// 路径url转成file文件格式
async function convertUrlToFile(imageUrl: string, fileName: string) {
  try {
    // 发起GET请求获取资源，设置responseType为blob
    const response = await fetch(imageUrl, { method: "GET", mode: "cors" });
    // 检查请求是否成功
    if (!response.ok) {
      throw new Error("图片加载失败！");
    }
    // 获取Blob数据
    const blob = await response.blob();
    // 创建File对象
    const file = new File([blob], fileName, { type: blob.type });
    return file;
  } catch (error) {
    console.error("图片url转换Blob失败!", error);
    return null;
  }
}
onMounted(async () => {
  rawFile.value = await convertUrlToFile(imgUrl.value, "demo.jpg");
  if (rawFile.value) {
    redrawCanvas();
  }
});
// 重新绘制画布
const redrawCanvas = () => {
  if (canvas.value) {
    const ctx = canvas.value.getContext("2d");
    ctx?.clearRect(0, 0, canvas.value.width, canvas.value.height);
  }
  loadImage(rawFile.value);
};
const loadImage = (file: File) => {
  const reader = new FileReader();
  // 读取文件内容，加载完成后触发
  reader.onload = (e) => {
    const img = new Image();
    img.onload = () => {
      if (!canvas.value) return;
      const ctx = canvas.value.getContext("2d") as CanvasRenderingContext2D;
      // canvas画布大小
      canvas.value.width = 600;
      canvas.value.height = 400;
      // 将图像绘制到指定的 canvas 上
      ctx.drawImage(img, 0, 0, canvas.value.width, canvas.value.height);
      // 对canvas内容进行像素化处理
      pixelate(ctx, canvas.value.width, canvas.value.height, pixelSize.value);
    };
    img.src = e.target?.result as string;
  };
  reader.readAsDataURL(file);
};
// 图像像素化
const pixelate = (
  ctx: CanvasRenderingContext2D,
  width: number,
  height: number,
  pixelSize: number
) => {
  // 从画布捕获图像数据
  const imageData = ctx.getImageData(0, 0, width, height);
  // 包含像素数据（RGBA 值）的数组
  const data = imageData.data;
  for (let y = 0; y < height; y += pixelSize) {
    for (let x = 0; x < width; x += pixelSize) {
      // 对于每个像素块，提取左上角像素的颜色。
      const red = data[(width * y + x) * 4];
      const green = data[(width * y + x) * 4 + 1];
      const blue = data[(width * y + x) * 4 + 2];
      // 使用该颜色填充像素块
      ctx.fillStyle = `rgb(${red},${green},${blue})`;
      ctx.fillRect(x, y, pixelSize, pixelSize);
    }
  }
};
</script>
<style scoped>
.item-wrap{
  display: flex;
  gap: 12px;
}
</style>

全部代码（案例2）：支持图片上传

<template>
  <div class="p-30">
    <el-upload
      class="mb-12"
      accept=".jpeg,.jpg,.png"
      :auto-upload="false"
      :show-file-list="false"
      :on-change="handleChanges"
    >
      <template #trigger>
        <el-button type="primary"> 点击替换图片 </el-button>
      </template>
    </el-upload>
    <div class="item-wrap mb-12">
      像素大小
      <el-slider
        v-show="imgUrl"
        v-model="pixelSize"
        style="width: 50%"
        :min="2"
        :max="50"
      />
    </div>
    <div class="item-wrap">
      <el-image v-show="imgUrl" :src="imgUrl" fit="cover" class="w-600 h-400" />
      <canvas ref="canvas"></canvas>
    </div>
  </div>
</template>
<script setup lang="ts">
// 像素大小
const pixelSize = ref(10);
const rawFile = ref();
const canvas = ref<HTMLCanvasElement | null>(null);
const imgUrl = ref(
  "https://ts1.cn.mm.bing.net/th/id/R-C.e9e7a51477505f71fd2c2fe5fec52b9b?rik=xV6rWM2vq9wKAA&riu=http%3a%2f%2fwww.deskcar.com%2fdesktop%2ffengjing%2f2014330120325%2f4.jpg&ehk=51IkWePiwFEPiX1GYM7kmYeSWt%2b%2bjz9xUWECm5HN7Qo%3d&risl=&pid=ImgRaw&r=0"
);

// 重新绘制
watch(pixelSize, () => {
  redrawCanvas();
});
// 路径url转成file文件格式
async function convertUrlToFile(imageUrl: string, fileName: string) {
  try {
    // 发起GET请求获取资源，设置responseType为blob
    const response = await fetch(imageUrl, { method: "GET", mode: "cors" });
    // 检查请求是否成功
    if (!response.ok) {
      throw new Error("图片加载失败！");
    }
    // 获取Blob数据
    const blob = await response.blob();
    // 创建File对象
    const file = new File([blob], fileName, { type: blob.type });
    return file;
  } catch (error) {
    console.error("图片url转换Blob失败!", error);
    return null;
  }
}
onMounted(async () => {
  rawFile.value = await convertUrlToFile(imgUrl.value, "demo.jpg");
  if (rawFile.value) {
    redrawCanvas();
  }
});
// 重新绘制画布
const redrawCanvas = () => {
  if (canvas.value) {
    const ctx = canvas.value.getContext("2d");
    ctx?.clearRect(0, 0, canvas.value.width, canvas.value.height);
  }
  loadImage(rawFile.value);
};
const loadImage = (file: File) => {
  const reader = new FileReader();
  // 读取文件内容，加载完成后触发
  reader.onload = (e) => {
    const img = new Image();
    img.onload = () => {
      if (!canvas.value) return;
      const ctx = canvas.value.getContext("2d") as CanvasRenderingContext2D;
      // canvas画布大小
      canvas.value.width = 600;
      canvas.value.height = 400;
      // 将图像绘制到指定的 canvas 上
      ctx.drawImage(img, 0, 0, canvas.value.width, canvas.value.height);
      // 对canvas内容进行像素化处理
      pixelate(ctx, canvas.value.width, canvas.value.height, pixelSize.value);
    };
    img.src = e.target?.result as string;
  };
  reader.readAsDataURL(file);
};
// 图像像素化
const pixelate = (
  ctx: CanvasRenderingContext2D,
  width: number,
  height: number,
  pixelSize: number
) => {
  // 从画布捕获图像数据
  const imageData = ctx.getImageData(0, 0, width, height);
  // 包含像素数据（RGBA 值）的数组
  const data = imageData.data;
  for (let y = 0; y < height; y += pixelSize) {
    for (let x = 0; x < width; x += pixelSize) {
      // 对于每个像素块，提取左上角像素的颜色。
      const red = data[(width * y + x) * 4];
      const green = data[(width * y + x) * 4 + 1];
      const blue = data[(width * y + x) * 4 + 2];
      // 使用该颜色填充像素块
      ctx.fillStyle = `rgb(${red},${green},${blue})`;
      ctx.fillRect(x, y, pixelSize, pixelSize);
    }
  }
};
// File转base64
function fileToBase64(file: File) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = (error) => reject(error);
  });
}
// 图片替换
const handleChanges = async (file: any) => {
  rawFile.value = file.raw;
  loadImage(file.raw);
  imgUrl.value = (await fileToBase64(file.raw)) as string;
};
</script>
<style scoped>
.item-wrap {
  display: flex;
  gap: 12px;
}
</style>

进一步美化后：
在这里插入图片描述

白桃与猫
关注
专栏目录
实践篇·让你的图片特别起来—自定义像素化
u013884777的专栏
08-18 2172
今天我们来进行一个项目的实践。 我们准备克隆一个Git上的项目，然后使用它做一些事情。 当然，我们不会写代码到底怎么运行的，因为那样要写上千字，还不一定能讲清楚，感兴趣的盒友，可以自己根据之前我讲的东西，自行研究。 项目介绍 Tiler是一个创建图片的工具，它可以使用不同种类的，更小的其他图片来组成新的图片—tiles。 我们可以认为这就是一个把正常图片，进行像素化的工具。 它与其他类似工具不同的地方在于，它可以适应不同大小，不同形状的tiles（不局限说正方形）。 可以使用圆圈，线段，波纹，
Canvas分辨率调整
Computer_whites的博客
06-29 4051
using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; public class CanvasScalers : MonoBehaviour {     void Start()     {         float Standar
滤镜之像素化Pixelate
学无止境
10-15 2144
像素化可以认为是马赛克，是比较常见的滤镜了，也是一个比较简单的滤镜。在很多的移动图像处理软件中都有这个功能，可以实现交互指定需要马赛克的地方。下图是实现的一些效果：   实现原理：        设定马赛克块的大小，统计每个块中所有像素的平均值，以平均值代替每个块中的像素值即是马赛克的效果。如8x8的块，将64个像素加起来求均值，将均值赋值给这个64个像素（每个块中的像素值都是一样的）。
Canvas——操作像素
最新发布
mantou_riji的博客
01-17 1491
获取到的像素信息是一个一维数组，四个值是一个像素点的信息分别代表 rgba的四个值，取值都是0-255。// 获取画布的像素信息：画笔.getImageData(x1,y1,x2,y2)// 像素信息是一个一维数组，四个值是一个像素点的信息分别代表 rgba的四个值。（x1,y1）: ImageData 对象左上角的 x和y 坐标，以像素计。ImageData 对象左上角的 x 坐标，以像素计。水平值（x），以像素计，在画布上显示图像的位置。竖直值（y），以像素计，在画布上显示图像的位置。
cpp-一个图片像素化工具
08-16
一个图片像素化工具
canvas图像处理
AFeng521web
11-25 1182
canvas图像处理
canvas 像素操作（图片像素操作）
qq_17627195的博客
08-01 2417
ImageData对象中的每个像素都保存了rgba色值的四个值，这四个值以数组形式存在，并存储于ImageData对象的data属性中，并且是将所有的像素的rgba信息存到了一个一维数组里面。getImageData()方法返回ImageData对象，该对象拷贝了画布指定矩形的像素数据。ImageData对象不是图像，它规定了画布上一个部分（矩形），并保存了该矩形内每个像素的信息。方法将图像数据（从指定的ImageData对象）放回画布上。方法直接看下面的教程就可以，一看就明白了。......
canvas 处理图像（上）
p1967914901的博客
06-11 1082
本文将介绍在 Canvas 中使用图像的知识，包括加载图像和处理图像中的单个像素。Canvas 的这个功能可以用来创建一些炫丽的效果。本文还将教会你一般图像处理的知识。canvas 高级功能（下）讲述了如何将画布导出为图像，将它保存到本地和与他人共享。现在，我们将学习如何实现完全相反的操作：将图像加载到画布中。介绍这个功能的主要原因是，它使我们能够用2D渲染上下文方法对原本不是在画布中创建的图像进行处理。我们还可以使用几种特殊的像素处理 方法，对图像执行一些有趣的特殊操作，这将在下面介绍。将图像加载到画布中
谈谈文字图片像素化
weixin_34320159的博客
01-26 532
　　先来看个简单的demo-&gt; 像素粒子化 　　demo是基于3d旋转算法+像素粒子化实现的，尚有一些bug和性能问题，我们不做深究。本篇主要谈谈如何将文字和图片的像素粒子化。针对这个demo，也就是如何实现如下两个图片的转换。 　　      　　 　　无论文字还是图片，本篇所讲都是针对画布，这点要清楚。如果是文字，用fillText方法将文字写到画布上，如果是图片，则用drawI...
前端实现图片快速反转替换_canvas实现图片镜像翻转的2种方式
weixin_35910783的博客
01-14 1517
这篇文章我们来讲一下在网站建设中，canvas实现图片镜像翻转的2种方式。本文对大家进行网站开发设计工作或者学习都有一定帮助，下面让我们进入正文。1. 通过canvas自带的画布方法进行翻转var img = new Image(); //这个就是 img标签的dom对象img.src = './sy.png';img.onload = function () {//图片加载完成后，执行此方法ct...
canvas像素点操作之视频绿幕抠图
12-13
总结来说，canvas像素点操作在视频绿幕抠图中扮演了关键角色，通过精细的像素级操作，能够实现在Web环境中实时、动态地去除视频中的绿幕背景，为交互式多媒体应用提供了强大的支持。然而，需要注意的是，对于大规模...
canvas实现图片马赛克的示例代码
09-28
我们可以遍历`ImageData.data`数组，修改每个像素的RGB值，使其变得更接近于平均颜色，或者直接用特定颜色替换，从而达到模糊或像素化的效果。 4. 完成处理后，使用`putImageData()`方法将处理后的像素数据放回画布...
烟雾消散图片切换Canvas特效
07-24
我们可以设定一个像素块的大小，然后遍历上层Canvas的每个像素，将其替换为对应像素块内的平均颜色，从而达到马赛克的效果。 5. **动画效果**：为了实现动画，我们可以定期更新烟雾消散和马赛克的程度，或者改变像素...
Canvas实现图片切换功能
lakenQi
10-25 4487
这几天研究canvas制作动态背景的时候，发现这个东西稍微改改就变成图片切换的功能了，可以代替动态修改img标签的src属性，实现图片定时切换功能。先奉上代码： function switchPic(containerId, pics, { speed = 1000, width = 100, height = 100, callback = function(pic) {} } = ...
照片像素化项目(on Github)
架构设计
04-25 361
项目背景 女朋友喜欢十字绣，一直想着想要有个可以定制十字绣图片的软件或者应用。这件事也被她催了很久，我如果再不行动，一来丢了IT程序猿们的脸，二来她自己都要开始学神马计算机图形学，计算机视觉(明明更应该看看图像处理的好嘛！)。于是我google怒搜“图片像素化”。好吧，本以为这是一件图像处理的事情，结果最后得到了一个js的库，叫seuratjs。这个库本身是基于raphael,js的。把图片的像...
万圣节动画-canvas像素点
bestvist的博客
10-31 572
万圣节到了，写一个小例子了解一下canvas画图方法。 原文链接canvas可以实现一些有趣的效果，动画实现。以一个简单的页面实现了解一下基础的画图方法。效果万圣节快乐
canvas 处理图片
DongFuPanda的博客
09-06 183
canvas apis drawImage 绘图 getImageData 从 canvas 上截取指定区域 putImageData 把图片对象放置到指定区域 toDataURL 把 canvas 数据转成 base64 代码 <body> <canvas id="cvs" width="300" height="300"></canvas> <div id="img"></div> </body> 例子——移除单种颜色 con
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值