当前位置：首页 > article >正文

【第4章图像与视频】4.5 操作图像的像素

article 2025/6/2 7:43:10

文章目录

前言
示例-获取和修改图像数据
图像数据的遍历方式
图像滤镜
- 负片滤镜
- 黑白滤镜
- 浮雕滤镜
- filter滤镜属性

前言

getImageData() 与 putImageData() 这两个方法分别用来获取图像的像素信息，以及向图像中插入像素。与此同时，如果有需要，也可以修改像素的值，所以说，这两个方法能够让开发展对图像之中的像素进行任何可以想见的操作。

属性	描述
width	返回 ImageData 对象的宽度
height	返回 ImageData 对象的高度
data	返回一个对象，其包含指定的 ImageData 对象的图像数据

方法	描述
createImageData()	创建新的、空白的 ImageData 对象
getImageData()	返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据
putImageData()	把图像数据（从指定的 ImageData 对象）放回画布上

示例-获取和修改图像数据

使用getImageData()方法获取imagedata数据源，然后仅中心100*100区域替换原始Canvas。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>4-9-putImageData使用示例</title><style>html,body {margin: 0;padding: 0;}</style></head><body><canvas id="canvas" width="300" height="200"> canvas not supports </canvas><script>// 尺寸const width = 300,height = 200// 目标Canvas上下文const canvas = document.getElementById('canvas'),context = canvas.getContext('2d')// 目标图片const image1 = new Image()image1.src = './3.jpg'image1.onload = () => {context.drawImage(image1, 0, 0, width, height)}// 覆盖图片const image2 = new Image()image2.src = './2.jpg'image2.onload = function () {// 获取覆盖图数据const dirtyCanvas = document.createElement('canvas'),dirtyContext = dirtyCanvas.getContext('2d')// 设置屏幕外Canvas尺寸dirtyCanvas.width = widthdirtyCanvas.height = height// 绘制替换图dirtyContext.drawImage(this, 0, 0, width, height)// 此时可以得到imagedata数据const imagedata = dirtyContext.getImageData(0, 0, width, height)// console.log(imagedata)// 然后中间100*100区域替换目标Canvascontext.putImageData(imagedata, 0, 0, 100, 50, 100, 100)}</script></body>
</html>

图像数据的遍历方式

// 遍历每个像素
for (let i = 0; i < length, ++i) {value = data[i]
}// 反向遍历每个像素
index = length - 1
while (index > = 0) {value = data[index]index--
}// 只处理 alpha 值，不修改红、绿、蓝分量
for(let index=3; index < length - 4; index+=4) {data[index] = ... // Alpha
}// 只处理红、绿、蓝分量，不修改 alpha 值
for(let index=0; index < length - 4; index+=4) {data[index] = ... // Reddata[index + 1] = ... // Greendata[index + 2] = ... // Blue
}

图像滤镜

原始图片：
在这里插入图片描述

负片滤镜

负片滤镜会从 255 之中减去每个像素的红、绿、蓝分量值，再将差值设置回去，这样也就等于“反转”了该像素的颜色。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>4-13-负片滤镜</title><style>#canvas {background: rgba(0, 0, 0, 0.4);}</style></head><body><div id="controls">负片滤镜<input type="checkbox" id="negativeCheckbox" /></div><canvas id="canvas" width="1000" height="600"> canvas not supports </canvas><script>const canvas = document.getElementById('canvas'),context = canvas.getContext('2d'),negativeCheckbox = document.getElementById('negativeCheckbox')const image = new Image()image.src = './waterfall.png'image.onload = () => {context.drawImage(image, 0, 0, canvas.width, canvas.height)}negativeCheckbox.onchange = (e) => {const imagedata = context.getImageData(0, 0, canvas.width, canvas.height),data = imagedata.datafor (let i = 0; i < data.length - 4; i += 4) {data[i] = 255 - data[i]data[i + 1] = 255 - data[i + 1]data[i + 2] = 255 - data[i + 2]}context.putImageData(imagedata, 0, 0)}</script></body>
</html>

黑白滤镜

黑白滤镜会计算出每个像素红、绿、蓝分量值的平均值，然后将三个分量都设置为这一均值，于是，就把图像由彩色变成了黑白。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>4-14-黑白滤镜</title><style>#canvas {background: rgba(0, 0, 0, 0.4);}</style></head><body><div id="controls">黑白滤镜<input type="checkbox" id="drawInColorToggleChebox" /></div><canvas id="canvas" width="1000" height="600"> canvas not supports </canvas><script>const canvas = document.getElementById('canvas'),context = canvas.getContext('2d'),drawInColorToggleChebox = document.getElementById('drawInColorToggleChebox')function drawInColor() {context.drawImage(image, 0, 0, canvas.width, canvas.height)}function drawInBlackAndWhite() {const imagedata = context.getImageData(0, 0, canvas.width, canvas.height),data = imagedata.datafor (let i = 0; i < data.length - 4; i += 4) {average = (data[i] + data[i + 1] + data[i + 2]) / 3data[i] = averagedata[i + 1] = averagedata[i + 2] = average}context.putImageData(imagedata, 0, 0)}const image = new Image()image.src = './waterfall.png'image.onload = () => {drawInColor()}drawInColorToggleChebox.onchange = (e) => {if (e.target.checked) {drawInBlackAndWhite()} else {drawInColor()}}</script></body>
</html>

