wxJavaScript

Introduction

The GD module ports the GD library to JavaScript. GD is a graphics library. It allows your code to quickly draw images complete with lines, arcs, text, multiple colors, cut and paste from other images, and flood fills, and write out the result as a PNG or JPEG file. This is particularly useful in World Wide Web applications, where PNG and JPEG are two of the formats accepted for inline images by most browsers.

Examples

Drawing a pixel

A white pixel will be drawn in the middle of a black square using setPixel.

var img = new gd.Image(new wxSize(100, 100));
// Background colour first
var black = img.colorAllocate(wxBLACK);
var white = img.colorAllocate(wxWHITE);

img.setPixel(new wxPoint(50, 50), white);

var jpeg = new gd.ImageJPEG(img);
jpeg.write("c:\\temp\\pixel.jpg");

Drawing a line

A white line is drawn from the upper left corner to the bottom right corner using line

var img = new gd.Image(new wxSize(100, 100));
// Background colour first
var black = img.colorAllocate(wxBLACK);
var white = img.colorAllocate(wxWHITE);

img.line(new wxPoint(0, 0), new wxPoint(99, 99), white);

var jpeg = new gd.ImageJPEG(img);
jpeg.write("c:\\temp\\line.jpg");

Drawing a dashed line

This example shows how to draw a dashed line. A dashed white line is drawn from the upper left corner to the bottom right corner using setStyle and line.

var img = new gd.Image(new wxSize(100, 100));
// Background colour first
var black = img.colorAllocate(wxBLACK);
var white = img.colorAllocate(wxWHITE);

var style = new Array(white, white, white, 
                      gd.transparent, gd.transparent, gd.transparent);
img.setStyle(style);
img.line(new wxPoint(0, 0), new wxPoint(99, 99), gd.styled);

var jpeg = new gd.ImageJPEG(img);
jpeg.write("c:\\temp\\dashed.jpg")

Drawing a triangle

A triangle is drawn using the polygon functions. This example will draw a white triangle on a black background. For a filled triangle, use filledPolygon.

var img = new gd.Image(new wxSize(100, 100));
// Background colour first
var black = img.colorAllocate(wxBLACK);
var white = img.colorAllocate(wxWHITE);

var points = new Array(new wxPoint(50, 0),
                       new wxPoint(99, 99),
                       new wxPoint(0, 99));
img.polygon(points, white);

var jpeg = new gd.ImageJPEG(img);
jpeg.write("c:\\temp\\polygon.jpg");

Drawing a rectangle

A rectangle is drawn with rectangle.

var img = new gd.Image(new wxSize(100, 100));
// Background colour first
var black = img.colorAllocate(wxBLACK);
var white = img.colorAllocate(wxWHITE);

// Note that wxRect should be created with wxPoint to get the same
// result as the example on the GD website.
img.rectangle(new wxRect(new wxPoint(25, 25), 
                         new wxPoint(74, 74)), white);

var jpeg = new gd.ImageJPEG(img);
jpeg.write("c:\\temp\\rect.jpg");

Drawing a filled polygon

A filled polygon is created with filledPolygon

var img = new gd.Image(new wxSize(100, 100));
// Background colour first
var black = img.colorAllocate(wxBLACK);
var white = img.colorAllocate(wxWHITE);
var red = img.colorAllocate(wxRED);

var points = new Array(new wxPoint(50, 0),
                       new wxPoint(99, 99),
                       new wxPoint(0, 99));
img.filledPolygon(points, white);
/* Outline it in red; must be done second */
img.polygon(points, red);

var jpeg = new gd.ImageJPEG(img);
jpeg.write("c:\\temp\\filledpolygon.jpg");

Drawing a partial ellipse

arc is used to draw a partial ellipse centered at the given point, with the specified size in pixels.

var img = new gd.Image(new wxSize(100, 50));
// Background colour first
var black = img.colorAllocate(wxBLACK);
var white = img.colorAllocate(wxWHITE);

img.arc(new wxPoint(50, 25), new wxSize(98, 48), 0, 360, white);
var jpeg = new gd.ImageJPEG(img);
jpeg.write("c:\\temp\\arc.jpg");

Drawing a filled partial ellipse

filledArc is used to draw a partial ellipse centered at the given point, with the specified size in pixels.

var img = new gd.Image(new wxSize(100, 50));
// Background colour first
var black = img.colorAllocate(wxBLACK);
var white = img.colorAllocate(wxWHITE);

img.filledArc(new wxPoint(50, 25), new wxSize(98, 48),
              0, 360, white, gd.arc);
var jpeg = new gd.ImageJPEG(img);
jpeg.write("c:\\temp\\filledarc.jpg");

Alpha Blending

The alphaBlending function allows for two different modes of drawing on truecolor images. In blending mode, which is on by default, the alpha channel component of the color supplied to all drawing functions, such as setPixel, determines how much of the underlying color should be allowed to shine through. As a result, gd automatically blends the existing color at that point with the drawing color, and stores the result in the image. The resulting pixel is opaque. In non-blending mode, the drawing color is copied literally with its alpha channel information, replacing the destination pixel. Blending mode is not available when drawing on palette images.

var red, blue;
var img = new gd.Image(new wxSize(100, 100), true);

/* Background color */
red = gd.trueColor(wxRED);

img.filledRectangle(new wxRect(new wxPoint(0, 0), 
                               new wxPoint(100, 100)),
                    red);

/* Drawing color. Full transparency would be an alpha channel value
   of 127 (gd has a 7 bit alpha chnanel). 0 is opaque,
   127 is transparent. So cut gdAlphaTransparent in half to get
50% blending. */
blue = gd.trueColorAlpha(wxBLUE, gd.alphaTransparent / 2);

/* Draw with blending. Result will be 50% red, 50% blue: yellow
(emitted light, remember, not reflected light. What you learned
in Kindergarten is wrong here). */
img.alphaBlending(1);
img.filledRectangle(new wxRect(new wxPoint(0, 0),
                               new wxPoint(25, 25)),
                    blue);

/* Draw without blending. Result will be 50% blue, 50%
the background color of the image viewer or web browser
used; results in browsers that don't support
semi-transparent pixels are unpredictable! */
img.alphaBlending(0);
img.filledRectangle(new wxRect(new wxPoint(75, 75), 
                               new wxPoint(25, 25)), 
                    blue);

var png = new gd.ImagePNG(img);
png.write("c:\\temp\\alphablend.png");