raw-image

raw-image

A helper for manipulating raw image data and rendering it to a canvas.

Setup

Install the package.

npm install raw-image --save

Require the module.

var RawImage = require("raw-image");

Note: RawImage needs to run a browser context. You can use something like browserify to bundle RawImage as a dependency. Take a look at the example if you need help with this.

Usage

<canvas id="canvas"></canvas>
 
<script>
  var image = new RawImage("image.png");
  image.onload = function () {
 
    // Get the dimensions of the image.
    image.width;
    image.height;
 
    // Get the color of a pixel.
    image.get(50, 50);
 
    // Set the color of a pixel.
    var white = {
      "red":   255,
      "green": 255,
      "blue":  255,
      "alpha": 255
    };
    image.set(50, 50, white);
 
    // Render the image to a canvas.
    var canvas = document.getElementById("canvas");
    image.render(canvas);
  }
</script> 

If you change the image, you'll need to re-render it.

Dimensions

You can change the dimensions of the image by passing a width and/or a height:

new RawImage("image.png", { width: 100, height: 100 });

The aspect ratio of the image is preserved and the image will not exceed 100x100.

The get and set methods will respect the new image dimensions.

Serialization

Once the image has loaded, you can serialize your image to json:

var image = new RawImage("image.png");
var json;
 
image.onload = function () {
  json = JSON.stringify(image);
};
 
var clone = RawImage.fromJson(json);
clone.get(50, 50);

Screenshot

Contribution

Please send a pull request or open an issue.

You should follow me on twitter.