扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > node.js >HTML5组件Canvas实现图像灰度化的步骤
  • 781

0
分享到

HTML5组件Canvas实现图像灰度化的步骤

2024-04-02 19:04:59 781人浏览 薄情痞子
摘要

这篇文章主要介绍“HTML5组件canvas实现图像灰度化的步骤”，在日常操作中，相信很多人在html5组件Canvas实现图像灰度化的步骤问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望

这篇文章主要介绍“HTML5组件canvas实现图像灰度化的步骤”，在日常操作中，相信很多人在html5组件Canvas实现图像灰度化的步骤问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”HTML5组件Canvas实现图像灰度化的步骤”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

新建一个html页面，在body tag之间加入

代码如下:


<canvas id="myCanvas" >Gray Filter</canvas>


添加一段最简单的javascript 脚本

代码如下:


<pre name="code" class="javascript">window.onload = function() {
var canvas = document.getElementById("myCanvas");
<span > </span>// TODO: do something here
}


从Canvas对象获取绘制对象上下文Context的代码如下：

代码如下:


var context = canvas.getContext("2d");


在html页面中加入一幅图像的html代码如下

代码如下:


<img id="imageSource" src="hanjiaren.jpg" alt="Canvas Source" />


从html img对象中获取image 对象的javascript代码如下：

代码如下:


var image = document.getElementById("imageSource");


将得到的图像绘制在Canvas对象中的代码如下：

代码如下:


context.drawImage(image, 0, 0);


从Canvas对象中获取图像像素数据的代码如下：

代码如下:


var canvasData = context.getImageData(0, 0, canvas.width, canvas.height);


读取像素值与实现灰度计算的代码如下：

代码如下:


for ( var x = 0; x < canvasData.width; x++) {
for ( var y = 0; y < canvasData.height; y++) {
// Index of the pixel in the array
var idx = (x + y * canvasData.width) * 4;
var r = canvasData.data[idx + 0];
var g = canvasData.data[idx + 1];
var b = canvasData.data[idx + 2];
// calculate gray scale value
var gray = .299 * r + .587 * g + .114 * b;
// assign gray scale value
canvasData.data[idx + 0] = gray; // Red channel
canvasData.data[idx + 1] = gray; // Green channel
canvasData.data[idx + 2] = gray; // Blue channel
canvasData.data[idx + 3] = 255; // Alpha channel
// add black border
if(x < 8 || y < 8 || x > (canvasData.width - 8) || y > (canvasData.height - 8))
{
canvasData.data[idx + 0] = 0;
canvasData.data[idx + 1] = 0;
canvasData.data[idx + 2] = 0;
}
}
}


其中计算灰度公式为 gray color = 0.299 &times; red color + 0.578 &times; green color + 0.114 * blue color
读取出来的像素值顺序为RGBA 分别代表red color, green color, blue color, alpha channel

处理完成的数据要重新载入到Canvas中。代码如下：
context.putImageData(canvasData, 0, 0);
程序最终的效果如下：
HTML5组件Canvas实现图像灰度化的步骤 
完全源代码如下：

代码如下:


<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var image = document.getElementById("imageSource");
// re-size the canvas deminsion
canvas.width = image.width;
canvas.height = image.height;
// get 2D render object
var context = canvas.getContext("2d");
context.drawImage(image, 0, 0);
var canvasData = context.getImageData(0, 0, canvas.width, canvas.height);
alert(canvasData.width.toString());
alert(canvasData.height.toString());
// gray filter
for ( var x = 0; x < canvasData.width; x++) {
for ( var y = 0; y < canvasData.height; y++) {
// Index of the pixel in the array
var idx = (x + y * canvasData.width) * 4;
var r = canvasData.data[idx + 0];
var g = canvasData.data[idx + 1];
var b = canvasData.data[idx + 2];
// calculate gray scale value
var gray = .299 * r + .587 * g + .114 * b;
// assign gray scale value
canvasData.data[idx + 0] = gray; // Red channel
canvasData.data[idx + 1] = gray; // Green channel
canvasData.data[idx + 2] = gray; // Blue channel
canvasData.data[idx + 3] = 255; // Alpha channel
// add black border
if(x < 8 || y < 8 || x > (canvasData.width - 8) || y > (canvasData.height - 8))
{
canvasData.data[idx + 0] = 0;
canvasData.data[idx + 1] = 0;
canvasData.data[idx + 2] = 0;
}
}
}
context.putImageData(canvasData, 0, 0); // at coords 0,0
};
</script>
</head>
<body>
<h3>Hello World!</h3>
<img id="imageSource" src="hanjiaren.jpg" alt="Canvas Source" />

<canvas id="myCanvas" >Gray Filter</canvas>
</body>
</html>


代码中的文件可以替换任意你想要看到的图片文件
HTML5, 原来如此神奇。程序在Google浏览器中测试通过，
最后的忠告，千万不要在本地尝试运行上面的代码，google浏览器的安全检查会自动阻止从浏览器中读写非domain的文件
最好在Tomcat或者任意个WEB container的server上发布以后从google浏览器查看效果即可。

到此，关于“HTML5组件Canvas实现图像灰度化的步骤”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！

--结束END--

本文标题: HTML5组件Canvas实现图像灰度化的步骤

