Skip to content

Commit ce0f398

Browse files
charlie-vzlacharlie-vzla
committed
Rotate
We rotate an image with area mapping + interpolation
1 parent 2f60cfd commit ce0f398

File tree

7 files changed

+263
-0
lines changed

7 files changed

+263
-0
lines changed

‎build/bitmap.js‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ define(["require", "exports", "./histogram", "./transform"], function (require,
99
var Bitmap = (function () {
1010
function Bitmap(file) {
1111
this._grayScale = false;
12+
this._rotateAngle = 0;
1213
this._histogram = new histogram_1.Histogram();
1314
this._bitmap = {};
1415
this._file = file;
@@ -19,6 +20,7 @@ define(["require", "exports", "./histogram", "./transform"], function (require,
1920
var reader = new FileReader();
2021
reader.onload = function (e) {
2122
var arrayBuffer = reader.result;
23+
// this.bl = new Blob([new DataView(arrayBuffer)], {type: "application/octet-stream"});
2224
_this.decodeHeader(arrayBuffer);
2325
_this.decodeHeaderInfo(arrayBuffer);
2426
_this.decodePalette(arrayBuffer);
@@ -35,8 +37,10 @@ define(["require", "exports", "./histogram", "./transform"], function (require,
3537
callback(new Blob([this._dataView.buffer], { type: "application/octet-stream" }));
3638
};
3739
Bitmap.prototype.encodeHeader = function () {
40+
// export image on 24 bpp
3841
var bitsPerPixel = 24;
3942
var size = ((this._bitmap.current.height * this._bitmap.current.width) * (bitsPerPixel / 8));
43+
// add header + infoHeader length
4044
size += 54;
4145
var xlen = (this._bitmap.current.width * 3);
4246
var mode = xlen % 4;
@@ -51,6 +55,7 @@ define(["require", "exports", "./histogram", "./transform"], function (require,
5155
this._dataView.setInt32(10, 54, true);
5256
};
5357
Bitmap.prototype.encodeInfoHeader = function () {
58+
// export image on 24 bpp
5459
var bitsPerPixel = 24;
5560
var size = ((this._bitmap.current.height * this._bitmap.current.width) * (bitsPerPixel / 8));
5661
var xlen = (this._bitmap.current.width * 3);
@@ -72,6 +77,7 @@ define(["require", "exports", "./histogram", "./transform"], function (require,
7277
this._dataView.setInt16(preOffset + 36, 0, true);
7378
};
7479
Bitmap.prototype.encodeImageData = function () {
80+
// XXX: only works with 24 bpp images by moment.
7581
this.enconde24bit();
7682
};
7783
Bitmap.prototype.enconde24bit = function () {
@@ -102,6 +108,7 @@ define(["require", "exports", "./histogram", "./transform"], function (require,
102108
};
103109
Bitmap.prototype.decodeHeader = function (buffer) {
104110
var header;
111+
// Header (14 bytes)
105112
header = new DataView(buffer, 0, 14);
106113
this._bitmap.header = {};
107114
this._bitmap.header.type = header.getUint16(0, true);
@@ -115,6 +122,7 @@ define(["require", "exports", "./histogram", "./transform"], function (require,
115122
};
116123
Bitmap.prototype.decodeHeaderInfo = function (buffer) {
117124
var infoHeader;
125+
// Header (40 bytes)
118126
infoHeader = new DataView(buffer, 14, 40);
119127
this._bitmap.infoHeader = {};
120128
this._bitmap.infoHeader.size = infoHeader.getUint32(0, true);
@@ -131,12 +139,15 @@ define(["require", "exports", "./histogram", "./transform"], function (require,
131139
};
132140
Bitmap.prototype.decodePalette = function (buffer) {
133141
var colors = 0;
142+
// Check if has palette
134143
if (this._bitmap.infoHeader.bitsPerPixel <= 8) {
144+
// has palette
135145
this._grayScale = true;
136146
if ((colors = this._bitmap.infoHeader.numberColors) === 0) {
137147
colors = Math.pow(2, this._bitmap.infoHeader.bitsPerPixel);
138148
this._bitmap.infoHeader.numberColors = colors;
139149
}
150+
// PALETTE STORAGE
140151
var palette = new DataView(buffer, this._bitmap.infoHeader.size + 14, colors * 4);
141152
var offset = 0;
142153
this._bitmap.palette = [];
@@ -153,6 +164,7 @@ define(["require", "exports", "./histogram", "./transform"], function (require,
153164
}
154165
};
155166
Bitmap.prototype.decodeImageData = function (buffer) {
167+
// Pixel storage
156168
this._bitmap.rowSize = Math.floor((this._bitmap.infoHeader.bitsPerPixel * this._bitmap.infoHeader.width + 31) / 32) * 4;
157169
this._bitmap.pixelArraySize = this._bitmap.rowSize * Math.abs(this._bitmap.infoHeader.height);
158170
this._bitmap.pixels = new Uint8Array(buffer, this._bitmap.header.offset);
@@ -171,6 +183,7 @@ define(["require", "exports", "./histogram", "./transform"], function (require,
171183
data = this.decodeBit8();
172184
break;
173185
case 16:
186+
// no tested
174187
data = this.decodeBit16();
175188
break;
176189
case 24:
@@ -266,7 +279,10 @@ define(["require", "exports", "./histogram", "./transform"], function (require,
266279
for (var x = 0; x < xlen; x++) {
267280
var b = bmpdata[pos++];
268281
var location_3 = y * width * 4 + x * 2 * 4;
282+
// Split 8 bits
283+
// extract left 4-bits
269284
var before = b >> 4;
285+
// extract right 4-bits
270286
var after = b & 0x0F;
271287
var rgb = palette[before];
272288
data[location_3] = rgb.r;
@@ -521,6 +537,7 @@ define(["require", "exports", "./histogram", "./transform"], function (require,
521537
Bitmap.prototype.equalization = function () {
522538
if (!this._grayScale)
523539
this.rgb2gray();
540+
// he were go!
524541
var output = [];
525542
var input = [];
526543
var totalPixels = this._bitmap.current.width * this._bitmap.current.height;
@@ -610,6 +627,37 @@ define(["require", "exports", "./histogram", "./transform"], function (require,
610627
this._bitmap.current.height = oheight;
611628
console.log(this._bitmap.current);
612629
};
630+
Bitmap.prototype.rotate = function (angle) {
631+
//Calcular el nuevo width y height
632+
//Calcular el desplazamiento
633+
this._rotateAngle += angle;
634+
var iwidth = this._bitmap.infoHeader.width;
635+
var iheight = this._bitmap.infoHeader.height;
636+
var coseno = Math.cos(this._rotateAngle);
637+
var seno = Math.sin(this._rotateAngle);
638+
var x1, x2, x3, x4, y1, y2, y3, y4;
639+
x1 = 0;
640+
y1 = 0; // (0,0)
641+
x2 = Math.floor((iwidth - 1) * coseno);
642+
y2 = Math.floor(-(iwidth - 1) * seno); // (iwidth-1,0)
643+
x3 = Math.floor((iheight - 1) * seno);
644+
y3 = Math.floor((iheight - 1) * coseno); // (0,iheight-1)
645+
x4 = Math.floor((iwidth - 1) * coseno + (iheight - 1) * seno);
646+
y4 = Math.floor(-(iwidth - 1) * seno + (iheight - 1) * coseno); // (iwidht-1,iheight-1)
647+
var minX, maxX, minY, maxY, dx, dy;
648+
minX = Math.min(x1, x2, x3, x4);
649+
maxX = Math.max(x1, x2, x3, x4);
650+
minY = Math.min(y1, y2, y3, y4);
651+
maxY = Math.max(y1, y2, y3, y4);
652+
var owidth = maxX - minX + 1;
653+
var oheight = maxY - minY + 1;
654+
dx = minX;
655+
dy = minY;
656+
this._bitmap.current.data = this._transform.rotate(this._rotateAngle, owidth, oheight, dx, dy, this._bitmap.defaultData, this._bitmap.infoHeader.width, this._bitmap.infoHeader.height);
657+
this._bitmap.current.width = owidth;
658+
this._bitmap.current.height = oheight;
659+
console.log(this._bitmap.current);
660+
};
613661
Bitmap.prototype.drawProperties = function (properties) {
614662
properties[0].innerHTML = this._bitmap.infoHeader.width;
615663
properties[1].innerHTML = this._bitmap.infoHeader.height;
@@ -635,6 +683,7 @@ define(["require", "exports", "./histogram", "./transform"], function (require,
635683
}
636684
};
637685
Bitmap.prototype.drawOnCanvas = function (canvas) {
686+
/* scale and center image*/
638687
var width = this._bitmap.current.width;
639688
var height = this._bitmap.current.height;
640689
canvas.style.display = "block";

‎build/main.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
define(["require", "exports", "./bitmap"], function (require, exports, bitmap_1) {
22
"use strict";
3+
// File Object
34
var file;
45
var bmp;
56
var canvas = document.getElementById("canvas1");
@@ -25,57 +26,71 @@ define(["require", "exports", "./bitmap"], function (require, exports, bitmap_1)
2526
bmp.drawOnCanvas(canvas);
2627
});
2728
}
29+
// EventListene when file input is changed
2830
document.getElementById("file").addEventListener("change", handleFileSelect, false);
31+
// BUTTONS FUNCTIONS
32+
// Negative
2933
document.getElementById("negative").addEventListener("click", function () {
3034
bmp.negative();
3135
bmp.drawHistogram(histogram_r, histogram_g, histogram_b, histogram_avg);
3236
bmp.drawOnCanvas(canvas);
3337
});
38+
// Rotate 90 CW
3439
document.getElementById("rotate90CW").addEventListener("click", function () {
3540
bmp.rotate90CW();
3641
bmp.drawOnCanvas(canvas);
3742
});
43+
// Rotate 180
3844
document.getElementById("rotate180").addEventListener("click", function () {
3945
bmp.rotate180();
4046
bmp.drawOnCanvas(canvas);
4147
});
48+
// Rotate 270 CW
4249
document.getElementById("rotate270CW").addEventListener("click", function () {
4350
bmp.rotate270CW();
4451
bmp.drawOnCanvas(canvas);
4552
});
53+
// Rotate 90 CCW
4654
document.getElementById("rotate90CCW").addEventListener("click", function () {
4755
bmp.rotate90CCW();
4856
bmp.drawOnCanvas(canvas);
4957
});
58+
// Rotate 270 CCW
5059
document.getElementById("rotate270CCW").addEventListener("click", function () {
5160
bmp.rotate270CCW();
5261
bmp.drawOnCanvas(canvas);
5362
});
63+
// Horizontal Flip
5464
document.getElementById("horizontalFlip").addEventListener("click", function () {
5565
bmp.horizontalFlip();
5666
bmp.drawOnCanvas(canvas);
5767
});
68+
// Vertical Flip
5869
document.getElementById("verticalFlip").addEventListener("click", function () {
5970
bmp.verticalFlip();
6071
bmp.drawOnCanvas(canvas);
6172
});
73+
// Brightness
6274
document.getElementById("brightnessBtn").addEventListener("click", function () {
6375
var value = +document.getElementById("brightness").value;
6476
bmp.brightness(value);
6577
bmp.drawHistogram(histogram_r, histogram_g, histogram_b, histogram_avg);
6678
bmp.drawOnCanvas(canvas);
6779
});
80+
// contrast
6881
document.getElementById("contrastBtn").addEventListener("click", function () {
6982
var value = +document.getElementById("contrast").value;
7083
bmp.contrast(value);
7184
bmp.drawHistogram(histogram_r, histogram_g, histogram_b, histogram_avg);
7285
bmp.drawOnCanvas(canvas);
7386
});
87+
// equalization
7488
document.getElementById("equalization").addEventListener("click", function () {
7589
bmp.equalization();
7690
bmp.drawHistogram(histogram_r, histogram_g, histogram_b, histogram_avg);
7791
bmp.drawOnCanvas(canvas);
7892
});
93+
// umbralization
7994
document.getElementById("umbralization").addEventListener("click", function () {
8095
var minValue = +document.getElementById("minValueUmbral").value;
8196
var maxValue = +document.getElementById("maxValueUmbral").value;
@@ -88,16 +103,26 @@ define(["require", "exports", "./bitmap"], function (require, exports, bitmap_1)
88103
saveAs(file, "image.bmp");
89104
});
90105
});
106+
// scale
91107
document.getElementById("scaleBtn").addEventListener("click", function () {
92108
var scaleWidth = +document.getElementById("scaleWidth").value;
93109
var scaleHeight = +document.getElementById("scaleHeight").value;
94110
if (document.getElementsByName("algorithm")[0].checked) {
111+
// neighbor algorithm
95112
bmp.scale(scaleWidth, scaleHeight, "neighbor");
96113
bmp.drawOnCanvas(canvas);
97114
}
98115
else {
116+
// interpolation algorithm
99117
bmp.scale(scaleWidth, scaleHeight, "interpolation");
100118
bmp.drawOnCanvas(canvas);
101119
}
102120
});
121+
// rotate
122+
document.getElementById("rotateBtn").addEventListener("click", function () {
123+
var rotateAngle = +document.getElementById("rotateAngle").value;
124+
// interpolation algorithm
125+
bmp.rotate((rotateAngle * Math.PI) / 180);
126+
bmp.drawOnCanvas(canvas);
127+
});
103128
});

0 commit comments

Comments
 (0)