canvas上的像素操作(图像复制,细调)

总结

1、操作对象:ImageData 对象,其实是canvas的像素点集合

2、主要操作: var obj=ctx.getImageData(0,0,100,100);  ctx.putImageData(obj,110,0)

3、操作图片要放在站点才能正常操作,可以是本地站点可以是外部站点

4、属性有三个:宽、高、data

5、for循环给每一个像素点添加或者修改

6、不同的公式可以绘制任意奇妙的图形

像素操作

  • 属性

    • width 返回 ImageData 对象的宽度(可以理解为一行像素的个数)
    • height 返回 ImageData 对象的高度(可以理解为一列像素的个数)
    • data 返回一个对象,其包含指定的 ImageData 对象的图像数据
      • 该对象包含每一个像素的四个rgba值,注意每个值都在0-255之间
      • 这个四个参数和CSS中讲的rgba颜色表示法原理相同,四个参数分别表示红、绿、蓝以及透明度。
      • 所不同的是这里的透明度取值也是0-255,255表示完全不透明,0表示完全透明
  • 方法
    • getImageData(x,y,w,h) 返回 ImageData 对象,该对象为画布上指定的矩形复制像素数据
    • putImageData(imgData,dx,dy,dirtyX,dirtyY,w,h) 把图像数据(从指定的 ImageData 对象)放回画布

      首先讨论第一种最简单的putImageData用法,即putImageData(imgData,dirtyX,dirtyY),在解释其他参数

      • imgData 规定要放回画布的 ImageData 对象。
      • dx/dy ImageData 对象左上角的 x/y坐标,以像素计。即准备绘制图像的起点坐标.
      • [dirtyX,dirtyY,w,h]为一组可选参数,该参数确定了一个以dx和dy坐标原点的矩形,分别表示矩形的起点和宽高,该矩形把将要绘制的图像限定在矩形区域内.

        温馨提示:如果用绘入外部图片的办法测试该属性,在本地测试会出错,这是由于javaScript的同源策略对context.getImageDate的影响,该策略是基于浏览器的安全,禁用会造成安全隐患。可以通过搭建一个本地站点,将文档放到站点的方法测试。对于这一点在本课程中不做过多讲解。

    • createImageData() 创建新的、空白的 ImageData 对象
      • var imgData=context.createImageData(width,height);以指定的尺寸(以像素计)创建新的 ImageData 对象
      • var imgData=context.createImageData(imageData)创建与指定的另一个 ImageData 对象尺寸相同的新 ImageData 对象(不会复制图像数据)

代码

 <!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>8-19 课堂演示</title>
</head>
<style type="text/css">
</style>
<body>
<canvas id="canvas" width="500" height="300" style="background: #A9A9A9">
很抱歉,您的浏览器暂不支持HTML5的canvas
</canvas>
<script>
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
ctx.fillStyle='rgba(255,55,5,0.6)'
ctx.fillRect(0,0,100,100)
var obj=ctx.getImageData(0,0,100,100);
// alert(obj.width)
// alert(obj.height)
// alert(obj.data.length)
//每一个像素包含四个颜色分量
// alert(obj.data[0])
// alert(obj.data[1])
// alert(obj.data[2])
// alert(obj.data[3]) ctx.putImageData(obj,110,0)
for (var i=0;i< obj.data.length; i++){
obj.data[0+4*i]=100;
obj.data[1+4*i]=20;
obj.data[2+4*i]=250;
obj.data[3+4*i]=255;
} ctx.putImageData(obj,220,0)
for (var i=0;i< obj.data.length; i++) {
obj.data[0+4*i]=Math.floor(Math.random()*255)
obj.data[1+4*i]=Math.floor(Math.random()*255)
obj.data[2+4*i]=Math.floor(Math.random()*255)
obj.data[3+4*i]=Math.floor(Math.random()*255)
}
ctx.putImageData(obj,330,0) for (var i=0;i< obj.data.length; i++) {
var rad=Math.floor(Math.random()*255)
obj.data[0+4*i]=rad
obj.data[1+4*i]=rad
obj.data[2+4*i]=rad
obj.data[3+4*i]=rad
}
ctx.putImageData(obj,330,150) </script> </body>
</html>

