Fixed wrong 'B' rotation code and minor typos

README.md

@@ -25,7 +25,7 @@ Rotation is specified as one of the values:
   - `'L'` : Left, 90 degrees counter-clockwise rotation.
   - `'R'` : Right, 90 degrees clockwise rotation.
   - `'I'` : Inverted, 180 degrees rotation.
-  - `'B'` : Same as `'I'` but named to match the ZPL notation for bottom up.
+  - `'B'` : Same as `'L'` but named to match the ZPL notation.
 
 Blackness and rotation are passed via an options object.  For example, to specify
 a black threshold of 56% and rotation of -90 degrees, you would pass in:
@@ -74,8 +74,8 @@ frequently.  It is primarily intended for the demo html file but should be suffi
 for production use.
 
 ```javascript
-// Works with <img> and <canvas> elements or any element that is compatible with
-// CanvasRenderingContext2D.drawImage().
+// Works with <img> and <canvas> elements or any element that is
+// compatible with CanvasRenderingContext2D.drawImage().
 let img = document.getElementById('image');
 let res = imageToZ64(img);	// Uses all defaults
 
@@ -188,7 +188,7 @@ const rgbaToZ64 = require('zpl-image').rgbaToZ64;
 
 let buf = fs.readFileSync('tux.gif');
 let gif = new GIF.GifReader(buf);
-let rgba = Buffer.alloc(gif.width * gif.height);
+let rgba = Buffer.alloc(gif.width * gif.height * 4);
 
 // Decode only the first frame
 gif.decodeAndBlitFrameRGBA(0, rgba);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "zpl-image",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "A pure javascript module that converts PNG, JPEG, and GIF to Z64-encoded GRF bitmaps for use with ZPL.",
   "main": "zpl-image.js",
   "scripts": {

zpl-image.html

@@ -177,7 +177,7 @@
 	cvs.height = grf.height;
 	cvs.getContext('2d').drawImage(grf, 0, 0);
 
-	// Display the ZPL with a source comment
+	// Create the ZPL with a source comment
 	document.getElementById('zpltext').value = 
 		'^FX ' + _filename + ' (' + res.width + 'x' + res.height + 'px, ' +
 			 rot + '-Rotate, ' + black + '% Black)^FS\n' +
@@ -212,9 +212,9 @@
 	let ctx  = cvs.getContext('2d');
 	let bmap = ctx.getImageData(0, 0, w, h);
 	let data = bmap.data;
+	let offs = 0;
 	for (let i = 0; i < l; i++) {
 		let byte = grf[i];
-		let offs = i * 32;	// 8 bits per byte, 4 bytes per RGBA
 		for (let bit = 0x80; bit; bit = bit >>> 1, offs += 4) {
 			if (bit & byte) {
 				data[offs]   = 0;
@@ -248,7 +248,8 @@
 		<td colspan=2 style="position:relative;padding-left:10mm">
 			<button id="copyzpl" style="visibility:hidden"></button>
 	<tr><th>Black Threshold
-		<td><input type="number" id="black" min="1" max="99" step="1" value="50"><span>1..99</span>
+		<td><input type="number" id="black" min="1" max="99" step="1" value="50">
+			<span>1..99</span>
         <td><label for="notrim">
 			<input type="checkbox" id="notrim" value="Y">&nbsp;No&nbsp;Trim</label>
 	</table>

zpl-image.js

@@ -42,7 +42,7 @@ function imageToZ64(img, opts) {
 //			'L' rotate 90 degrees counter-clockwise
 //			'R' rotate 90 degrees clockwise
 //			'I' rotate 180 degrees (inverted)
-//			'B' same as 'I'
+//			'B' same as 'L'
 function rgbaToZ64(rgba, width, opts) {
 	opts = opts || {};
 	width = width|0;
@@ -58,8 +58,8 @@ function rgbaToZ64(rgba, width, opts) {
 	let buf;
 	switch (opts.rotate) {
 	case 'R': buf = right(mono); break;
-	case 'L': buf = left(mono); break;
 	case 'B':
+	case 'L': buf = left(mono); break;
 	case 'I': buf = invert(mono); break;
 	default:  buf = normal(mono); break;
 	}