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

最新推荐文章于 2022-06-19 18:24:46 发布
最新推荐文章于 2022-06-19 18:24:46 发布
阅读量706 收藏 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 928
今天主要介绍canvas中比较强大的功能比如将画布内容抽取为图片获取、修改画布的像素信息以及画布的命中检测首先我仍然需要创建画布图片抽取首先要明确的一点是toDataURL()是canvas对象自身的方法而不是环境对象的这个方法会将canvas的内容抽取为一张图片(base64编码)我们来看一下它的使用方法canvas转化为图像我闲着没事用canvas做了一个太极图js代码如下let canvas...
get-canvas-pixels:从画布获取RGBA像素值的数组
05-06
获取画布像素 从画布获取RGBA像素值的数组 从画布中提取RGBA像素值的Uint8ClampedArray。 安装 $ npm install get-canvas-pixels 用法 var getCanvasPixels = require ( 'get-canvas-pixels' ) ; var canvas = ...
在canvas中根据鼠标的位置，获取当前点的RGB值
zhang_cherry的博客
01-14 2459
概述 在canvas画布中，我们往往需要获取到某个点的像素颜色，例如我们常见的调色板。今天以官网上提供的方格调色板为例，在此基础上稍微做一下扩展，讲解一下如何根据鼠标的位置获取某个点的RGB值。 效果图 可以点击某个方格，然后在下面的小方格中会显示对应的颜色 大致思路 1、这个例子中有两个canvas，大的canvas展示调色板，小的canvas展示用户选取的颜色。 2、大的canvas通过两个for循环、fillStyle和fillRect在小矩形框中渲染颜色 3、通过鼠标的mousedown事件，获取
rgba以及canvas渐变小技巧
Edasi的博客
02-17 463
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 3080
由于JS不能直接读取图像像素，故借助HTML5的canvas标签读取图像文件，通过getImageData() 方法可以实现读取图像的像素（8位无符号整型数组）。 获取图像像素的数据（包含RGBA）后，只需遍历数组即可统计其中的RGB三通道的每一位（0 - 255）的个数。 最后利用统计的RGB数据，根据区间段渲染直方图。
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格式的
js获得canvas中指定像素点的颜色
12-28
插件描述：插件可以获得canvas中指定位置像素点的颜色，支持返回多种格式的颜色. 参考示例：http://www.jq22.com/jquery-info5319
php获取rgba,RGBA - [ CSS 4.2.4参考手册 ] - 在线原生手册 - php中文网
weixin_28963467的博客
03-12 157
IE6.0-8.0不支持使用 rgba 模式实现透明度，可使用 IE 滤镜处理，如：示例代码：filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#88000000, endColorstr=#88000000);#88000000 的前两位数字控制透明度，取值16进制从00 -> FF(越小越透明)，00表示完全...
通过canvas转换颜色为RGBA格式及性能问题
netcy的专栏
11-22 1911
转换任意颜色为RGBA格式 前端编程过程中，经常会遇到要把各种颜色格式（比如 “red”、“#F00”、“#FF0000”等）转换成RGBA格式，搜索网络也可以发现一堆的解决方案： 此处介绍一种方法： 通过canvas的像素获取方法，来获取任意颜色的RGBA数值。大致步骤如下： 首先创建一个尺寸为1*1的canvas，并获取canvas的绘制上下文ctx 设置ctx.fillStyle为指定的颜...
获取canvas画布的上每个像素点的颜色，获取轨迹
qq_51389137的博客
06-19 675
从
玩转html5<canvas>画图
weixin_30827565的博客
08-06 1123
导航 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路径 绘制线段 绘制贝塞尔曲线 线性渐变 径向渐变（发散） 图形变形（平移、旋转、缩放） 矩阵变换（图形变形的机制） 图形组合 给图形绘制阴影 绘制图像（图片平铺、裁剪、像素处理[不只图像、包括其他绘制图形]） 绘制文字 保存和恢复状态（context） 保存文件 结合setInterval制...
HTML5 Canvas渐进填充与透明
jishublog
07-05 1328
详细解释HTML5 Canvas中渐进填充的参数设置与使用，Canvas中透明度的设置与使 用，结合渐进填充与透明度支持，实现图像的Mask效果。 一：渐进填充(Gradient Fill) Canvas支持两种渐进填充方式，一种为线性渐进填充(Line Gradient Fill)，另外一种称 为经向渐变填充(RadialGradient Fill)。其API分别为： create...
将canvas转化为图片
读心悦
07-04 1756
别啰嗦了！ 代码最为直接点！！！ html>   meta http-equiv="X-UA-Compatible" content="chrome=1">   canvas转化图片 head>   script>           window.onload = function() {               draw();               
JavaScript：使用Canvas绘图
热门推荐
山水子农
06-06 3万+
1、基本用法  要使用&lt;canvas&gt;元素，必须先设置其width和height属性，指定可以绘图的区域大小，出现在开始后结束标签中的内容是后备信息，如果浏览器不支持&lt;canvas&gt;元素，就会显示这些信息。例如&lt;canvas id="drawing" width="200" height="200"&gt;A Drawing of something&lt;/ca
xpath如何获取canvas画布的所有像素点，举个例子
最新发布
08-16
XPath是一种用于在XML文档中查找信息的查询语言，无法直接获取canvas画布的像素点。如果你想要获取canvas画布的像素点，需要使用JavaScript来完成。 以下是一个简单的JavaScript例子，演示如何获取canvas画布的像素...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值