操作图片

放在站点才能正常操作

 <!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>8-21 课堂演示</title>
</head>
<style type="text/css">
</style>
<body>
<canvas id="canvas" width="900" height="300" style="background: #A9A9A9">
很抱歉,您的浏览器暂不支持HTML5的canvas
</canvas>
<input type="button" value="像素操作" onclick="putImage()">
<input type="button" value="反色绘制" onclick="fs()">
<input id="ljxg" type="button" value="滤镜效果" onclick="lj()">
<script>
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
var img=new Image();
img.onload=function(){
ctx.drawImage(img,0,0,400,300)
}
img.src='../img/p3.jpg'
function putImage() {
var imgData=ctx.getImageData(0,0,400,300) //用getImageData函数从画板上取得像素数据
//ctx.putImageData(imgData,500,0) //将所取得的整个像素数据画到Canvas画板上
//将所取得的像素数据的一部分画到Canvas画板上。
//ctx.putImageData(imgData,500,0,150,0,130,300)
//ctx.putImageData(imgData,500,0,300,0,130,300)
ctx.putImageData(imgData,500,0,0,0,130,300)
} //反色绘制
function fs(){
ctx.clearRect(500,0,400,300)
var imgData=ctx.getImageData(0,0,400,300)
for (var i=0;i<imgData.data.length ; i+=4) {
imgData.data[i+0]=255-imgData.data[i+0];
imgData.data[i+1]=255-imgData.data[i+1]
imgData.data[i+2]=255-imgData.data[i+2]
}
ctx.putImageData(imgData,500,0)
} //滤镜效果
function lj(){
ctx.clearRect(500,0,400,300)
var imgData=ctx.getImageData(0,0,400,300)
for (var i=0;i<imgData.data.length ; i+=4) {
imgData.data[i+0]=0;
//imgData.data[i+1]=0;
// imgData.data[i+2]=0;
}
ctx.putImageData(imgData,500,0)
}
</script> </body>
</html>

绘制背景

 <!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>8-22 课堂演示</title>
</head>
<style type="text/css">
</style>
<body>
<canvas id="canvas" width="900" height="300" style="background: #A9A9A9">
很抱歉,您的浏览器暂不支持HTML5的canvas
</canvas>
<script>
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
var imgData=ctx.createImageData(300,300);
for (var i=0;i<imgData.data.length;i+=4){
var g=i*i*i*3%255
imgData.data[i+0]=g;
imgData.data[i+1]=g;
imgData.data[i+2]=g;
imgData.data[i+3]=255;
}
ctx.putImageData(imgData,0,0); for (var i=0;i<imgData.data.length;i+=4)
{
g=Math.floor((i*i+4*i+30)%255)
imgData.data[i+0]=g;
imgData.data[i+1]=g;
imgData.data[i+2]=255;
imgData.data[i+3]=255;
}
ctx.putImageData(imgData,300,0); for (var i=0;i<imgData.data.length;i+=4)
{
g=Math.floor(Math.sqrt(i*i*5)%255)
imgData.data[i+0]=200;
imgData.data[i+1]=g;
imgData.data[i+2]=g;
imgData.data[i+3]=255;
}
ctx.putImageData(imgData,600,0);
</script> </body>
</html>

 

