pixel-util

Utilities of pixel

Usage no npm install needed!

<script type="module">
  import pixelUtil from 'https://cdn.skypack.dev/pixel-util';
</script>

README

PixelUtil NPM version Build Status Coverage Status

Sauce Test Status

Installation

Via npm

$ npm install pixel-util --save

var pixelUtil= require('pixel-util');
console.log(pixelUtil); //object

Via bower

$ bower install pixel-util --save

<script src="bower_components/pixel-util/pixel-util.min.js"></script>
<script>
  console.log(pixelUtil); //object
</script>

API

.createBuffer(file) -> Promise.then(buffer)

Create buffer of an argument.

var path= 'foo.png';
pixelUtil.createBuffer(path).then(function(buffer){
  console.log(buffer);// <Buffer 47 49 46 38 39 ...
});

var url= 'http://example.com/foo.png';
pixelUtil.createBuffer(url).then(function(buffer){
  console.log(buffer);// <Buffer 47 49 46 38 39 ...
});

var datauri= 'data:image/png;base64,iVBORw0KGgoAAA...';
pixelUtil.createBuffer(datauri).then(function(buffer){
  console.log(buffer);// <Buffer 47 49 46 38 39 ...
});

var binary= 'PNG\n\nIHDR``¶j\n        0PLT';
pixelUtil.createBuffer(binary).then(function(buffer){
  console.log(buffer);// <Buffer 47 49 46 38 39 ...
});

var buffer= fs.readFileSync('foo.png');
pixelUtil.createBuffer(buffer).then(function(buffer){
  console.log(buffer);// <Buffer 47 49 46 38 39 ...
});

var arraybuffer= new ArrayBuffer(buffer.length);
new Uint8Array(arraybuffer).set(buffer);
pixelUtil.createBuffer(arraybuffer).then(function(buffer){
  console.log(buffer);// <Buffer 47 49 46 38 39 ...
});

var uint8array= new Buffer(buffer);
pixelUtil.createBuffer(uint8array).then(function(buffer){
  console.log(buffer);// <Buffer 47 49 46 38 39 ...
});

var uint8clampedarray= new Uint8ClampedArray(buffer);
pixelUtil.createBuffer(uint8clampedarray).then(function(buffer){
  console.log(buffer);// <Buffer 47 49 46 38 39 ...
});

var blob= new Blob([buffer],{type:'image/png'});
pixelUtil.createBuffer(blob).then(function(buffer){
  console.log(buffer);// <Buffer 47 49 46 38 39 ...
});

var file= new File([buffer],{type:'image/png'});
pixelUtil.createBuffer(file).then(function(buffer){
  console.log(buffer);// <Buffer 47 49 46 38 39 ...
});

var image= new Image;
image.src= 'http://example.com/foo.png';
pixelUtil.createBuffer(image).then(function(buffer){
  console.log(buffer);// <Buffer 47 49 46 38 39 ...
});

.detect(file) -> Promise.then({ext,mime,type})

Asynchronous detection the image type and object type of an argument.

var path= 'foo.png';
pixelUtil.detect(path).then(function(types){
  console.log(types);
});
//-> {ext: 'png', mime: 'image/png', type: 'path'}

var url= 'http://example.com/foo.png';
pixelUtil.detect(url).then(function(types){
  console.log(types);
});
//-> {ext: 'png', mime: 'image/png', type: 'url'}

var datauri= 'data:image/png;base64,iVBORw0KGgoAAA...';
pixelUtil.detect(datauri).then(function(types){
  console.log(types);
});
//-> {ext: 'png', mime: 'image/png', type: 'datauri'}

var binary= 'PNG\n\nIHDR``¶j\n        0PLT';
pixelUtil.detect(binary).then(function(types){
  console.log(types);
});
//-> {ext: 'png', mime: 'image/png', type: 'binary'}

var buffer= fs.readFileSync('foo.png');
pixelUtil.detect(buffer).then(function(types){
  console.log(types);
});
//-> {ext: 'png', mime: 'image/png', type: 'buffer'}

var arraybuffer= new ArrayBuffer(buffer.length);
new Uint8Array(arraybuffer).set(buffer);
pixelUtil.detect(arraybuffer).then(function(types){
  console.log(types);
});
//-> {ext: 'png', mime: 'image/png', type: 'arraybuffer'}

