Getting precise coordinates on a transparent PNG file using JavaScript Canvas

Question

Getting precise coordinates on a transparent PNG file using JavaScript Canvas

https://i.sstatic.net/Zw8is.png

Hey there, I'm a bit puzzled about the getImageData function mentioned on this page.

I have an image in png format with a transparent background. My goal is to retrieve the x and y coordinates for both left and right edges of a specific path at height/2 (as indicated by the red arrows).

Do you think using getImageData is the best approach for this task? Any pointers on how to achieve this would be greatly appreciated!

Thank you in advance.

javascript canvas

Answer 1

Answer №1

Indeed, utilize the

getImageData(x, y, width, height);

If you are dealing with only two colors (specifically transparent & white) :

var img = new Image();
img.onload = getPoints;
img.crossOrigin = 'anonymous';
img.src = "https://dl.dropboxusercontent.com/s/lvgvekzkyqkypos/path.png";

function getPoints(){
  // establish our canvas
  var canvas = document.createElement('canvas'),
      ctx = canvas.getContext('2d');
  canvas.width = this.width;
  canvas.height = this.height;
  // draw the image
  ctx.drawImage(this,0,0);
  // retrieve the middle y line
  var imageData = ctx.getImageData(0,Math.floor(this.height/2), this.width, 1);
  var data = imageData.data;
  // create an empty object to hold our points
  var pts = {x1: null, y1: Math.floor(this.height/2), x2: null, y2:Math.floor(this.height/2)};
  // define the initial opacity value
  var color = 0;
  // loop through the dataArray
  for(var i=0; i<data.length; i+=4){
    // as we are only interested in non-transparent pixels, we can focus on the 4th value of each pixel
    if(data[i+3]!==color){
      // update the value to the current one
      color = data[i+3];
      if(!pts.x1)
        pts.x1 = i/4;
      else
        pts.x2 = i/4;
      }
    }
  
  snippet.log('start points : '+pts.x1+'|'+pts.y1);
  snippet.log('end points : '+pts.x2+'|'+pts.y2);
  ctx.fillStyle = 'red';
  ctx.fillRect(pts.x1-5, pts.y1, 10, 10);
  ctx.fillRect(pts.x2-5, pts.y2, 10, 10);
  document.body.appendChild(canvas);
  }

body{background-color: blue}

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

Answer 2

Indeed, utilize the

getImageData(x, y, width, height);

If you are dealing with only two colors (specifically transparent & white) :

var img = new Image();
img.onload = getPoints;
img.crossOrigin = 'anonymous';
img.src = "https://dl.dropboxusercontent.com/s/lvgvekzkyqkypos/path.png";

function getPoints(){
  // establish our canvas
  var canvas = document.createElement('canvas'),
      ctx = canvas.getContext('2d');
  canvas.width = this.width;
  canvas.height = this.height;
  // draw the image
  ctx.drawImage(this,0,0);
  // retrieve the middle y line
  var imageData = ctx.getImageData(0,Math.floor(this.height/2), this.width, 1);
  var data = imageData.data;
  // create an empty object to hold our points
  var pts = {x1: null, y1: Math.floor(this.height/2), x2: null, y2:Math.floor(this.height/2)};
  // define the initial opacity value
  var color = 0;
  // loop through the dataArray
  for(var i=0; i<data.length; i+=4){
    // as we are only interested in non-transparent pixels, we can focus on the 4th value of each pixel
    if(data[i+3]!==color){
      // update the value to the current one
      color = data[i+3];
      if(!pts.x1)
        pts.x1 = i/4;
      else
        pts.x2 = i/4;
      }
    }
  
  snippet.log('start points : '+pts.x1+'|'+pts.y1);
  snippet.log('end points : '+pts.x2+'|'+pts.y2);
  ctx.fillStyle = 'red';
  ctx.fillRect(pts.x1-5, pts.y1, 10, 10);
  ctx.fillRect(pts.x2-5, pts.y2, 10, 10);
  document.body.appendChild(canvas);
  }

body{background-color: blue}

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

Getting precise coordinates on a transparent PNG file using JavaScript Canvas

Answer №1

Similar questions

Customize menu items in Angular ui-grid when right clicking on a cell

The overlay button is designed to start the video only when clicked on the center of the screen. However, if clicked on any other part of the video, it will stop

Dividing one SVG into Multiple SVGs

Adding styling to my project using @material-ui v5 has resulted in a CSS rule being injected, although I did not define it myself

Combining two JSON objects in JavaScript is simple when their IDs correspond to each other in both objects

Other options for positioning background in SVG or using CSS within SVG could include center center alignment settings

Ajax: The function assigned to the route does not get executed

Passing a reference to a react functional component (react.FC) results in a type error: The property ref is not recognized on the type 'IntrinsicAttributes & Props & { children: ReactNode}'

What causes one CSS file's properties to be inherited by another CSS file in a React application?

Can you list out the directives that are responsible for generating child scopes in AngularJS?

"Enhance your data visualization with Highcharts Windbarb and effortless AJAX data

Error: Unable to assign value to the 'props' property of an undefined object

Having trouble getting useFieldArray to work with Material UI Select component

Using the react-bootstrap library, I have successfully integrated a Navbar

A guide to finding the mean in Angular by utilizing JSON information

Sort through object attributes according to a different object

positioned the div within the StickyContainer element to ensure it remains fixed in place

Navigating to a Different Page in React Based on Button Click and Meeting Specific Conditions

What is the best way to showcase content using Chakra-ui SideBar in a React Application?

Mastering the management of various events within React Material UI components