浮雕滤镜

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>4-14-浮雕滤镜</title><style>#canvas {background: rgba(0, 0, 0, 0.4);}</style></head><body><div id="controls">浮雕滤镜<input type="checkbox" id="embossCheckbox" /></div><canvas id="canvas" width="1000" height="600"> canvas not supports </canvas><script>const canvas = document.getElementById('canvas'),context = canvas.getContext('2d'),embossCheckbox = document.getElementById('embossCheckbox')function drawOriginalImage() {context.drawImage(image, 0, 0, canvas.width, canvas.height)}function drawEmbossImage() {let iamgedata, data, length, widthiamgedata = context.getImageData(0, 0, canvas.width, canvas.height)data = iamgedata.datalength = data.lengthwidth = iamgedata.widthindex = 3for (let i = 0; i < length; i++) {if ((i + 1) % 4 !== 0) {data[i] = 255 / 2 + 2 * data[i] - data[i + 4] - data[i + width * 4]}}context.putImageData(iamgedata, 0, 0)}const image = new Image()image.src = './waterfall.png'image.onload = () => {drawOriginalImage()}embossCheckbox.onchange = (e) => {if (e.target.checked) {drawEmbossImage()} else {drawOriginalImage()}}</script></body>
</html>

filter滤镜属性

Canvas 2D API 的 CanvasRenderingContext2D.filter 属性是用来提供模糊、灰度等滤镜效果。它类似于 CSS filter 属性，并且接受相同的值。

具体说明见 MDN-filter 或 Canvas API中文网

在这里插入图片描述

【第4章图像与视频】4.5 操作图像的像素

文章目录前言示例-获取和修改图像数据图像数据的遍历方式图像滤镜负片滤镜黑白滤镜浮雕滤镜filter滤镜属性前言 getImageData() 与 putImageData() 这两个方法分别用来获取图像的像素信息，以及向图像中插入像素。与此同时，如果有需要，也可…...

编程日记 2025/6/2 7:43:10

Science Advances 上海理工大学与美国杜克大学（Duke University）共同开发了一种仿生复眼相机

编辑丨%科学家开发了一种 AI 辅助的仿生复眼相机。炎炎夏日，相信各位读者都有被蚊子骚扰过的恼火记忆。但往往想要清剿蚊子的时候，却被它灵巧地躲开，再难找到。诸如蚊子这种节肢动物的视觉系统已经进化了 5 亿多年，从寒武纪一直到…...

编程日记 2025/6/2 7:40:22

正点原子Z20 ZYNQ 开发板发布！板载FMC LPC、LVDS LCD和WIFI蓝牙等接口，资料丰富！

正点原子Z20 ZYNQ 开发板发布！板载FMC LPC、LVDS LCD和WIFI&蓝牙等接口，资料丰富！ 正点原子新品Z20 ZYNQ开发板来啦！核心板全工业级设计，主控芯片型号是XC7Z020CLG484-2I。开发板由核心板底板组成&…...

编程日记 2025/6/2 7:43:10

软件测评中心如何确保软件品质？需求分析与测试计划很关键

软件测评中心承担着对软件进行评估、测试和审查的任务，它有一套规范的流程来确保软件的品质，并且能够向客户和开发者提供详实的软件状况分析报告。需求分析环节这一环节至关重要，必须与客户和开发团队保持密切交流。我们需要从他们那里精…...

编程日记 2025/6/1 22:16:55

004 flutter基础初始文件讲解（3）

之前，我们正向的学习了一些flutter的基础，如MaterialApp，Scaffold之类的东西，那么接下来，我们将正式接触原代码： import package:flutter/material.dart;void main() {runApp(const MyApp()); }class MyAp…...

编程日记 2025/6/1 22:49:10

2025LitCTF 复现

easy_file 登录界面尝试admin 和密码1 没成功结果尝试了弱口令 admin 用户和 password 密码就登录成功了文件上传新建一个空的新建木马.txt 文件发现上传成功然后写入一句话木马 <?php eval($_POST[a]); ?> 上传失败说明可能是有字符被过滤了，猜…...

编程日记 2025/6/2 8:36:10

英语中最难学的部分是时态‌

英语中最难学的部分是时态‌。英语的时态体系包含16种时态，每种时态都有其独特的用法和规则，这使得时态成为英语学习中的一个难点‌ 。时态的定义和分类时态可以分为时间和体态两个维度： ‌时间‌：现在时、过去时、将来时、过…...

编程日记 2025/6/1 23:31:02