本文链接: https://lsjlt.com/news/75281.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • HTML5组件Canvas实现图像灰度化的步骤
    这篇文章主要介绍“HTML5组件Canvas实现图像灰度化的步骤”，在日常操作中，相信很多人在HTML5组件Canvas实现图像灰度化的步骤问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望...
    99+
    2024-04-02
  • 怎么用HTML5组件Canvas实现图像灰度化
    今天小编给大家分享一下怎么用HTML5组件Canvas实现图像灰度化的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下...
    99+
    2024-04-02
  • C语言实现将彩色bmp图像转化为灰图、灰度图像反色
    本文实例为大家分享了C语言实现将彩色bmp图像转化为灰图、灰度图像反色的具体代码，供大家参考，具体内容如下 彩色图像转灰度图像 彩色（24位）bmp图像结构： typedef s...
    99+
    2024-04-02
  • 基于Qt OpenCV怎么实现图像灰度化像素
    这篇文章主要介绍了基于Qt OpenCV怎么实现图像灰度化像素的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇基于Qt OpenCV怎么实现图像灰度化像素文章都会有所收获，下面我们一起来看看吧...
    99+
    2023-07-02
  • SpringCloud实现灰度发布的方法步骤
    目录1.什么是灰度发布？2.灰度发布有什么作用？3.灰度发布的实现方式：网关到服务，服务到服务3.1网关到服务代码实现3.2网关到服务代码实现1.什么是灰度发布？ 灰度发布又称金丝雀...
    99+
    2024-04-02
  • Python OpenCV 彩色与灰度图像的转换实现
    彩色图像转换为灰度图像 第一种方式通过 imread 读取图像的时候直接设置参数为 0 ，自动转换彩色图像为灰度图像 第二种方式，可以通过 split 进行通道分离，或者叫做读取单个...
    99+
    2024-04-02
  • OpenCV实现图像去噪算法的步骤详解
    目录一、函数参考1、Primal-dual算法2、非局部均值去噪算法三、OpenCV源码1、源码路径2、源码代码四、效果图像示例一、函数参考 1、Primal-dual算法 Prim...
    99+
    2024-04-02
  • jquery 步骤进度轴插件的实现代码
    每天一个jquery插件-步骤进度轴 步骤进度轴 很多工具型的网站入门教程或者注册账号走流程的时候会有这个结构存在，所以做了一个来尝试一下，回调动作也能用吧 效果如下 代码部分...
    99+
    2024-04-02
  • 基于React封装组件的实现步骤
    目录前言antd 是如何封装组件的divider 组件源代码如何暴露组件属性如何设置统一类名前缀如何处理样式与类名divider 组件样式源代码前言 很多小伙伴在第一次尝试封装组件时...
    99+
    2024-04-02
  • 在Canvas上的图形/图像绑定事件监听的实现方法
    这篇文章主要介绍在Canvas上的图形/图像绑定事件监听的实现方法，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！HTML中只能为元素/标签绑定监听函数；Canvas绘图中只有一个元素-canvas，每一个图形/图像都...
    99+
    2023-06-09
  • 怎么通过HTML5 Canvas实现图片的平移及旋转变化
    小编给大家分享一下怎么通过HTML5 Canvas实现图片的平移及旋转变化，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！平移变换translate()平移变换，故...
    99+
    2023-06-09
  • HTML5 Canvas渐进填充与透明实现图像的Mask效果是怎样的
    这篇文章将为大家详细讲解有关HTML5 Canvas渐进填充与透明实现图像的Mask效果是怎样的，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。 ...
    99+
    2024-04-02
  • 微信小程序组件化开发的实战步骤
    目录前言项目需求一般方式开发自定义组件开发总结前言 本来没打算写这篇文章，因为自己主要在搞Java相关的，前端的仅仅是使用。但是最近由于开发人手不够，一个人被迫开启全栈，一边写接口一...
    99+
    2024-04-02
  • 基于Python和openCV实现图像的全景拼接详细步骤
    基本介绍 图像的全景拼接，即“缝合”两张具有重叠区域的图来创建一张全景图。其中用到了计算机视觉和图像处理技术有：关键点检测、局部不变特征、关键点匹配、RANSAC(Random Sa...
    99+
    2024-04-02
  • 怎么在Html5中实现百度地图的点击事件
    怎么在Html5中实现百度地图的点击事件？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。根据百度地图官方解释，在移动端 H5 页面中可监听下面这 4 个事件:touchsta...
    99+
    2023-06-09
  • vue+Minio实现多文件进度上传的详细步骤
    目录背景实现方案了解一下Mino实现步骤1.创建存储桶2.选择文件3.创建上传队列4.开始上传5 上传完成后，同步文件地址给后端6.删除文件完整代码源码分享总结背景 最近突然接到了一...
    99+
    2024-04-02
  • 基于React封装组件的实现步骤是怎样的
    这篇文章将为大家详细讲解有关基于React封装组件的实现步骤是怎样的，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。前言很多小伙伴在第一次尝试封装组件时会和我一样碰到许多问题，比如人家的组件会...
    99+
    2023-06-21
  • c#基于Redis实现轻量级消息组件的步骤
    目录数据结构定义订阅通道声明消息的个性化策略处理消息自动订阅消息发送消息确认与存储问题：消息消费完没有确认机制问题：消息处理端挂了再次重启消息会丢失最后最近在开发一个轻量级ASP.N...
    99+
    2024-04-02
  • Maven Web项目使用Cargo插件实现自动化部署的详细步骤
    目录Maven实现Web项目部署到本地Tomcat实现Web项目远程部署到TomcatMaven 实现Web项目部署到本地Tomcat 下面介绍基于Maven使用cargo插件实现的...
    99+
    2023-02-21
    Cargo实现自动化部署 Maven Web项目自动化部署
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作