v0.1

Libwebp Javascript - beta

WebP - weppy - libwebpjs - offline - decoder-encoder - HTML5

Update: 8/31/2011 - libwebpjs 0.1.3 released - go to release

Update: 7/11/2011 - libwebpjs 0.1.2 released - go to release

Decoder demo: ( WebP -> PNG )

Drop your *.webp image into the field (only Chrome & Firefox)

or use one of the sample image files - Your browser may freeze for a few seconds

Notice: When you want to use the images, you need a permission of the author. more information

Your Browser cannot show canvas

Speed result: - n/a

Code:

var WebPImage = { width:{value:0},height:{value:0} }
var decoder = new WebPDecoder();
var bitmap = decoder.WebPDecodeRGB(data, data.length, WebPImage.width, WebPImage.height);
//or
var bitmap = decoder.WebPDecodeRGBA(data, data.length, WebPImage.width, WebPImage.height);


//read width/height
var width = WebPImage.width.value;
var height = WebPImage.height.value;

Encoder demo ( bitmap, png, jpg -> WebP )

Drop your bitmap, png, jpg in the field below and click "Encode"

or use one of the sample images for encoding:

Notice: When you want to use the images, you need a permission of the author. more information

|

Input Image:
Your Browser cannot show canvas

Method: - Quality: 0-100% Your browser may freeze for a few seconds

Output: Can only see in Chrome & Opera

Save the result:

Speed result: - n/a

Code:

var out={output:''}; //rgba data
var encoder = new WebPEncoder();

[config code]

//set config; default config -> WebPEncodeConfig( null ) 
encoder.WebPEncodeConfig(config); //when you set the config you must it do for every WebPEncode... new

//start encoding
var size = encoder.WebPEncodeRGB(inputData, w, h, w*3, qualityVal, out); //w*4 desc: w = width, 3:RGB/BGR, 4:RGBA/BGRA 
// or
var size = encoder.WebPEncodeRGBA(inputData, w, h, w*4, qualityVal, out); //w*4 desc: w = width, 3:RGB/BGR, 4:RGBA/BGRA 

//after encoding, you can get the enc-details:
str = encoder.ReturnExtraInfo();

//output (array of bytes)
var output = out.output; 
 
config-code:
//config, you can set all arguments or what you need
config = new Object()
config.target_size = 0;			// if non-zero, set the desired target size in bytes. Takes precedence over the 'compression' parameter.
config.target_PSNR = 0.;		// if non-zero, specifies the minimal distortion to	try to achieve. Takes precedence over target_size.
config.method = method;			// quality/speed trade-off (0=fast, 6=slower-better)
config.sns_strength = 50;		// Spatial Noise Shaping. 0=off, 100=maximum.
config.filter_strength = 20;	// range: [0 = off .. 100 = strongest]
config.filter_sharpness = 0;	// range: [0 = off .. 7 = least sharp]
config.filter_type = 1;			// filtering type: 0 = simple, 1 = strong (only used if filter_strength > 0 or autofilter > 0)
config.partitions = 0;			// log2(number of token partitions) in [0..3] Default is set to 0 for easier progressive decoding.
config.segments = 4;			// maximum number of segments to use, in [1..4]
config.pass = 1;				// number of entropy-analysis passes (in [1..10]).
config.show_compressed = 0;		// if true, export the compressed picture back. In-loop filtering is not applied.
config.preprocessing = 0;		// preprocessing filter (0=none, 1=segment-smooth)
config.autofilter = 0;			// Auto adjust filter's strength [0 = off, 1 = on]
								//   --- description from libwebp-C-Source Code --- 
config.extra_info_type = 0;		// print extra_info
config.preset = 0 				//0: default, 1: picture, 2: photo, 3: drawing, 4: icon, 5: text
 
libwebpjs - the libwebp implementation in javascript by Dominik Homberger (Dominikhlbg)