扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >怎么用HTML5组件Canvas实现图像灰度化
  • 653

0
分享到

怎么用HTML5组件Canvas实现图像灰度化

2024-04-02 19:04:59 653人浏览 独家记忆
摘要

今天小编给大家分享一下怎么用HTML5组件canvas实现图像灰度化的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下

今天小编给大家分享一下怎么用HTML5组件canvas实现图像灰度化的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

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

复制代码

代码如下：

<canvas id =“ myCanvas”>灰色滤镜</ canvas>

添加一段最简单的javascript脚本

复制代码

代码如下：

<pre name =“ code” class =“ javascript”> window.onload = function（）{

var canvas = document.getElementById（“ myCanvas”）;

<span style =“ white-space：pre”> </ span> // TODO：在这里做些事

}

从Canvas对象获取重新定位对象某些上下文的代码如下：

复制代码

代码如下：

var context = canvas.getContext（“ 2d”）;

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

复制代码

代码如下：

<img id =“ imageSource” src =“ hanjiaren.jpg” alt =“画布源” />

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

复制代码

代码如下：

var image = document.getElementById（“ imageSource”）;

将得到的图像描绘在画布对象中的代码如下：

复制代码

代码如下：

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 ++）{

//数组中像素的索引

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];

//计算灰度值

var gray = .299 * r + .587 * g + .114 * b;

//分配灰度值

canvasData.data [idx + 0] =灰色；//红色通道

canvasData.data [idx + 1] =灰色；//绿色通道

canvasData.data [idx + 2] =灰色；//蓝色频道

canvasData.data [idx + 3] = 255; // Alpha通道

//添加黑色边框

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;

}

}

}

其中计算灰度公式为灰色= 0.299&times;红色+ 0.578&times;绿色+ 0.114 *蓝色

读取出来的像素值顺序为RGBA分别代表红色，绿色，蓝色，alpha通道

处理完成的数据要重新加载到Canvas中。代码如下：

context.putImageData（canvasData，0，0）;

程序最终的效果如下：

完全源代码如下：

复制代码

代码如下：

<html>

<head>

<script>

