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 对象（不会复制图像数据）

代码

  1.  <!DOCTYPE html>
  2.  <html lang="zh-cn">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>8-19 课堂演示</title>
  6.  </head>
  7.  <style type="text/css">
  8.  </style>
  9.  <body>
  10.      <canvas id="canvas" width="500" height="300" style="background: #A9A9A9">
  11.              很抱歉，您的浏览器暂不支持HTML5的canvas
  12.      </canvas>
  13.      <script>
  14.          var c=document.getElementById("canvas");
  15.          var ctx=c.getContext("2d");
  16.          ctx.fillStyle='rgba(255,55,5,0.6)'
  17.          ctx.fillRect(0,0,100,100)
  18.          var obj=ctx.getImageData(0,0,100,100);
  19.          // alert(obj.width)
  20.          // alert(obj.height)
  21.          // alert(obj.data.length)
  22.          //每一个像素包含四个颜色分量
  23.          // alert(obj.data[0])
  24.          // alert(obj.data[1])
  25.          // alert(obj.data[2])
  26.          // alert(obj.data[3])
  27.  
  28.          ctx.putImageData(obj,110,0)
  29.          for (var i=0;i< obj.data.length; i++){
  30.              obj.data[0+4*i]=100;
  31.              obj.data[1+4*i]=20;
  32.              obj.data[2+4*i]=250;
  33.              obj.data[3+4*i]=255;
  34.          }
  35.  
  36.          ctx.putImageData(obj,220,0)
  37.          for (var i=0;i< obj.data.length; i++) {
  38.              obj.data[0+4*i]=Math.floor(Math.random()*255)
  39.              obj.data[1+4*i]=Math.floor(Math.random()*255)
  40.              obj.data[2+4*i]=Math.floor(Math.random()*255)
  41.              obj.data[3+4*i]=Math.floor(Math.random()*255)
  42.          }
  43.          ctx.putImageData(obj,330,0)
  44.  
  45.          for (var i=0;i< obj.data.length; i++) {
  46.              var rad=Math.floor(Math.random()*255)
  47.              obj.data[0+4*i]=rad
  48.              obj.data[1+4*i]=rad
  49.              obj.data[2+4*i]=rad
  50.              obj.data[3+4*i]=rad
  51.          }
  52.          ctx.putImageData(obj,330,150)
  53.  
  54.      </script>
  55.  
  56.  </body>
  57.  </html>

操作图片

放在站点才能正常操作

  1.  <!DOCTYPE html>
  2.  <html lang="zh-cn">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>8-21 课堂演示</title>
  6.  </head>
  7.  <style type="text/css">
  8.  </style>
  9.  <body>
  10.      <canvas id="canvas" width="900" height="300" style="background: #A9A9A9">
  11.              很抱歉，您的浏览器暂不支持HTML5的canvas
  12.      </canvas>
  13.      <input type="button" value="像素操作" onclick="putImage()">
  14.      <input type="button" value="反色绘制" onclick="fs()">
  15.      <input id="ljxg" type="button" value="滤镜效果" onclick="lj()">
  16.      <script>
  17.          var c=document.getElementById("canvas");
  18.          var ctx=c.getContext("2d");
  19.          var img=new Image();
  20.          img.onload=function(){
  21.              ctx.drawImage(img,0,0,400,300)
  22.          }
  23.          img.src='../img/p3.jpg'
  24.          function putImage()    {
  25.              var imgData=ctx.getImageData(0,0,400,300) //用getImageData函数从画板上取得像素数据
  26.              //ctx.putImageData(imgData,500,0)  //将所取得的整个像素数据画到Canvas画板上
  27.              //将所取得的像素数据的一部分画到Canvas画板上。
  28.              //ctx.putImageData(imgData,500,0,150,0,130,300)
  29.              //ctx.putImageData(imgData,500,0,300,0,130,300)
  30.              ctx.putImageData(imgData,500,0,0,0,130,300)
  31.          }
  32.  
  33.          //反色绘制
  34.          function fs(){
  35.              ctx.clearRect(500,0,400,300)
  36.              var imgData=ctx.getImageData(0,0,400,300)
  37.              for (var i=0;i<imgData.data.length ; i+=4) {
  38.                  imgData.data[i+0]=255-imgData.data[i+0];
  39.                  imgData.data[i+1]=255-imgData.data[i+1]
  40.                  imgData.data[i+2]=255-imgData.data[i+2]
  41.              }
  42.              ctx.putImageData(imgData,500,0)
  43.          }
  44.  
  45.          //滤镜效果
  46.          function lj(){
  47.              ctx.clearRect(500,0,400,300)
  48.              var imgData=ctx.getImageData(0,0,400,300)
  49.              for (var i=0;i<imgData.data.length ; i+=4) {
  50.                  imgData.data[i+0]=0;
  51.                  //imgData.data[i+1]=0;
  52.                  // imgData.data[i+2]=0;
  53.              }
  54.              ctx.putImageData(imgData,500,0)
  55.          }
  56.      </script>
  57.  
  58.  </body>
  59.  </html>

