canvas绘制灰度图片

最新推荐文章于 2025-06-10 09:20:25 发布
转载 最新推荐文章于 2025-06-10 09:20:25 发布 · 1.1k 阅读 · 1
文章标签：

#canvas

博客介绍了图像由红、绿、蓝三个通道组成，通道缩览图以灰度显示，用不同灰度色阶表示三色比重，纯白代表最高亮度。还列举了浮点算法、整数方法等多种灰度化方法，将RGB中的R、G、B统一用Gray替换即可完成灰度化。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一幅完整的图像，是由红色、绿色、蓝色三个通道组成的。红色、绿色、蓝色三个通道的缩览图都是以灰度显示的。用不同的灰度色阶来表示" 红，绿，蓝"在图像中的比重。通道中的纯白，代表了该色光在此处为最高亮度，亮度级别是255。

灰度化方法：

        1.浮点算法：Gray = R*0.299 + G*0.587 + B*0.114　　

        2.整数方法：Gray = (R*299 + G*587 + B*114 + 500) / 1000　

        3.移位方法：Gray =(R*28+G*151+B*77)>>8; 　　

        4.平均值法：Gray=（R+G+B）/3; 　　

        5.仅取绿色：Gray=G；

        只要将原来的RGB(R,G,B)中的R,G,B统一用Gray替换，形成新的RGB(Gray,Gray,Gray)就完成灰度化了；

 

代码如下：

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

<!DOCTYPE html>

<html>

 <head>

 <meta charset="UTF-8">

 <title>ImgBase</title>

 <style type="text/css">

 .scream{

 width:400px;

 height:300px;

 position: absolute;

 top:60px;

 border: 1px solid;

 }

 #canvas{

 position: absolute;

 top:60px;

 left:500px;

 border: 1px dashed;

 }

 </style>

 </head>

 <body>

 <input type="file" onchange="loadImg()"/>

 <input type="button" value="灰度化" onclick="Convert256toGray()"/>

 <br/><br/>

 <div class="scream">

 <img id="scream" width="400px" height="300px" alt="Image preview...">

 </div>

 <canvas id="canvas" width="400px;" height="300px;">

 your browser does not support canvas!

 </canvas>

 <script>

 function Convert256toGray(){

 var c=document.getElementById("canvas");

 var ctx=c.getContext("2d");

 var imgData = ctx.getImageData(0,0,c_w,c_h);

 for (var i=0;i<imgData.data.length;i+=4)

  {

  var R = imgData.data[i]; //R(0-255)

  var G = imgData.data[i+1]; //G(0-255)

  var B = imgData.data[i+2]; //G(0-255)

  var Alpha = imgData.data[i+3]; //Alpha(0-255)

  //浮点算法

  var gray = R*0.299 + G*0.587 + B*0.114;

  //整数算法

//  var gray = (R*299 + G*587 + B*114 + 500) / 1000;　

  //移位算法

//  var gray =(R*76+G*151+B*28)>>8;

  //平均值算法

//   var gray = (R+G+B)/3;

  //仅取绿色

//  var gray=G;

   imgData.data[i] = gray;

   imgData.data[i+1] = gray;

   imgData.data[i+2] = gray;

   imgData.data[i+3] = Alpha;

  }

 ctx.putImageData(imgData,0,0);

 }

 </script>

 <!--base-->

 <script>

 //canvas图像的宽高

 var c_w = 400; var c_h = 300;

 //加载img图像

 function loadImg(){

 var img = document.getElementById("scream");

 var file = document.querySelector('input[type=file]').files[0];

 if(!/image\/\w+/.test(file.type)){

   alert("文件必须为图片！");

   return false;

  }

 var reader = new FileReader();

 reader.addEventListener("load", function () {

  img.src = reader.result;

 }, false);

 if(file) {

  reader.readAsDataURL(file);

  loadCanvas();

 }//文件加载监听方法（拓展）

 }

 //加载canvas图像

 function loadCanvas(){

 var c=document.getElementById("canvas");

 var ctx=c.getContext("2d");

 var img = document.getElementById("scream");

 img.onload = function() {

  ctx.drawImage(img,0,0,c_w,c_h);

 }

 }

 </script>

 </body>

</html>