Python 如何让自动驾驶的“眼睛”和“大脑”真正融合？——传感器数据融合的关键技术解析

Python 如何让自动驾驶的“眼睛”和“大脑”真正融合？——传感器数据融合的关键技术解析自动驾驶技术从来都不是“单兵作战”。如果你细看一辆自动驾驶汽车，它其实是一个传感器的集合体：摄像头、激光雷达（LiDAR）、毫米波雷达、超声波传感器、GPS……这些传感器各自发挥作…...

编程日记 2025/6/1 20:01:34

使用C# 快速删除Excel表格中的重复行数据-详解

目录简介使用工具 C# 删除Excel工作表中的重复行 C# 删除指定Excel单元格区域中的重复行 C# 基于特定列删除重复行 RemoveDuplicates 方法快速比较简介重复行是指在Excel表格中完全相同的多行数据。这些冗余行的存在可能源于多种原因，例如： …...

编程日记 2025/6/2 8:19:24

WPF-Prism学习笔记之 “导航功能和依赖注入“

新建空白模板(Prism) 新建好后会有自动创建ViewModels和Views 在"MainWindow.xaml"文件里面标题去绑定了一个属性"Title"，而"MainWindowViewModel.cs"里面继承一个非常重要的"BindbleBase"(prism框架里面非常重要的)。所以…...

编程日记 2025/6/2 6:14:14

中国城市间地理距离矩阵(2024)

1825 中国城市间地理距离矩阵(2024) 数据简介中国城市间地理距离矩阵数据集，通过审图号GS(2024)0650的中国城市地图在Albers投影坐标系中进行计算得出矩阵表格，单位为KM，方便大家研究使用。中国城市地理距离矩阵数据通过计算城市中心距离…...

编程日记 2025/6/2 4:34:20

缘由C编程问题求解:9634: 孙悟空喝水-编程语言-CSDN问答 void 孙悟空喝水() {//缘由https://ask.csdn.net/questions/7639865?spm1005.2025.3001.5141int x 2， n 0; double s 0, ss 0;std::cin >> n;while ((int)s < n)s 1.0 / x, ss (x - 1.0) / …...

编程日记 2025/6/2 6:47:32

`sysctl`命令深度剖析：如何优化内核参数以提升服务器网络/IO性能？

更多服务器知识，尽在hostol.com 嘿，各位Linux服务器的“老司机”和“赛车手”们！咱们把服务器比作一辆高性能跑车，日常跑起来是很快，但你有没有想过，这辆“跑车”出厂时的默认设置，可能只是为了…...

编程日记 2025/6/2 5:44:58

AxumStatusCode细化Rust Web标准格式响应

1. Axum 中的 StatusCode 概述 axum::http::StatusCode 提供了 HTTP 状态码的枚举，涵盖了从 100 到 599 的所有标准状态码。通过使用这些状态码，您可以精确地控制 HTTP 响应的语义，例如成功、客户端错误、服务器错误等。 1.1 常用状态码 …...

编程日记 2025/6/2 3:43:11

【备战秋招】C++音视频开发经典面试题整理

1、简要介绍一下对 H.264 的了解？ 1）基础描述 H.264 是由国际标准组织机构（ISO）下属的运动图象专家组（MPEG）和国际电传视讯联盟远程通信标准化组织（ITU-T）开发的系列编码标准之一。…...

编程日记 2025/6/2 6:49:18

【音频处理】java流式调用ffmpeg命令

今天发现一个ffmpeg的用法，用子进程直接从标准输入写入输入，就可以从标准流式输出获取转码结果。这样的好处是不用去写ffmpeg的代码，只需要写对ffmpeg的命令、在输入输出的地方加缓存就能进行流式转码了，方便快捷。但是也有坏处…...

编程日记 2025/6/2 6:43:04

《java创世手记》---java基础篇（下）

《Java 创世手记 - 基础篇（下）》第五章：契约与规范 —— 接口 (Interfaces) 与抽象类 (Abstract Classes) 造物主，在你日益繁荣的世界里，你发现仅仅依靠“继承”来构建“物种体系”有时会遇到一些限制。比如&#x…...

编程日记 2025/6/2 6:14:36

【MySQL】C语言连接

要使用C语言连接mysql，需要使用mysql官网提供的库，大家可以去官网下载我们使用C接口库来进行连接要正确使用，我们需要做一些准备工作: 保证mysql服务有效在官网上下载合适自己平台的mysql connect库，以备后用下载开发库 s…...

编程日记 2025/6/2 6:36:37

How API Gateways handle raw TCP packets

How these gateways actually perform their roles at the HTTP packet level? Let’s break it down into something more concrete with examples of how these gateways perform their “unique entrance” function by requiring clients to follow specific protocols, …...

编程日记 2025/6/2 6:35:00

文章目录

前言

示例-获取和修改图像数据

图像数据的遍历方式

图像滤镜

负片滤镜

黑白滤镜

浮雕滤镜

filter滤镜属性

相关文章：