canvas上的像素操作(图像复制,细调)的更多相关文章

  1. [js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)

    接着上文[js高手之路] html5 canvas系列教程 - 状态详解(save与restore),相信大家都应该玩过美颜功能,而我们今天要讲的就是canvas强大的像素处理能力,通过像素处理,实现 ...

  2. HTML5 Canvas ( 图形的像素操作 ) getImageData, putImageData, ImgData.data

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. HTML5 canvas图像绘制方法与像素操作属性和方法

    图像绘制方法 drawImage()        向画布上绘制图像.画布或视频 像素操作属性和方法 width                                返回 ImageData ...

  4. Opencv中图像的遍历与像素操作

    Opencv中图像的遍历与像素操作 OpenCV中表示图像的数据结构是cv::Mat,Mat对象本质上是一个由数值组成的矩阵.矩阵的每一个元素代表一个像素,对于灰度图像,像素是由8位无符号数来表示(0 ...

  5. selenium如何操作HTML5的画布canvas上的元素

    话不多少,上图如下,下图红色框内是一个html5的画布,我们要像操作右上角的保存和数据视图的时候是无法公共selenium的普通定位操作到的,那该怎么办呢? 我们先new一个Selenium的acti ...

  6. 【OpenCV】三种方式操作图像像素

    OpenCV中,有3种访问每个像素的方法:使用at方法.使用迭代器方法.使用指针 运行如下程序后可以发现使用at方法速度最快. 代码如下: //操作图像像素 #include <opencv2/ ...

  7. opencv中对图像的像素操作

    1.对灰度图像的像素操作: #include<iostream> #include<opencv2/opencv.hpp> using namespace std; using ...

  8. 将Imagelist里的图像复制到TCanvas上的指定区域

    function Tdmd.Draw_Image_In_Rect(C:TCanvas;R:TRect;i:integer):boolean;var  tr:TRect;begin    if i< ...

  9. canvas像素操作

    像素操作 相关方法:getImageData(x,y,w,h);  putImageData(oImg,x,y);  createImageData(w,h); 1.getImageData(x,y, ...

随机推荐

  1. SpringBoot开源项目学习总结

    一.实现日期格式数据类型的转换 首先,定义DateConverter实现Converter<String, Date>接口: package com.stevlu.common; impo ...

  2. 05JavaScript中的事件处理

    JavaScript中的事件处理 在JavaScript中,事件的发生主要是由窗口中内容变化.键盘和鼠标引起的.JavaScript在某些事件发生的时候,可以通过一些相应的事件处理器来捕获这些事件,并 ...

  3. 04JavaScript程序语句

    JavaScript程序语句 2.6程序控制流程 2.6.1选择结构 if <逻辑表达式> 语句 else 语句 if <逻辑表达式> { 语句组 } else { 语句组} ...

  4. 校内测之zay与银临 (day2)(只有T1)

    一些与题目无关的碎碎念 推出式子来一定要化简!!!freopen不要写错!!!特判不要瞎搞!!!! 做到以上三点能高35分qwq T1 江城唱晚 你看数据那么大,显然又是一道数学题. 这里有n个种海棠 ...

  5. 微服务网关从零搭建——(九)网关部署到linux服务器

    环境准备 公司电脑已安装core环境所以此处略过core环境安装 可参看此处 consul安装 如果没有wget命令 执行以下命令 yum install wget 下载consul wget htt ...

  6. ORACLE 查看当前用户信息(用户,表视图,索引,表空间,同义词,存储过程,约束条件)

    1.用户 查看当前用户的缺省表空间 SQL>select username,default_tablespace from user_users; 查看当前用户的角色 SQL>select ...

  7. Linux终端中的字符串使用总结(截取,切片,查找替换,转换,变量赋值等)

    1.基于模式匹配截取字符串 1.#.##号截取 #号截取,从左边开始,以一个出现的分隔符(最左)为准,删除左边字符. ##号截取,从左边开始,以最后(最右)一个分隔符为准,删除左边字符. str='h ...

  8. zabbix登录密码重置方法

    注:由于账号较多,难免忘记账号,下面是找回zabbix登录密码的过程. 一.登录zabbix数据库 [root@123 ~]# mysql -uroot -p密码 二.修改zabbix密码 mysql ...

  9. buf.writeInt16BE()函数详解

    buf.writeInt16BE(value, offset[, noAssert]) buf.writeInt16LE(value, offset[, noAssert]) value {Numbe ...

  10. ds020507

    芯片输出端不加负载的时候,芯片的输出电压是9点多伏. 加上大的负载,芯片发热,电压接近输入电压. 正常负载,芯片输出7.0几伏. 版权声明:本文为博主原创文章,未经博主允许不得转载.