Canvas对像素的操作&&实现图像灰度化处理&&实现马赛克效果
孤寒者的博客
05-20 3万+
canvas对像素的操作&&实现图像灰度化处理&&实现马赛克效果
Canvas入门教学（3）图片与文字的绘制
lz5211314121的博客
01-02 861
是一个长度为250000的数组，为什么是这样？非常的简单，接下来我们来操作canvas绘制一张图片，用到的主要的api是drawImage(),同时我们也会学习两个重要的函数，图片的像素级别的操作函数，getImageData()和putImageData(),分别是获取指定位置的图片的像素块和放置指定位置的图片。这一句是获取像素图片的核心，它表示，想获取起点坐标为200，200的，宽和高均为250的这一块图片的所有像素点，我们简单的计算一下，宽高均为250一共有多少个像素点？
canvas实现图像灰度
u011539729的博客
12-03 523
还是这个美女,长这样 然后对这图进行一个灰度操作 啊,感觉整个世界失去了色彩!但不要紧,要紧的是怎么丢掉色彩变成灰度图像呢?实现灰度的算法有好几种,如: 1.平均数法:(R + G + B)/3 2.按权的整数法:(R0.3 + G0.59 + B*0.11) 3.移位方法:(R76+G151+B*28)>>8 … 这里我们选用NO.2,按权的整数法,它基本可以满足我们的视觉需要了...
Canvas 图片灰度
weixin_33734785的博客
07-24 163
我们可以通过下面几种方法，将其转换为灰度： 1.浮点算法：Gray=R*0.3+G*0.59+B*0.11 2.整数方法：Gray=(R*30+G*59+B*11)/100 3.移位方法：Gray =(R*76+G*151+B*28)&gt;&gt;8; 4.平均值法：Gray=（R+G+B）/3; 5.仅取绿色：Gray=G； &lt;!DOCTYPE html&gt; &...
Canvas像素操作：灰度化与颜色反转技术解析
gitblog_00466的博客
06-10 285
Canvas像素操作：灰度化与颜色反转技术解析 项目概述 本文基于MDN DOM示例项目中的Canvas像素操作示例，重点讲解如何使用Canvas API实现图像颜色处理技术。该项目演示了四种图像处理效果：原始图像、灰度化、颜色反转和棕褐色调效果。 核心功能解析 1. 基础HTML结构 示例创建了一个300x227像素的Canvas画布，下方提供了四个单选按钮用于切换不同的图像效果： <ca...
基于canvas的图片灰度处理
热门推荐
everccnight的博客
06-07 1万+
图像灰度 首先需要在彩色照片上进行操作。在canvas上把彩色照片操作为灰度照片，其实就是对其像素点的操作 先贴代码，再做讲解 ctx.drawImage(imgs, 0, 0,width,height); var pixels = ctx.getImageData(0,0,width,height); var pixeldata = pixels.data; for(var i=0...
基于canvas图像处理的图片 灰色图像
weixin_33755847的博客
04-22 183
图片展示网页往往色彩繁杂，当一个网页上有多张图片的时候用户的注意力就很不容易集中，而且会造成网站整个色调风格的不可把控。 能不能把所有的预览图变成灰度图片，等用户激活某张图片的时候再上色呢？ 以前，唯一的方法就是让美工做两张图，一张彩色一张黑白，费时费力。 能不能让js对图片进行一些处理呢？幸运的是，canvas就提供了图片处理的方法。 canvas+js可以让我们对图片进行像素级的操...
canvas 将彩色图片变成灰度图片
weixin_30516243的博客
08-30 171
最近在看javascript DOM 编程艺术这本书 在书上看到这个例子，觉得摘抄下来 首先html 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Grayscale Canvas Example</...
基于C#开发的图像绘制、Canvas绘图及图片处理应用开发
05-24
总之，"基于C#开发的图像绘制、Canvas绘图及图片处理应用开发"这个主题涵盖了C#编程中一个非常实用的领域，不仅涉及到基本的图形绘制，还包括了高级的图像处理技巧。掌握这些技能，开发者可以创建出各种富于创意的...
Canvas 图像灰度处理
XXHolic
08-17 388
引子 在玩游戏的时候，碰到一个交互效果：背景一张看起来黑白的图，然后用擦除的交互，让图像变的有颜色。也想试试做这个效果，首先想到的是那个黑白的图是怎么形成的，于是就查资料，找到了用 Canvas 转换的方法。 Origin My GitHub 思路 看起来是黑白的图像，其实是灰度图像，进一步说明见图像。这种图像的特点是像素的颜色分量取值都是一样的，而 Canvas 的方法 getImageData 可以获取到画布上的像素值数据，改变数据后，使用方法 putImageData 将数据绘制到画布上。这样就可
Canvas滤镜 灰度 浮雕 效果
04-23
HTML5 Canvas是Web开发中的一个重要工具，它允许开发者在网页上动态绘制图形并进行复杂的图像操作。在这个项目中，我们关注的是如何通过JavaScript实现Canvas的滤镜效果，特别是灰度和浮雕效果。这些特效可以增强...
Canvas图片灰度等相关处理
Jcinta的专栏
01-27 758
Canvas相关处理，备忘。 场景：图片浏览网站，多图片平铺展示，各种颜色同时在同一页面展示，容易使用户产生眼花缭乱的感觉。所以多图片浏览可利用Canvas对所有图片进行灰度处理，当用户焦点定位到某一图片时才使该图片“变亮”。 图片灰度处理代码如下： function pageLoaded(){ var canvas=document.getElementById("my
canvas将彩色图片变为灰度图片理解问题
m0_51066449的博客
03-14 1932
阅读《JavaScript DOM 编程艺术》时，文中运用canvas将彩色图片变成灰度图片部分代码解释。
js使用canvas把灰度图转化为rgb图
qq_46258455的博客
03-13 822
【代码】js使用canvas把灰度图转化为rgb图。
HTML5 组件Canvas实现图像灰度化
X W F
06-22 456
文章目录1. 新建一个html页面，在body tag之间加入2. 添加一段最简单的JavaScript代码： 1. 新建一个html页面，在body tag之间加入 <canvas id="myCanvas" >Gray Filter</canvas> 2. 添加一段最简单的JavaScript代码： window.onload = function() { var canvas = document.getElementById("myCanvas"); // do som
利用canvas对图片进行灰度色处理，图片只有一半变成灰度色
苦艾文艺
06-11 4120
在对图片进行灰度色处理时，图片只有一半出现灰度色。代码如下：grayscale.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>grayscale example</title> <script src="scripts/modernizr.js" type="text/jav
html5 Canvas 图片灰度处理
Don't lost way
04-23 716
图片灰度处理有什么用？ 1 在摄影中呈现一种老照片的效果 2 在计算机计算时，比如相似图片搜索，灰度就够了，彩色照片信息量太大，不利于计算。有时候灰度还不够，甚至用二值照片，即所有像素转换为非黑即白。 ocr识别时，也会对图片进行灰度处理。 当然，在上述应用场景中，也不一定会用canvas处理，甚至一定不会用canvas处理， 但是，canvas确实可以实现图片的灰度处理。 实现思路 1、先用drawImage()把图片画到canvas上 2、再利用getImageData()获取图片的像素信息，求出r g
Canvas: 把彩色图片变为灰度图片
weixin_43867927的博客
10-23 1147
此处出自《JavaScript DOM编程艺术（第二版）》 要点： 使用Modernizr对浏览器是否支持< canvas > 进行检测 通过getImageData获取用户像素数据 对用户的像素数据进行处理 提示：（W3school） 对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值： R - 红色 (0-255) G - 绿色 (0-255)...
canvas渲染图片怎么调成灰阶
是一座岛
04-02 879
解决方法：第一步canvas获取图片的像素。第二步灰度计算公式修改像素。第三步修改后的像素重新渲染canvas 2.效果图3.实现步骤获取canvas对象和canvas上下文对象。 var canvas = document.getElementById('myCanvas') var cxt = canvas.getContext('2d') var img = new Ima...
canvas绘制语图
最新发布
07-28
在 HTML5 Canvas 中绘制图像可以通过多种方法实现，其中最常用的方式是使用 `drawImage()` 方法。此方法允许将图像、画布或视频元素绘制到画布上，并支持缩放、裁剪和定位操作。 ### 使用 `drawImage()` 方法 `drawImage()` 方法有三种主要调用方式： 1. **绘制完整图像** ```javascript ctx.drawImage(image, dx, dy); ``` - `image`：要绘制的图像对象（如 `HTMLImageElement`、`HTMLCanvasElement` 或 `HTMLVideoElement`）。 - `dx`：图像在画布上的起始 X 坐标。 - `dy`：图像在画布上的起始 Y 坐标。 2. **绘制缩放后的图像** ```javascript ctx.drawImage(image, dx, dy, dWidth, dHeight); ``` - `dWidth` 和 `dHeight`：指定图像在画布上绘制的宽度和高度。 3. **绘制图像的一部分（裁剪）** ```javascript ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); ``` - `sx` 和 `sy`：图像源区域的起始坐标。 - `sWidth` 和 `sHeight`：图像源区域的宽度和高度。 - `dx` 和 `dy`：图像在画布上的目标位置。 - `dWidth` 和 `dHeight`：图像在画布上绘制的尺寸。 例如，以下代码将图像加载到画布中，并进行缩放绘制： ```html <canvas id="myCanvas" width="800" height="600"></canvas> <script> const canvas = document.getElementById("myCanvas"); const ctx = canvas.getContext("2d"); const img = new Image(); img.src = "example.jpg"; // 替换为你的图片路径 img.onload = function () { ctx.drawImage(img, 0, 0, canvas.width, canvas.height); // 缩放绘制图像 }; </script> ``` ### 图像来源支持 HTML5 Canvas 支持多种图像来源，包括 PNG、JPEG、GIF 等格式，并且可以将其他 `<canvas>` 元素作为图像源使用[^3]。此外，还可以结合 `video` 元素实现动态图像绘制。 ### 绘制文本 除了图像，Canvas 还支持绘制文本内容，使用 `fillText()` 方法： ```javascript ctx.font = "30px Arial"; ctx.fillText("Hello World", 10, 50); ``` 该方法允许设置字体样式，并在指定坐标位置绘制文本内容[^4]。 ### 图像处理与扩展功能 一旦图像被绘制到画布上，可以进一步使用 `getImageData()` 和 `putImageData()` 方法对像素数据进行操作，实现图像滤镜、灰度转换、边缘检测等高级图像处理功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值