var uint8array= new Uint8Array(buffer);
pixelUtil.detect(uint8array).then(function(types){
  console.log(types);
});
//-> {ext: 'png', mime: 'image/png', type: 'uint8array'}

var uint8clampedarray= new Uint8ClampedArray(buffer);
pixelUtil.detect(uint8clampedarray).then(function(types){
  console.log(types);
});
//-> {ext: 'png', mime: 'image/png', type: 'uint8clampedarray'}

var blob= new Blob([buffer],{type:'image/png'});
pixelUtil.detect(blob).then(function(types){
  console.log(types);
});
//-> {ext: 'png', mime: 'image/png', type: 'blob'}

var file= new File([buffer],{type:'image/png'});
pixelUtil.detect(file).then(function(types){
  console.log(types);
});
//-> {ext: 'png', mime: 'image/png', type: 'file'}

var image= new Image;
image.src= 'http://example.com/foo.png';
pixelUtil.detect(image).then(function(types){
  console.log(types);
});
//-> {ext: 'png', mime: 'image/png', type: 'image'}

.get(file) -> {ext,mime,type}

Synchronous detection the image type and object type of an argument. Blob/File is deprecate. Because analyze using FileReaderSync. But has not been implemented in the current browsers...

var path= 'foo.png';
pixelUtil.get(path);
//-> {ext: 'png', mime: 'image/png', type: 'path'}

var url= 'http://example.com/foo.png';
pixelUtil.get(url);
//-> {ext: 'png', mime: 'image/png', type: 'url'}

var datauri= 'data:image/png;base64,iVBORw0KGgoAAA...';
pixelUtil.get(datauri);
//-> {ext: 'png', mime: 'image/png', type: 'datauri'}

var binary= 'PNG\n\nIHDR``¶j\n        0PLT';
pixelUtil.get(binary);
//-> {ext: 'png', mime: 'image/png', type: 'binary'}

var buffer= fs.readFileSync('foo.png');
pixelUtil.get(buffer);
//-> {ext: 'png', mime: 'image/png', type: 'buffer'}

var arraybuffer= new ArrayBuffer(buffer.length);
new Uint8Array(arraybuffer).set(buffer);
pixelUtil.get(arraybuffer);
//-> {ext: 'png', mime: 'image/png', type: 'arraybuffer'}

var uint8array= new Uint8Array(buffer);
pixelUtil.get(uint8array);
//-> {ext: 'png', mime: 'image/png', type: 'uint8array'}

var uint8clampedarray= new Uint8ClampedArray(buffer);
pixelUtil.get(uint8clampedarray);
//-> {ext: 'png', mime: 'image/png', type: 'uint8clampedarray'}

var blob= new Blob([buffer],{type:'image/png'});
pixelUtil.get(blob);
//-> {ext: 'png', mime: 'image/png', type: 'blob'}

var file= new File([buffer],{type:'image/png'});
pixelUtil.get(file);
//-> {ext: 'png', mime: 'image/png', type: 'file'}

var image= new Image;
image.src= 'http://example.com/foo.png';
pixelUtil.get(image);
//-> {ext: 'png', mime: 'image/png', type: 'image'}

.getTypeof(file) -> type

Detect the object type of an argument.

var path= 'foo.png';
pixelUtil.getTypeof(path);
//-> path

var url= 'http://example.com/foo.png';
pixelUtil.getTypeof(url);
//-> url

var datauri= 'data:image/png;base64,iVBORw0KGgoAAA...';
pixelUtil.getTypeof(datauri);
//-> datauri

var binary= 'PNG\n\nIHDR``¶j\n        0PLT';
pixelUtil.getTypeof(binary);
//-> binary

var buffer= fs.readFileSync('foo.png');
pixelUtil.getTypeof(buffer);
//-> buffer

var arraybuffer= new ArrayBuffer(buffer.length);
pixelUtil.getTypeof(arraybuffer);
//-> arraybuffer

var uint8array= new Uint8Array(buffer);
pixelUtil.getTypeof(uint8array);
//-> uint8array

var uint8clampedarray= new Uint8ClampedArray(buffer);
pixelUtil.getTypeof(uint8clampedarray);
//-> uint8clampedarray

