Web ImageData API | ImageData.data property

Last Updated : 31 Jul, 2019

The ImageData.data property is used to return a Uint8ClampedArray which contains the ImageData object in pixel. The ImageData object is stored in a one-dimensional array in RGBA order. The value of RGBA is lies between 0 to 255.

Syntax:

imageData.data

Example 1: This example display the ImageData pixel values of array with zeros.

<!DOCTYPE html>  
<html>  
  
<head> 
    <title> 
        Web ImageData API | ImageData.data property 
    </title> 
  
</head> 
  
<body style="text-align:center;"> 
      
    <h1 style="color:green;">  
        GeeksForGeeks  
    </h1>  
                  
    <h2>ImageData data property</h2> 
  
    <button onclick="getdata ();">Get data</button> 
      
    <p id='data'></p> 
  
    <script type="text/javascript"> 
        function getdata () { 
        let imageData = new ImageData(100, 100); 
            document.getElementById('data').innerHTML 
                    = imageData.data; 
        } 
    </script>  
</body> 
  
</html> 

Output:

Before Click the Button:
After Click the Button:

Example 2: This example display the length of the ImageData array object.

<!DOCTYPE html>  
<html>  
  
<head> 
    <title> 
        Web ImageData API | ImageData.data property 
    </title> 
  
</head> 
  
<body style="text-align:center;"> 
      
    <h1 style="color:green;">  
        GeeksForGeeks  
    </h1>  
                  
    <h2>ImageData data property</h2> 
      
    <button onclick="getdata ();"> 
        Get length 
    </button> 
      
    <p id='data'></p> 
  
    <script type="text/javascript"> 
        function getdata () { 
        let imageData = new ImageData(100, 100); 
            document.getElementById('data').innerHTML 
                    = imageData.data.length; 
        } 
    </script>  
</body> 
  
</html> 