Canvas图片灰度等相关处理

最新推荐文章于 2021-06-04 09:36:10 发布

Jcinta_912

最新推荐文章于 2021-06-04 09:36:10 发布

阅读量680

点赞数

分类专栏： HTML 文章标签： HTML5

本文链接：https://blog.csdn.net/jcinta_912/article/details/50595116

版权

博客介绍了如何使用HTML5 Canvas对图片进行灰度处理，以减少多图片展示时的视觉干扰。当用户聚焦图片时，图片恢复正常颜色。同时提到了图片颜色反转的处理方法，并指出在本地测试Canvas会遇到的安全限制。

摘要由CSDN通过智能技术生成

Canvas相关处理，备忘。

场景：图片浏览网站，多图片平铺展示，各种颜色同时在同一页面展示，容易使用户产生眼花缭乱的感觉。所以多图片浏览可利用Canvas对所有图片进行灰度处理，当用户焦点定位到某一图片时才使该图片“变亮”。

图片灰度处理代码如下：

<!DOCTYPE HTML>
<html>
<head>
	<script type="text/javascript">
		function pageLoaded(){
			var canvas=document.getElementById("myCanvas");
			//源图片
			var image=document.getElementById("imageSource");

			var imageWidht=image.width;
			var imageHeight=image.height;
			canvas.width=imageWidht;
			canvas.height=imageHeight;

			var context=canvas.getContext("2d");
			//绘制
			context.drawImage(image,0,0);
			//获取对象 指定矩形范围内的像素数据
			var canvasData=context.getImageData(0,0,imageWidht,imageHeight);
			/*canvasData.data为图片像素的数组
			  对于canvasData中每一个像素都包含四方面的信息：
			  R - 红色 (0-255)
			  G - 绿色 (0-255)
			  B - 蓝色 (0-255)
		      A - alpha 通道 (0-255; 0 是透明的ÿ

最低0.47元/天解锁文章

Jcinta_912

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Canvas图片灰度等相关处理

Canvas相关处理，备忘。场景：图片浏览网站，多图片平铺展示，各种颜色同时在同一页面展示，容易使用户产生眼花缭乱的感觉。所以多图片浏览可利用Canvas对所有图片进行灰度处理，当用户焦点定位到某一图片时才使该图片“变亮”。图片灰度处理代码如下： function pageLoaded(){ var canvas=document.getElementById("my
复制链接

扫一扫

专栏目录