canvas上的像素操作(图像复制，细调)
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上的像素操作(图像复制，细调)的更多相关文章
- [js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)
接着上文[js高手之路] html5 canvas系列教程 - 状态详解(save与restore),相信大家都应该玩过美颜功能,而我们今天要讲的就是canvas强大的像素处理能力,通过像素处理,实现 ...
- HTML5 Canvas ( 图形的像素操作 ) getImageData, putImageData, ImgData.data
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- HTML5 canvas图像绘制方法与像素操作属性和方法
图像绘制方法 drawImage() 向画布上绘制图像.画布或视频 像素操作属性和方法 width 返回 ImageData ...
- Opencv中图像的遍历与像素操作
Opencv中图像的遍历与像素操作 OpenCV中表示图像的数据结构是cv::Mat,Mat对象本质上是一个由数值组成的矩阵.矩阵的每一个元素代表一个像素,对于灰度图像,像素是由8位无符号数来表示(0 ...
- selenium如何操作HTML5的画布canvas上的元素
话不多少,上图如下,下图红色框内是一个html5的画布,我们要像操作右上角的保存和数据视图的时候是无法公共selenium的普通定位操作到的,那该怎么办呢? 我们先new一个Selenium的acti ...
- 【OpenCV】三种方式操作图像像素
OpenCV中,有3种访问每个像素的方法:使用at方法.使用迭代器方法.使用指针 运行如下程序后可以发现使用at方法速度最快. 代码如下: //操作图像像素 #include <opencv2/ ...
- opencv中对图像的像素操作
1.对灰度图像的像素操作: #include<iostream> #include<opencv2/opencv.hpp> using namespace std; using ...
- 将Imagelist里的图像复制到TCanvas上的指定区域
function Tdmd.Draw_Image_In_Rect(C:TCanvas;R:TRect;i:integer):boolean;var tr:TRect;begin if i< ...
- canvas像素操作
像素操作 相关方法:getImageData(x,y,w,h); putImageData(oImg,x,y); createImageData(w,h); 1.getImageData(x,y, ...
随机推荐
- Java基础——二分法
BinarySearch 二分法查找,顾名思义就是要将数据每次都分成两份然后再去找到你想要的数据,我们可以这样去想,二分法查找很类似与我们平时玩的猜价格游戏,当你报出一个价格时裁判会告诉你价格相对于真 ...
- UVA - 10723 Cyborg Genes （LCS）
题目: 思路: 求两个串的最长公共子序列,则这个最短的串就是给出的两个串的长度和减去最长公共子序列的长度. 状态转移方程: 如果s[i-1]==t[j-1]就有dp[i][j] = dp[i-1][j ...
- 浅谈AC自动机模板
什么是AC自动机? 百度百科 Aho-Corasick automaton,该算法在1975年产生于贝尔实验室,是著名的多模匹配算法. 要学会AC自动机,我们必须知道什么是Trie,也就是字典树.Tr ...
- MySQL数据导入sql文件过程中出错
错误类型: ERROR 1231 (42000): Variable 'time_zone' can't be set to the value of 'NULL' ERROR 1231 (42000 ...
- cmd杀死进程
打开cmd 1.查看所有进程占用的端口 输入:netstat –ano(查看所有进程,查找相应占用端口的程序的pid) 直接查看占用指定端口的程序的pid 输入:netstat -ano|findst ...
- shell输出颜色、printf输出颜色
1.echo开启彩色输出: -e 开启echo中的转义: \e或者\033来输出Esc颜色: 恢复默认颜色为:\e[0m; 命令格式: echo -e "\e[字背景颜色:文字颜色m字符串\ ...
- js eslint语法规范错误提示代码
最近在用eslint代码检测,因为之前不太注意代码规范,刚开始确实头疼,哈哈,不过用习惯了就会感觉还不错,其实也没有那样难调试 我看过之前有些人已经做过总结,自己记录下,方便自己以后查找 “Missi ...
- linux常用命令大全（linux基础命令+命令备忘录+面试复习）
linux常用命令大全(linux基础命令+命令备忘录+面试复习)-----https://www.cnblogs.com/caozy/p/9261224.html
- 页面中插入视频的方法---video/embed/iframe总结
1. video标签 当前主流的方法当然是HTML5中的video标签了,但是 当前,video 元素只支持三种视频格式: Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg ...
- Leetcode 90.子集
子集 给定一个可能包含重复元素的整数数组 nums,返回该数组所有可能的子集(幂集). 说明:解集不能包含重复的子集. 示例: 输入: [1,2,2] 输出: [ [2], [1], [1,2,2], ...