东台专业做网站,百度在线识图查图片,计算机是学什么内容的,公司网站建设苏州劳伦上篇#xff1a; 上篇我们给地图添加了锐化、模糊等滤镜#xff0c;这篇来写一个小工具给图片调色。
调色比锐化等滤镜要简单许多#xff0c;直接拿到像素值修改即可。不需要用到卷积核。。。(*^▽^*)
核心原理就是图像结构#xff0c;使用context.getImageData获取图像像…
上篇 上篇我们给地图添加了锐化、模糊等滤镜这篇来写一个小工具给图片调色。
调色比锐化等滤镜要简单许多直接拿到像素值修改即可。不需要用到卷积核。。。(*^▽^*)
核心原理就是图像结构使用context.getImageData获取图像像素结构。
const imageData context.getImageData(0, 0, canvas.width, canvas.height);
图像数据的存储结构每个像素占用 4 个连续的数组元素分别表示该像素的红、绿、蓝和透明度Alpha值。具体结构如下
[ R, G, B, A, R, G, B, A, R, G, B, A, ... ]假设我们有一个 2x2 像素的图像其像素颜色如下
(0, 0): 红色 (255, 0, 0, 255)(1, 0): 绿色 (0, 255, 0, 255)(0, 1): 蓝色 (0, 0, 255, 255)(1, 1): 白色 (255, 255, 255, 255)
每个像素占用 4 个连续的数组元素分别表示该像素的红、绿、蓝和透明度Alpha值。具体结构如下
[ 255, 0, 0, 255, 0, 255, 0, 255, 0, 0, 255, 255, 255, 255, 255, 255 ]调整颜色只需要遍历图像数组改对应的值就好。比如修改亮度就是把数组中所有的红绿蓝颜色的值都加上滑块的值数值越接近255越白就显得图片越亮。
!DOCTYPE html
html langenheadmeta charsetUTF-8title简单图片调色/titlestyle#canvas {border: 1px solid black;}/style
/headbodycanvas idcanvas width300 height300/canvasbrlabel forbrightness亮度:/labelinput typerange idbrightness min-100 max100 value0brlabel forredInput红:/labelinput typerange idredInput min-100 max100 value0brlabel forredInput绿:/labelinput typerange idgreenInput min-100 max100 value0brlabel forredInput蓝:/labelinput typerange idblueInput min-100 max100 value0script// 获取 Canvas 和上下文const canvas document.getElementById(canvas);const context canvas.getContext(2d);// 加载图像const img new Image();img.crossOrigin anonymous; // 允许跨域加载图像img.src https://t7.baidu.com/it/u2604797219,1573897854fm193fGIF; // 替换为你的图像路径img.onload function () {context.drawImage(img, 0, 0, canvas.width, canvas.height);};// 调整亮度函数function adjustBrightness(context, brightness) {const imageData context.getImageData(0, 0, canvas.width, canvas.height);const data imageData.data;for (let i 0; i data.length; i 4) {data[i] data[i] brightness; // Reddata[i 1] data[i 1] brightness; // Greendata[i 2] data[i 2] brightness; // Blue}context.putImageData(imageData, 0, 0);}// 调整红通道函数function redChannel(context, brightness) {const imageData context.getImageData(0, 0, canvas.width, canvas.height);const data imageData.data;for (let i 0; i data.length; i 4) {data[i] data[i] brightness; // Red}context.putImageData(imageData, 0, 0);}// 调整绿通道函数function greenChannel(context, brightness) {const imageData context.getImageData(0, 0, canvas.width, canvas.height);const data imageData.data;for (let i 0; i data.length; i 4) {data[i 1] data[i 1] brightness; // Green}context.putImageData(imageData, 0, 0);}// 调整蓝通道函数function blueChannel(context, brightness) {const imageData context.getImageData(0, 0, canvas.width, canvas.height);const data imageData.data;for (let i 0; i data.length; i 4) {data[i 2] data[i 2] brightness; // Blue}context.putImageData(imageData, 0, 0);}// 监听亮度滑块变化const brightnessInput document.getElementById(brightness);brightnessInput.addEventListener(input, function () {// 先重绘原始图像context.drawImage(img, 0, 0, canvas.width, canvas.height);// 调整亮度adjustBrightness(context, parseInt(brightnessInput.value, 10));});// 监听红通道滑块变化const redInput document.getElementById(redInput);redInput.addEventListener(input, function () {// 先重绘原始图像context.drawImage(img, 0, 0, canvas.width, canvas.height);// 调整亮度redChannel(context, parseInt(redInput.value, 10));});// 监听绿通道滑块变化const greenInput document.getElementById(greenInput);greenInput.addEventListener(input, function () {// 先重绘原始图像context.drawImage(img, 0, 0, canvas.width, canvas.height);// 调整亮度greenChannel(context, parseInt(greenInput.value, 10));});// 监听蓝通道滑块变化const blueInput document.getElementById(blueInput);blueInput.addEventListener(input, function () {// 先重绘原始图像context.drawImage(img, 0, 0, canvas.width, canvas.height);// 调整亮度blueChannel(context, parseInt(blueInput.value, 10));});/script
/body/html