window.onload = function（）{

var canvas = document.getElementById（“ myCanvas”）;

var image = document.getElementById（“ imageSource”）;

//调整画布大小的大小

canvas.width = image.width;

canvas.height = image.height;

//获取2D渲染对象

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（））;

//

（（var x = 0; x <canvasData.width; x ++）的灰色滤镜{

for（var y = 0; y <canvasData.height; y ++）{

//数组中像素的索引

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];

//计算灰度值

var gray = .299 * r + .587 * g + .114 * b;

//分配灰度值

canvasData.data [idx + 0] =灰色；//红色通道

canvasData.data [idx + 1] =灰色；//绿色通道

canvasData.data [idx + 2] =灰色；//蓝色频道

canvasData.data [idx + 3] = 255; // Alpha通道

//添加黑色边框

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）; //坐标为0,0

};

</ script>

</ head>

<body>

<h3> Hello World！</ h3>

<img id =“ imageSource” src =“ hanjiaren.jpg” alt =“画布源” />

<canvas id =“ myCanvas” >灰色滤镜</ canvas>

</ body>

</ html>

代码中的文件可以替换任意你想要看到的图片文件

HTML5，原来如此神奇。程序在Google浏览器中测试通过，

最后的忠告，千万不要在本地尝试运行上面的代码，google浏览器的安全检查会自动阻止从浏览器中识别非域的文件

最好在Tomcat或任意一个网络容器的服务器上发布以后从谷歌浏览器查看效果即可。

以上就是“怎么用HTML5组件Canvas实现图像灰度化”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网JavaScript频道。

--结束END--

本文标题: 怎么用HTML5组件Canvas实现图像灰度化

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

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

猜你喜欢
  • 怎么用HTML5组件Canvas实现图像灰度化
    今天小编给大家分享一下怎么用HTML5组件Canvas实现图像灰度化的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下...
    99+
    2024-04-02
  • HTML5组件Canvas实现图像灰度化的步骤
    这篇文章主要介绍“HTML5组件Canvas实现图像灰度化的步骤”，在日常操作中，相信很多人在HTML5组件Canvas实现图像灰度化的步骤问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望...
    99+
    2024-04-02
  • 基于Qt OpenCV怎么实现图像灰度化像素
    这篇文章主要介绍了基于Qt OpenCV怎么实现图像灰度化像素的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇基于Qt OpenCV怎么实现图像灰度化像素文章都会有所收获，下面我们一起来看看吧...
    99+
    2023-07-02
  • python怎么将图像转化为灰度图像
    要将图像转换为灰度图像，可以使用Python中的OpenCV库。下面是一个简单的示例代码：```pythonimport cv2# ...
    99+
    2023-09-20
    python
  • C语言实现将彩色bmp图像转化为灰图、灰度图像反色
    本文实例为大家分享了C语言实现将彩色bmp图像转化为灰图、灰度图像反色的具体代码，供大家参考，具体内容如下 彩色图像转灰度图像 彩色（24位）bmp图像结构： typedef s...
    99+
    2024-04-02
  • python怎么将灰度图像二值化
    要将灰度图像二值化，可以使用OpenCV库中的threshold函数。以下是一个示例代码：```pythonimport cv2# ...
    99+
    2023-09-29
    python
  • Java数字图像处理之图像灰度处理怎么实现
    本篇内容介绍了“Java数字图像处理之图像灰度处理怎么实现”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！一、简介图像灰度化处理可以作为图像处...
    99+
    2023-07-02
  • 怎么用HTML5 Canvas做在线图像处理
    本文小编为大家详细介绍“怎么用HTML5 Canvas做在线图像处理”，内容详细，步骤清晰，细节处理妥当，希望这篇“怎么用HTML5 Canvas做在线图像处理”文章能帮助大家解决疑惑，下面跟着小编的思路慢...
    99+
    2024-04-02
  • HTML5 canvas怎么实现图形变换
    这篇文章主要介绍“HTML5 canvas怎么实现图形变换”，在日常操作中，相信很多人在HTML5 canvas怎么实现图形变换问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”...
    99+
    2024-04-02
  • 怎么用HTML5的canvas实现图片压缩
    本篇内容主要讲解“怎么用HTML5的canvas实现图片压缩”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么用HTML5的canvas实现图片压缩”吧!代码如...
    99+
    2024-04-02
  • python图像处理-利用一行代码实现灰度图抠图
    目录一行代码实现灰度图抠图Python抠图程序源码准备程序构思完整代码截图如下,每条语句均有功能注释一行代码实现灰度图抠图 抠图是ps的最基本技能，利用python可以实现用一行代码...
    99+
    2024-04-02
  • 怎么在html5中使用canvas实现柱状图
    这篇文章给大家介绍怎么在html5中使用canvas实现柱状图，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。使用方式首先我们看一下使用方式，参考了部分ECharts的使用方式，先传入要显示图表的html标签，接着调用i...
    99+
    2023-06-09
  • HTML5 canvas怎么实现图形变换效果
    这篇文章主要介绍“HTML5 canvas怎么实现图形变换效果”，在日常操作中，相信很多人在HTML5 canvas怎么实现图形变换效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大...
    99+
    2024-04-02
  • 怎么用html5 canvas实现图片玻璃碎片特效
    本篇内容主要讲解“怎么用html5 canvas实现图片玻璃碎片特效”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么用html5 canvas实现图片玻璃碎片...
    99+
    2024-04-02
  • 怎么用HTML5 Canvas实现交互式地铁线路图
    这篇文章主要介绍怎么用HTML5 Canvas实现交互式地铁线路图，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！ 　　界面生成 　　底层的p是通过ht.graph.GraphVi...
    99+
    2024-04-02
  • 怎么通过HTML5 Canvas实现图片的平移及旋转变化
    小编给大家分享一下怎么通过HTML5 Canvas实现图片的平移及旋转变化，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！平移变换translate()平移变换，故...
    99+
    2023-06-09
  • 怎么使用python求取图像矩阵平均灰度值
    要使用Python求取图像矩阵的平均灰度值，可以使用OpenCV库来读取图像并计算平均灰度值。首先，确保已经安装了OpenCV库。可...
    99+
    2023-09-20
    python
  • HTML5中怎么用Canvas实现变形
    本篇内容主要讲解“HTML5中怎么用Canvas实现变形”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“HTML5中怎么用Canvas实现变形”吧! 变形（即t...
    99+
    2024-04-02
  • 怎么用HTML5 Canvas实现玫瑰曲线和心形图案
    本篇内容介绍了“怎么用HTML5 Canvas实现玫瑰曲线和心形图案”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学...
    99+
    2024-04-02
  • 怎么用Matlab实现图像亮度分布统计图
    这篇文章主要讲解了“怎么用Matlab实现图像亮度分布统计图”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么用Matlab实现图像亮度分布统计图”吧！写了一个输入图片，便会生成美观的图像各...
    99+
    2023-06-30
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作