CODEWITHSUNDEEP
javascriptimage
user784756
user784756

Reputation: 2373

How do I check if a pixel is empty?

I am fetching a .gif. I need to know if the content-length is 0 or if it’s a 1 × 1 pixel. Is there a way to do this for images via JavaScript?

Upvotes: 0

Views: 216

Answers (3)

G.H
G.H

Reputation: 317

How about looking at gifuct-js https://github.com/matt-way/gifuct-js

it's a gif parser in js.

The result of the decompressFrames(buildPatch) function returns an array of all the GIF image frames, and their meta data.

You can get the pixel data also

The pixel data is stored as a list of indexes for each pixel. These each point to a value in the colorTable array, which contain the color that each pixel should be drawn. Each frame of the gif may not be the full size, but instead a patch that needs to be drawn over a particular location. The disposalType defines how that patch should be drawn over the gif canvas. In most cases, that value will be 1, indicating that the gif frame should be simply drawn over the existing gif canvas without altering any pixels outside the frames patch dimensions. More can be read about this here.

Upvotes: 0

Moe Khalil
Moe Khalil

Reputation: 64

This should do it for you.

$('#image').change(function() {
  var img = new Image();

img.onload = function(){
  $('#height').html(img.height);
  $('#width').html(img.width);
};
  img.src = $(this).val();

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Image URL: <input type="text" id="image" /></label>

<h1>Width: <span id="width"></span></h1>
<h1>Height: <span id="height"></span></h1>

Upvotes: 0

vinayakj
vinayakj

Reputation: 5681

You can use Image object to load and check the dimensions before loading it to DOM.

 var img = new Image()
img.src ='http://lorempixel.com//1/1';
img.addEventListener("load", function() {
  console.log(img.naturalWidth)
  console.log(img.naturalHeight)
}, false);

//outputs 1 1

Upvotes: 3

Related Questions