var blob= new Blob([buffer],{type:'image/png'});
pixelUtil.getTypeof(blob);
//-> blob

var file= new File([buffer],{type:'image/png'});
pixelUtil.getTypeof(file);
//-> file

var image= new Image;
image.src= 'http://example.com/foo.png';
pixelUtil.getTypeof(image);
//-> image

.createImageData(width,height) -> imageData

Return imageData has width and height.

Return Object like the ImageData if in Node.js

pixelUtil.createImageData 59,798
//-> <ImageData {width: 59, height: 798, data: <Uint8ClampedArray ...>}>

API for browser

.fetchImageData(file) -> Promise.then(imageData)

Create ImageData of an argument.

var path= 'foo.png';
pixelUtil.fetchImageData(path).then(function(imageData){
  console.log(imageData instanceof ImageData);// true
  console.log(imageData.width);// 73
  console.log(imageData.height);// 73
});

var url= 'http://example.com/foo.png';
pixelUtil.fetchImageData(url).then(function(imageData){
  console.log(imageData instanceof ImageData);// true
  console.log(imageData.width);// 73
  console.log(imageData.height);// 73
});

var datauri= 'data:image/png;base64,iVBORw0KGgoAAA...';
pixelUtil.fetchImageData(datauri).then(function(imageData){
  console.log(imageData instanceof ImageData);// true
  console.log(imageData.width);// 73
  console.log(imageData.height);// 73
});

var binary= 'PNG\n\nIHDR``¶j\n        0PLT';
pixelUtil.fetchImageData(binary).then(function(imageData){
  console.log(imageData instanceof ImageData);// true
  console.log(imageData.width);// 73
  console.log(imageData.height);// 73
});

var buffer= fs.readFileSync('foo.png');
pixelUtil.fetchImageData(buffer).then(function(imageData){
  console.log(imageData instanceof ImageData);// true
  console.log(imageData.width);// 73
  console.log(imageData.height);// 73
});

var arraybuffer= new ArrayBuffer(buffer.length);
new Uint8Array(arraybuffer).set(buffer);
pixelUtil.fetchImageData(arraybuffer).then(function(imageData){
  console.log(imageData instanceof ImageData);// true
  console.log(imageData.width);// 73
  console.log(imageData.height);// 73
});

var uint8array= new Uint8Array(buffer);
pixelUtil.fetchImageData(uint8array).then(function(imageData){
  console.log(imageData instanceof ImageData);// true
  console.log(imageData.width);// 73
  console.log(imageData.height);// 73
});

var uint8clampedarray= new Uint8ClampedArray(buffer);
pixelUtil.fetchImageData(uint8clampedarray).then(function(imageData){
  console.log(imageData instanceof ImageData);// true
  console.log(imageData.width);// 73
  console.log(imageData.height);// 73
});

var blob= new Blob([buffer],{type:'image/png'});
pixelUtil.fetchImageData(blob).then(function(imageData){
  console.log(imageData instanceof ImageData);// true
  console.log(imageData.width);// 73
  console.log(imageData.height);// 73
});

var file= new File([buffer],{type:'image/png'});
pixelUtil.fetchImageData(file).then(function(imageData){
  console.log(imageData instanceof ImageData);// true
  console.log(imageData.width);// 73
  console.log(imageData.height);// 73
});

var image= new Image;
image.src= 'http://example.com/foo.png';
pixelUtil.fetchImageData(image).then(function(imageData){
  console.log(imageData instanceof ImageData);// true
  console.log(imageData.width);// 73
  console.log(imageData.height);// 73
});

.set(imageData,source) polyfill under IE11

Instance of imageData.data is CanvasPixelArray if IE10 or less. That hasn't a .set method of Uint8Array, Change the imageData.data using pixelUtil.set with source.data.

var image= new Image;
image.src= 'http://example.com/foo.png';
pixelUtil.fetchImageData(image).then(function(imageData){
  var source= {data:new Array(imageData.data.length)};
  for(var i= 0; i< imageData.data.length; i++){
    source.data[i]= 0;
  }
  source.data[0]= 255;

  pixelUtl.set(imageData,source); // undefined

  console.log(imageData[0]); // 255
  console.log(imageData[imageData.data.length-1]); // 0
});

Related projects

License

MIT