温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

HTML5 Canvas像素操作的示例分析

发布时间:2022-03-08 10:26:39 来源:亿速云 阅读:160 作者:小新 栏目:web开发

这篇文章给大家分享的是有关HTML5 Canvas像素操作的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

注意 由于人们可以直接操纵像素数据,因此出现了某些人利用从Canvas直接获取并且修改数据的能力做出一些恶意和非法的行为。浏览器限制了人们用Canvas跨域获取图片数据的能力,非同域图片禁止读取和修改,

在像素操作的过程中,ImageData 对象保存了图像像素值。每个对象有3个属性,即width、height和data。data属性类型为CanvasPixelArray,用于存储width*height*4个像素值。每一个像素有RGB值和透明度Alpha值(其值为0至255)。像素的顺序从左至右,从上到下,按行存储。

既然讨论像素操作,那么读者最好能够从头到尾了解这一过程,包括读取、控制和更新Canvas上的像素。这里,我们要介绍3个内置方法,即getImageData()、putImageData()、create-ImageData()。

1. getImageData()

getImageData()方法用于从Canvas中复制某一矩形区域的像素数据。具体的调用代码如下:

var canvasData = ctx.getImageData(0, 0, mycanvas.width, mycanvas.height);

要注意的是,像素级操作的运算量非常巨大,以致查看canvasData.data的数据时会由于内存的消耗过大而导致浏览器崩溃,

2. putImageData()

putImageData()方法用于修改或者更新某个图形区域中的像素信息,此方法仅能在同域下使用。本地硬盘模式下也无法使用,必须架起Web服务器

具体代码如下:

var canvasData = ctx.putImageData(canvasData, 0, 0);

3. createImageData()

createImageData()方法根据指定的图片数据(image data)具有的宽高,建立一个ImageData对象。此方法并不会从现有的Canvas中复制像素,它生成的是完全空白的像素矩阵,它的初始值是全透明的黑色,即 (255,255,255,0),伪代码如下:

var canvasData = ctx.createImageData(mycanvas.width,my canvas.height);

canvasData="某些像素数据"

ctx.putImageData (canvasData, 0, 0);

下面的代码中,请务必在Web服务器环境下执行,否则无法正确显示。

<canvas id="mycanvas" width="500" height="500" style="border:1px #000 solid;">

</canvas>

<script type="text/javascript">

var mycanvas = document.getElementById('mycanvas');

var ctx=mycanvas.getContext('2d');

var img=new Image();

img.src="test.png";

img.onload=function(){

ctx.drawImage(img,0,0);

var imgd = ctx.getImageData(0,0,100,200);

var pix = imgd.data;

//下面开始反色处理

for(var i=0,n=pix.length;i<n;i+=4){

pix[i]=255 - pix[i]; //红

pix[i+1] = 255-pix[i+1]; //绿

pix[i+2] = 255-pix[i+2]; //蓝

pix[i+3] = pix[i+3]; //Alpha

}

ctx.putImageData(imgd,0,0);

imgd = ctx.getImageData(200,100,100,200);

pix = imgd.data;

//透明处理,透明度为0.6

for(var i=0,n=pix.length;i<n;i+=4){

pix[i] = pix[i]; //红

pix[i+1] = pix[i+1]; //绿

pix[i+2] = pix[i+2]; //蓝

pix[i+3] = pix[i+3]*0.6; //Alpha

}

ctx.putImageData(imgd,200,100);

}

</script>

感谢各位的阅读!关于“HTML5 Canvas像素操作的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI