Canvas - 获取画布中像素点的 RGBA

最新推荐文章于 2023-01-17 11:49:51 发布
最新推荐文章于 2023-01-17 11:49:51 发布
阅读量718 收藏 1
点赞数
分类专栏： HTML & CSS & JavaScript 文章标签： canvas html5 JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29761395/article/details/117756576
版权

文章目录


在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Canvas</title>
        <style type="text/css">
            * {
                /* margin: 0;
                padding: 0; */
                box-sizing: border-box;
            }
            canvas {
                /* border-width: 1px;
                border-color: #000000;
                border-style: solid; */
            }
            input, label {
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <canvas id="canvas"></canvas>
        <div>
            <input type="radio" id="original" name="color" checked />
            <label for="original">Original</label>
            <input type="radio" id="red" name="color" />
            <label for="red">Red</label>
            <input type="radio" id="green" name="color" />
            <label for="green">Green</label>
            <input type="radio" id="blue" name="color" />
            <label for="blue">Blue</label>
        </div>
        
        <script type="text/javascript">
            window.onload = (event) => {
                console.log(event)
                
                main()
            }
            
            function main() {
                const canvas = document.getElementById("canvas")
                const ctx = canvas.getContext("2d")
                
                const image = new Image()
                image.onload = (event) => {
                    console.log(event, image.width, image.height)
                    
                    canvas.width = image.width
                    canvas.height = image.height
                    
                    ctx.drawImage(image, 0, 0)
                    
                    const originalImageData = ctx.getImageData(0, 0, image.width, image.height)

                    document.getElementById("original").onchange = (event) => {
                        ctx.putImageData(originalImageData, 0, 0)
                    }

                    document.getElementById("red").onchange = (event) => {
                        const imageData = ctx.createImageData(originalImageData)
                        
                        for (let i = 0; i < originalImageData.data.length; i += 4) {
                            imageData.data[i] = originalImageData.data[i] // Red
                            imageData.data[i + 3] = originalImageData.data[i + 3] // Alpha
                        }
                        
                        ctx.putImageData(imageData, 0, 0)
                    }
                    
                    document.getElementById("green").onchange = (event) => {
                        const imageData = ctx.createImageData(originalImageData)
                        
                        for (let i = 0; i < originalImageData.data.length; i += 4) {
                            imageData.data[i + 1] = originalImageData.data[i + 1] // Green
                            imageData.data[i + 3] = originalImageData.data[i + 3] // Alpha
                        }
                        
                        ctx.putImageData(imageData, 0, 0)
                    }
                    
                    document.getElementById("blue").onchange = (event) => {
                        const imageData = ctx.createImageData(originalImageData)
                        
                        for (let i = 0; i < originalImageData.data.length; i += 4) {
                            imageData.data[i + 2] = originalImageData.data[i + 2] // Blue
                            imageData.data[i + 3] = originalImageData.data[i + 3] // Alpha
                        }
                        
                        ctx.putImageData(imageData, 0, 0)
                    }
                }
                
                image.src = "img/0.png"
            }
        </script>
    </body>
</html>

参考

Web technology for developers > Web APIs > Canvas API > Canvas tutorial > Using images

Web technology for developers > Web APIs > Canvas API > Canvas tutorial > Pixel manipulation with canvas

好好活着，不要熬夜
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
图片获取像素坐标html,HTML5画布Canvas图片抽取、像素信息获取、命中检测
weixin_29367347的博客
05-31 949
今天主要介绍canvas中比较强大的功能比如将画布内容抽取为图片获取、修改画布的像素信息以及画布的命中检测首先我仍然需要创建画布图片抽取首先要明确的一点是toDataURL()是canvas对象自身的方法而不是环境对象的这个方法会将canvas的内容抽取为一张图片(base64编码)我们来看一下它的使用方法canvas转化为图像我闲着没事用canvas做了一个太极图js代码如下let canvas...
在canvas中根据鼠标的位置，获取当前点的RGB值
zhang_cherry的博客
01-14 2524
概述 在canvas画布中，我们往往需要获取到某个点的像素颜色，例如我们常见的调色板。今天以官网上提供的方格调色板为例，在此基础上稍微做一下扩展，讲解一下如何根据鼠标的位置获取某个点的RGB值。 效果图 可以点击某个方格，然后在下面的小方格中会显示对应的颜色 大致思路 1、这个例子中有两个canvas，大的canvas展示调色板，小的canvas展示用户选取的颜色。 2、大的canvas通过两个for循环、fillStyle和fillRect在小矩形框中渲染颜色 3、通过鼠标的mousedown事件，获取
rgba以及canvas渐变小技巧
Edasi的博客
02-17 474
RGBA 说明： RGBA(R,G,B,A) 取值： R：红色值。正整数 | 百分数 G：绿色值。正整数 | 百分数 B：蓝色值。正整数 | 百分数 A：Alpha透明度,取值0~1之间。 由于A是表透明度的 var draw = document.getElementById('canvas'); if (draw.getContext) { var ctx = draw.getCon...
canvas+echarts.js实现彩色图像的RGB直方图显示
HYY的博客
03-23 3137
由于JS不能直接读取图像像素，故借助HTML5的canvas标签读取图像文件，通过getImageData() 方法可以实现读取图像的像素（8位无符号整型数组）。 获取图像像素的数据（包含RGBA）后，只需遍历数组即可统计其中的RGB三通道的每一位（0 - 255）的个数。 最后利用统计的RGB数据，根据区间段渲染直方图。
canvas颜色提取器，解决跨域问题
chonyhaha的博客
01-24 642
canvas颜色提取器，解决跨域问题 canvas颜色提取 <style> #canvas{ border: 1px solid black; float: left; margin-right: 30px; } #hovered-color{ border: 1px solid black; width: 100px; height: 300px; float:
get-canvas-pixels:从画布获取RGBA像素值的数组
05-06
获取画布像素 从画布获取RGBA像素值的数组 从画布中提取RGBA像素值的Uint8ClampedArray。 安装 $ npm install get-canvas-pixels 用法 var getCanvasPixels = require ( 'get-canvas-pixels' ) ; var canvas = ...
set-canvas-pixels:从RGBA像素值数组设置画布像素
05-06
从RGBA像素值数组设置画布像素 从0到255之间的RGBA值数组设置画布的像素。 安装 $ npm install set-canvas-pixels 用法 var setCanvasPixels = require ( 'set-canvas-pixels' ) ; var pixels = [ 0 , 0 , 0 , 255 ,...
HTML5-canvas:工作画布基础知识
07-10
然后通过JavaScript获取这个元素，并创建一个二维渲染上下文，如`var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d');`。 2. **绘图API**：一旦有了渲染上下文，你就可以调用一...
canvas-liquify
06-16
Canvas API的`getImageData()`和`putImageData()`方法用于获取和设置指定区域的像素数据，每个像素由4个值表示：红、绿、蓝和透明度（RGBA）。 3. **滤镜算法**：液化效果需要用到特定的滤镜算法，比如基于邻近像素...
canvas-image
03-15
首先，我们需要创建一个canvas元素，并获取其2D渲染上下文： ```html <canvas id="myCanvas"></canvas> ``` ```javascript var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext...
通过canvas转换颜色为RGBA格式及性能问题的解决
11-21
转换任意颜色为RGBA格式 前端编程过程中，经常会遇到要把各种颜色格式（比如 “red”、“#F00”、“#FF0000”等）转换成RGBA格式，搜索网络也可以发现一堆的解决方案： 此处介绍一种方法： 通过canvas的像素获取方法，来获取任意颜色的RGBA数值。大致步骤如下： 首先创建一个尺寸为1*1的canvas，并获取canvas的绘制上下文ctx 设置ctx.fillStyle为指定的颜色 通过ctx.fillRect填充canvas 通过ctx.getImaegeData获取Imagedata对象，并获取其中的像素值，获取的像素值正好是RGBA格式的
Canvas——操作像素
mantou_riji的博客
01-17 1481
获取到的像素信息是一个一维数组，四个值是一个像素点的信息分别代表 rgba的四个值，取值都是0-255。// 获取画布的像素信息：画笔.getImageData(x1,y1,x2,y2)// 像素信息是一个一维数组，四个值是一个像素点的信息分别代表 rgba的四个值。（x1,y1）: ImageData 对象左上角的 x和y 坐标，以像素计。ImageData 对象左上角的 x 坐标，以像素计。水平值（x），以像素计，在画布上显示图像的位置。竖直值（y），以像素计，在画布上显示图像的位置。
php获取rgba,RGBA - [ CSS 4.2.4参考手册 ] - 在线原生手册 - php中文网
weixin_28963467的博客
03-12 162
IE6.0-8.0不支持使用 rgba 模式实现透明度，可使用 IE 滤镜处理，如：示例代码：filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#88000000, endColorstr=#88000000);#88000000 的前两位数字控制透明度，取值16进制从00 -> FF(越小越透明)，00表示完全...
通过canvas获取图片的颜色值
weixin_41897680的博客
11-03 1792
通过canvas获取图片的颜色值
《canvas》之第8章 像素操作
yxqq378287007的博客
06-24 480
canvas 像素操作
通过canvas转换颜色为RGBA格式及性能问题
netcy的专栏
11-22 1924
转换任意颜色为RGBA格式 前端编程过程中，经常会遇到要把各种颜色格式（比如 “red”、“#F00”、“#FF0000”等）转换成RGBA格式，搜索网络也可以发现一堆的解决方案： 此处介绍一种方法： 通过canvas的像素获取方法，来获取任意颜色的RGBA数值。大致步骤如下： 首先创建一个尺寸为1*1的canvas，并获取canvas的绘制上下文ctx 设置ctx.fillStyle为指定的颜...
获取canvas画布的上每个像素点的颜色，获取轨迹
qq_51389137的博客
06-19 686
从
玩转html5<canvas>画图
weixin_30827565的博客
08-06 1131
导航 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路径 绘制线段 绘制贝塞尔曲线 线性渐变 径向渐变（发散） 图形变形（平移、旋转、缩放） 矩阵变换（图形变形的机制） 图形组合 给图形绘制阴影 绘制图像（图片平铺、裁剪、像素处理[不只图像、包括其他绘制图形]） 绘制文字 保存和恢复状态（context） 保存文件 结合setInterval制...
xpath如何获取canvas画布的所有像素点，举个例子
最新发布
08-16
### 回答1： XPath是一种用于在XML文档中查找信息的查询语言，无法直接获取canvas画布的像素点。如果你想要获取canvas画布的像素点，需要使用JavaScript来完成。 以下是一个简单的JavaScript例子，演示如何获取canvas画布的像素点： ```javascript // 获取canvas元素 var canvas = document.getElementById('myCanvas'); // 获取上下文 var ctx = canvas.getContext('2d'); // 获取画布宽度和高度 var width = canvas.width; var height = canvas.height; // 获取所有像素点 var imageData = ctx.getImageData(0, 0, width, height); var pixels = imageData.data; // 处理像素点 for (var i = 0; i < pixels.length; i += 4) { var red = pixels[i]; var green = pixels[i + 1]; var blue = pixels[i + 2]; var alpha = pixels[i + 3]; // 处理像素点的红、绿、蓝和透明度通道 } ``` 这个例子中，我们首先获取了canvas元素，然后获取了上下文，用于在canvas上绘制。接着，我们获取了画布的宽度和高度，然后使用`getImageData()`方法获取了画布上所有像素点的数据。像素数据保存在`imageData.data`数组中，每个像素点由四个值表示：红、绿、蓝和透明度通道。最后，我们可以遍历所有的像素点，处理它们的值。 ### 回答2： 在XPath中，无法直接获取canvas画布的所有像素点，因为XPath是一种用于在XML文档中定位节点的语言，并不适用于处理图像。但是我们可以通过JavaScript来实现获取canvas画布上的像素点。 以下是一个示例： ```html <!DOCTYPE html> <html> <head> <title>Canvas像素点获取示例</title> </head> <body> <canvas id="myCanvas" width="200" height="200"></canvas> <script> // 获取canvas元素 var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); // 绘制一个红色的正方形 context.fillStyle = "red"; context.fillRect(50, 50, 100, 100); // 获取canvas画布上的像素点 var imageData = context.getImageData(0, 0, canvas.width, canvas.height); var pixels = imageData.data; // 打印获取到的像素点信息 for (var i = 0; i < pixels.length; i += 4) { var red = pixels[i]; var green = pixels[i + 1]; var blue = pixels[i + 2]; var alpha = pixels[i + 3]; console.log("像素点" + i/4 + "的颜色值为：" + red + ", " + green + ", " + blue + ", " + alpha); } </script> </body> </html> ``` 该示例创建了一个200x200像素的canvas画布，然后使用`fillRect`方法在画布上绘制了一个红色的正方形。接下来，使用`getImageData`方法获取整个画布的像素数据，然后通过遍历像素数据来获取每个像素点的颜色值。 由于颜色信息是以[R, G, B, A]的形式储存的，每个像素点占用四个索引位置，所以通过每次增加4来遍历像素数据。在循环中，我们分别获取了每个像素点的红、绿、蓝和透明度信息，并打印输出。 需要注意的是，上述方法是通过使用JavaScript来实现获取canvas画布上的像素点，而非XPath。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值