绘制背景

  1.  <!DOCTYPE html>
  2.  <html lang="zh-cn">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>8-22 课堂演示</title>
  6.  </head>
  7.  <style type="text/css">
  8.  </style>
  9.  <body>
  10.      <canvas id="canvas" width="900" height="300" style="background: #A9A9A9">
  11.              很抱歉，您的浏览器暂不支持HTML5的canvas
  12.      </canvas>
  13.      <script>
  14.          var c=document.getElementById("canvas");
  15.          var ctx=c.getContext("2d");
  16.          var imgData=ctx.createImageData(300,300);
  17.          for (var i=0;i<imgData.data.length;i+=4){
  18.              var g=i*i*i*3%255
  19.                imgData.data[i+0]=g;
  20.                imgData.data[i+1]=g;
  21.               imgData.data[i+2]=g;
  22.                imgData.data[i+3]=255;
  23.          }
  24.          ctx.putImageData(imgData,0,0);
  25.  
  26.          for (var i=0;i<imgData.data.length;i+=4)
  27.            {
  28.                      g=Math.floor((i*i+4*i+30)%255)
  29.                        imgData.data[i+0]=g;
  30.                        imgData.data[i+1]=g;
  31.                       imgData.data[i+2]=255;
  32.                        imgData.data[i+3]=255;
  33.          }
  34.          ctx.putImageData(imgData,300,0);
  35.  
  36.          for (var i=0;i<imgData.data.length;i+=4)
  37.            {
  38.                      g=Math.floor(Math.sqrt(i*i*5)%255)
  39.                        imgData.data[i+0]=200;
  40.                        imgData.data[i+1]=g;
  41.                       imgData.data[i+2]=g;
  42.                        imgData.data[i+3]=255;
  43.          }
  44.          ctx.putImageData(imgData,600,0);
  45.      </script>
  46.  
  47.  </body>
  48.  </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. CAD使用GetAllAppName读所有名称（网页版）

    主要用到函数说明: MxDrawEntity::GetAllAppName 得到所有扩展数据名称,详细说明如下: 参数 说明 [out, retval] IMxDrawResbuf** ppRet 返 ...

  2. tab下拉显示

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

  3. flex 三列布局

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

  4. Python学习笔记（3）动态类型

    is运算符 ==是值相等而is必须是相同的引用才可以 l=[1,2,3] m=[1,2,3] print(l==m) # True print(l is m) # False sys模块 getref ...

  5. <MySQL>入门三 数据定义语言 DDL

    -- DDL 数据定义语言 /* 库和表的管理 一.库的管理:创建.修改.删除 二.表的管理:创建.修改.删除 创建:create 修改:alter 删除:drop */ 1.库的管理 -- 库的管理 ...

  6. Mybatis中and和or的细节处理

    当一条SQL中既有条件查又有模糊查的时候,偶尔会遇到这样的and拼接问题.参考如下代码: <select id="listSelectAllBusiness"> sel ...

  7. Nginx配置 隐藏入口文件index.php

    Nginx配置文件里放入这段代码 server { location / { index index.php index.html index.htm l.php; autoindex on; if ...

  8. git 忽略文件[.gitignore]常用配置

    .idea .buildpath .project .settings .Ds_Store composer.json composer.lock a.php /public/uploads /run ...

  9. 关于app.js和route.js和service.js还有controller.js中的依赖关系

    2.只要是由路由去执行的的控制器模块,必须注入到app.js里面进行依赖,在页面上就不需要ng-controller在html页面上写了:   但是如果一个控制器模块,没有经过路由管理:那么就必须要, ...

  10. 洛谷 1894 [USACO4.2]完美的牛栏The Perfect Stall

    [题解] 其实是个二分图最大匹配的模板题,直接上匈牙利算法就好了. #include<cstdio> #include<algorithm> #define N 1010 #d ...