canvas上的像素操做(圖像複製，細調)

時間  2019-11-13
標籤 canvas 像素 圖像 複製 細調 简体版
原文   原文鏈接

canvas上的像素操做(圖像複製，細調)

總結

一、操做對象：ImageData 對象，實際上是canvas的像素點集合css

二、主要操做： var obj=ctx.getImageData(0,0,100,100);  ctx.putImageData(obj,110,0)html

三、操做圖片要放在站點才能正常操做，能夠是本地站點能夠是外部站點java

四、屬性有三個：寬、高、datacanvas

五、for循環給每個像素點添加或者修改瀏覽器

六、不一樣的公式能夠繪製任意奇妙的圖形安全

 

像素操做

  • 屬性
    • 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)，在解釋其餘參數dom

      • imgData 規定要放回畫布的 ImageData 對象。
      • dx/dy ImageData 對象左上角的 x/y座標，以像素計。即準備繪製圖像的起點座標.

      • [dirtyX,dirtyY,w,h]爲一組可選參數，該參數肯定了一個以dx和dy座標原點的矩形，分別表示矩形的起點和寬高，該矩形把將要繪製的圖像限定在矩形區域內.ide

        舒適提示：若是用繪入外部圖片的辦法測試該屬性，在本地測試會出錯，這是因爲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 
55     </script>
56         
57 </body>
58 </html>
View Code

 

操做圖片

放在站點才能正常操做測試

 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>
View Code

 

繪製背景

 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>
View Code
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程