mostly rework

main.js

-var fileElement = document.querySelector('#myFile');
-var formElement = document.querySelector('#first');
-var titleElement = document.querySelector('#title');
-var canvasElement = document.querySelector('#second');
-var imageElement = document.querySelector('#myImage');
-formElement.addEventListener('submit', function (event) {
+const fileElement = document.querySelector('#myFile');
+const formElement = document.querySelector('#first');
+const titleElement = document.querySelector('#title');
+const canvasElement = document.querySelector('#second');
+const imageElement = document.querySelector('#myImage');
+formElement.addEventListener('submit', (event) => {
     event.preventDefault();
-    var file = fileElement.files[0];
-    var reader = new FileReader();
-    reader.onload = function () { return showImage(reader); };
+    const file = fileElement.files[0];
+    const reader = new FileReader();
+    reader.onload = () => showImage(reader);
     reader.readAsDataURL(file);
     document.title = titleElement.value;
     formElement.style.display = 'none';
     canvasElement.style.display = 'block';
 });
 function showImage(fileReader) {
-    imageElement.onload = function () {
-        var y = getImageData(imageElement);
+    imageElement.onload = () => {
+        const y = getImageData(imageElement);
         // console.log(y);
         canvasElement.width = imageElement.width;
         canvasElement.height = imageElement.height - y;
-        var ctx = canvasElement.getContext('2d');
+        const ctx = canvasElement.getContext('2d');
         ctx.drawImage(imageElement, 0, y, canvasElement.width, canvasElement.height, 0, 0, canvasElement.width, canvasElement.height);
         //
         // ctx.drawImage(img, 0, y);
@@ -28,23 +28,62 @@ function showImage(fileReader) {
     };
     imageElement.src = fileReader.result;
 }
+function getPixelOfCoordinate(imageData, imageWidth, x, y) {
+    const index = (x + y * imageWidth) * 4;
+    return imageData.slice(index, index + 4);
+}
+function getWholeLine(imageData, imageWidth, y) {
+    const resultLine = [];
+    for (let x = 0; x < imageWidth; x++) {
+        resultLine.push(getPixelOfCoordinate(imageData, imageWidth, x, y));
+    }
+    return resultLine;
+}
+function getAllLinesOfImage(imageData, imageWidth, imageHeight) {
+    const resultLines = [];
+    for (let y = 0; y < imageHeight; y++) {
+        resultLines.push(getWholeLine(imageData, imageWidth, y));
+    }
+    return resultLines;
+}
+function pixelEqual(a, b) {
+    return a.every((value, index) => b[index] == value);
+}
+function lineEqual(a, b) {
+    return a.every((value, index) => pixelEqual(value, b[index]));
+}
+function lineEqualAny(a, b) {
+    return a.some((value, index) => pixelEqual(value, b[index]));
+}
+function isWholeLineSameColor(line) {
+    const firstPixel = line[0];
+    return line.every(pixel => pixelEqual(pixel, firstPixel));
+}
 function getImageData(img) {
-    var canvas = document.createElement("canvas");
+    const canvas = document.createElement("canvas");
     canvas.width = img.width;
     canvas.height = img.height;
-    var ctx = canvas.getContext("2d");
+    const ctx = canvas.getContext("2d");
     ctx.drawImage(img, 0, 0);
-    var imageData = ctx.getImageData(0, 0, img.width, img.height).data;
+    const imageData = ctx.getImageData(0, 0, img.width, img.height).data;
+    const allLines = getAllLinesOfImage(imageData, img.width, img.height);
+    const firstPositionOfBackground = allLines.findIndex(isWholeLineSameColor);
+    const backGroundPixel = allLines[firstPositionOfBackground][0];
+    console.log(backGroundPixel);
+    const firstPositionOfPicture = allLines.findIndex(line => line.every(pixel => !pixelEqual(pixel, backGroundPixel)));
+    console.log(firstPositionOfPicture);
+    return firstPositionOfPicture;
+    /*
     // console.log(imageData);
     // console.log(imageData.length, imageData.byteLength)
     // RGBA format
-    var bgColor = imageData.subarray(0, 4);
+    const bgColor = imageData.subarray(0, 4);
     // let index = 0;
-    for (var y = 0; y < img.height; y++) {
-        var flag = false;
-        for (var x = 0; x < img.width; x++) {
-            var index = (x + y * img.width) * 4;
-            var currentPixel = imageData.slice(index, index + 4);
+    for (let y = 0; y < img.height; y++) {
+        let flag = false;
+        for (let x = 0; x < img.width; x++) {
+            const index = (x + y * img.width) * 4;
+            const currentPixel = imageData.slice(index, index + 4);
             // console.log(bgColor, currentPixel, index)
             if (pixelEqual(bgColor, currentPixel)) {
                 flag = true;
@@ -58,8 +97,6 @@ function getImageData(img) {
     }
     // console.log(bgColor);
     // console.log("image data:", imageData);
-}
-function pixelEqual(a, b) {
-    return a.every(function (value, index) { return b[index] == value; });
+    */
 }
 //# sourceMappingURL=main.js.map
\ No newline at end of file

main.js.map

-{"version":3,"file":"main.js","sourceRoot":"","sources":["main.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"main.js","sourceRoot":"","sources":["main.ts"],"names":[],"mappings":"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"}
\ No newline at end of file

main.ts

@@ -34,13 +34,63 @@ function showImage(fileReader) {
     imageElement.src = fileReader.result;
 }
 
+function getPixelOfCoordinate(imageData: Uint8ClampedArray, imageWidth: number, x: number, y: number) {
+    const index = (x + y * imageWidth) * 4;
+    return imageData.slice(index, index + 4);
+}
+
+function getWholeLine(imageData: Uint8ClampedArray, imageWidth: number, y: number) {
+    const resultLine: Uint8ClampedArray[] = [];
+    for (let x = 0; x < imageWidth; x++) {
+        resultLine.push(getPixelOfCoordinate(imageData, imageWidth, x, y));
+    }
+    return resultLine;
+}
+
+function getAllLinesOfImage(imageData: Uint8ClampedArray, imageWidth: number, imageHeight: number) {
+    const resultLines: Uint8ClampedArray[][] = [];
+    for (let y = 0; y < imageHeight; y++) {
+        resultLines.push(getWholeLine(imageData, imageWidth, y));
+    }
+    return resultLines;
+}
+
+function pixelEqual(a: Uint8ClampedArray, b: Uint8ClampedArray) {
+    return a.every((value, index) => b[index] == value);
+}
+
+function lineEqual(a: Uint8ClampedArray[], b: Uint8ClampedArray[]) {
+    return a.every((value, index) => pixelEqual(value, b[index]));
+}
+
+function lineEqualAny(a: Uint8ClampedArray[], b: Uint8ClampedArray[]) {
+    return a.some((value, index) => pixelEqual(value, b[index]));
+}
+
+function isWholeLineSameColor(line: Uint8ClampedArray[]) {
+    const firstPixel = line[0];
+    return line.every(pixel => pixelEqual(pixel, firstPixel));
+}
+
+
+
 function getImageData(img) {
     const canvas = document.createElement("canvas");
     canvas.width = img.width;
     canvas.height = img.height;
     const ctx = canvas.getContext("2d");
     ctx.drawImage(img, 0, 0);
-    let imageData = ctx.getImageData(0, 0, img.width, img.height).data;
+    const imageData = ctx.getImageData(0, 0, img.width, img.height).data;
+
+    const allLines = getAllLinesOfImage(imageData, img.width, img.height);
+
+    const firstPositionOfBackground = allLines.findIndex(isWholeLineSameColor);
+    const backGroundPixel = allLines[firstPositionOfBackground][0];
+    console.log(backGroundPixel);
+    const firstPositionOfPicture = allLines.findIndex(line => line.every(pixel => !pixelEqual(pixel, backGroundPixel)));
+    console.log(firstPositionOfPicture);
+    return firstPositionOfPicture;
+    /*
     // console.log(imageData);
     // console.log(imageData.length, imageData.byteLength)
     // RGBA format
@@ -64,8 +114,5 @@ function getImageData(img) {
     }
     // console.log(bgColor);
     // console.log("image data:", imageData);
+    */
 }
-
-function pixelEqual(a: Uint8ClampedArray, b: Uint8ClampedArray) {
-    return a.every((value, index) => b[index] == value);
-}
\ No newline at end of file

tsconfig.json

 {
   "compilerOptions": {
     "module": "commonjs",
-    "target": "es5",
+    "target": "es2020",
     "sourceMap": true,
   },
   "compileOnSave": false,
   "exclude": [
     "node_modules"
   ]
-}
+}
\ No newline at end of file