Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/satyam-2001/jpg-js

Advanced image processing and manipulation in JavaScript.
https://github.com/satyam-2001/jpg-js

greyscale image image-crop image-cropper image-flip image-processing image-resize image-rotate javascript jpeg jpeg-decoder jpeg-encoder jpg nodejs npm package png

Last synced: 1 day ago
JSON representation

Advanced image processing and manipulation in JavaScript.

Awesome Lists containing this project

README 

        
# JpegJS



Read, manipulate, write, encode and decode image data.



# Installation



This module is installed via npm:



```shell

npm install jpg-js

```

# Author



 Satyam Lohiya 



# Contents






Importing



```javascript

const Image = require('jpg-js');

```



Open/Load image



To load a image, use open function :



```javascript

const Image = require('jpg-js');



const img = Image.open('img.jpg');

console.log(img);



/*

Image {

  height: 664,

  width: 1601,

  data: 

}

*/



```



Decoded/Encoded Data



```javascript

const Image = require("jpg-js");

const fs = require("fs");



img = Image.open("img.jpeg");



//Decoded Data

//also access by img.data

const decoded = img.decodedData();

console.log(decoded);

/*

{

  height: 384,

  width: 612,

  data: 

}

*/



//Enoded Data

const encoded = img.encodedData();

console.log(encoded);

/*



*/



//Saving encoded data back to jpeg

fs.writeFileSync("image.jpeg",encoded);



```



Resize image



```javascript

const Image = require("jpg-js")



const img = Image.open("img.jpg")



//Resize a image to width:1500 & height:1000

img.resize(1500,1000)



//Saving processed image as image.jpg

img.save("image.jpg")



```



**Actual Image (img.jpg)**     **Size: 664 x 1601**



![img](https://user-images.githubusercontent.com/88069082/149673405-b47f71c1-0777-4038-9247-5b0c9d166f22.jpg)



**Resized Image (image.jpg)**     **Size: 1000 x 1500**



![image](https://user-images.githubusercontent.com/88069082/149673401-6ab5bd5b-82ca-40df-9999-b17b92d65b3e.jpg)



Crop image



```javascript

const Image = require("jpg-js")



const img = Image.open("img.jpeg")



//Crop a image left:0 , upper:0 , right:300 , low:200

img.crop([0,0,300,200])



//Saving processed image as image.jpeg

img.save("image.jpeg")

```



**Actual Image (img.jpeg)**





  

 



**Crop Image (image.jpeg)**





  

 



Greyscale image



```javascript

const Image = require("jpg-js")



const img = Image.open("img.jpeg")



//Converting image to greyscale

img.greyscale()



//Saving processed image as image.jpeg

img.save("image.jpeg")!

```



**Actual Image (img.jpeg)**





  

 



**Greyscale Image (image.jpeg)**





  

 



Image From Array



```javascript

const Image = require("jpg-js");



//Creating a 1000 x 1000 size image

const height = 1000;

const width = 1000;



//Allocating Buffer for image data

const data = new Buffer.alloc(width * height * 4);



//Putting data into Buffer

for(let i = 0 ; i < height ; i++){

    const row = i * width * 4;

    for(let j = 0 ; j < width ; j++){

        const cell = row + j * 4;



        // Filling first-half with red

        if(i < height/2){

            data[cell] = 255;     // Red

            data[cell+1] = 0;     // Green

            data[cell+2] = 0;     // Blue

            data[cell+3] = 255;   // Alpha [ignore for jpeg]

        }



        // Filling secondt-half with green

        else{

            data[cell] = 0;       // Red

            data[cell+1] = 255;   // Green

            data[cell+2] = 0;     // Blue

            data[cell+3] = 255;   // Alpha [ignore for jpeg]

        }

    }

}



//Creating image from array

img = Image.fromarray(data,width,height);



//Saving image as image.jpeg

img.save("image.jpeg");

```



**image.jpeg**     **Size : 1000 * 1000**





  

 



Rotate Image



```javascript

const Image = require("jpg-js");



img = Image.open("img.jpg");



//Rotating image clockwise

img.rotate();



//Saving processed image as image.jpg

img.save("image.jpg")

```



**Actual Image (img.jpg)**





  

 



**Rotated Image (image.jpg)**





  

 



Flip Image



```javascript

// Horizontal Flip

const Image = require("jpg-js");



img = Image.open("img.jpg");



//Flipping image horizontally

img.flip_horizontal();



//Saving processed image as horizontal.jpg

img.save("horizontal.jpg")

```



```javascript

// Vertical Flip

const Image = require("jpg-js");



img = Image.open("img.jpg");



//Flipping image vertically

img.flip_vertical();



//Saving processed image as vertical.jpg

img.save("vertical.jpg")

```



**Actual Image (img.jpg)**





  

 



**Horizontal Flip Image (horizontal.jpg)**





  

 



**Verticall Flip Image (vertical.jpg)**





  

 



## License



### Decoding



This library builds on the work of two other JPEG javascript libraries,

namely [jpgjs](https://github.com/notmasteryet/jpgjs) for the decoding

which is licensed under the Apache 2.0 License below:



Copyright 2011 notmasteryet



Licensed under the Apache License, Version 2.0 (the "License");

you may not use this file except in compliance with the License.

You may obtain a copy of the License at



[http://www.apache.org/licenses/LICENSE-2.0](http://www.apache.org/licenses/LICENSE-2.0)



Unless required by applicable law or agreed to in writing, software

distributed under the License is distributed on an "AS IS" BASIS,

WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

See the License for the specific language governing permissions and

limitations under the License.



### Encoding



The encoding is based off a port of the JPEG encoder in [as3corelib](https://code.google.com/p/as3corelib/source/browse/trunk/src/com/adobe/images/JPGEncoder.as).



The port to Javascript was done by by Andreas Ritter, www.bytestrom.eu, 11/2009.



The Adobe License for the encoder is:



**Adobe**



Copyright (c) 2008, Adobe Systems Incorporated

All rights reserved.



Redistribution and use in source and binary forms, with or without

modification, are permitted provided that the following conditions are

met:



- Redistributions of source code must retain the above copyright notice,

  this list of conditions and the following disclaimer.



- Redistributions in binary form must reproduce the above copyright

  notice, this list of conditions and the following disclaimer in the

  documentation and/or other materials provided with the distribution.



- Neither the name of Adobe Systems Incorporated nor the names of its

  contributors may be used to endorse or promote products derived from

  this software without specific prior written permission.



*THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS

IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,

THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR

PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR

CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,

EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,

PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR

PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF

LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING

NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS

SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.*