Initial commit

f740f1f0 · 神楽坂玲奈 · f740f1f0 · f740f1f0 · f740f1f0 · f740f1f0
Commit f740f1f0 authored Dec 25, 2020 by 神楽坂玲奈
9 changed files
--- a/.gitignore
+++ b/.gitignore
+/node_modules/
+/.idea/
\ No newline at end of file
--- a/index.html
+++ b/index.html
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <link rel="stylesheet" href="style.css"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+</head>
+<body>
+    <input type="file" id="myFile">
+    <img id="myImage"/>
+<script src="main.js"></script>
+</body>
+</html>
\ No newline at end of file
--- a/main.js
+++ b/main.js
+var canvas = document.createElement("canvas");
+var ctx = canvas.getContext("2d");
+// let imageData;
+var element = document.querySelector('#myFile');
+element.addEventListener('change', function (event) {
+    var file = element.files[0];
+    var reader = new FileReader();
+    reader.onload = function () { return showImage(reader); };
+    reader.readAsDataURL(file);
+    element.style.display = 'none';
+    imageElement.style.display = 'block';
+});
+var imageElement = document.querySelector('#myImage');
+function showImage(fileReader) {
+    imageElement.onload = function () {
+        var y = getImageData(imageElement);
+        imageElement.style.height = "calc(100vh + " + y + "px)";
+        imageElement.style['object-position'] = "0 -" + y + "px";
+    };
+    imageElement.src = fileReader.result;
+}
+function getImageData(img) {
+    ctx.drawImage(img, 0, 0);
+    var imageData = ctx.getImageData(0, 0, img.width, img.height).data;
+    // RGBA format
+    var 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.subarray(index, index + 4);
+            // console.log(bgColor, currentPixel)
+            if (pixelEqual(bgColor, currentPixel)) {
+                flag = true;
+                // console.log(`line ${y} get a same`)
+                break;
+            }
+        }
+        if (!flag) {
+            return y;
+        }
+    }
+    // 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
--- a/main.js.map
+++ b/main.js.map
+{"version":3,"file":"main.js","sourceRoot":"","sources":["main.ts"],"names":[],"mappings":"AAAA,IAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;AAChD,IAAM,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;AACpC,iBAAiB;AAEjB,IAAM,OAAO,GAAqB,QAAQ,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;AACpE,OAAO,CAAC,gBAAgB,CAAC,QAAQ,EAAE,UAAC,KAAK;IACrC,IAAM,IAAI,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IAC9B,IAAM,MAAM,GAAG,IAAI,UAAU,EAAE,CAAC;IAChC,MAAM,CAAC,MAAM,GAAG,cAAM,OAAA,SAAS,CAAC,MAAM,CAAC,EAAjB,CAAiB,CAAC;IACxC,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAC3B,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;IAC/B,YAAY,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;AACzC,CAAC,CAAC,CAAA;AAEF,IAAM,YAAY,GAAqB,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;AAE1E,SAAS,SAAS,CAAC,UAAU;IACzB,YAAY,CAAC,MAAM,GAAG;QAClB,IAAM,CAAC,GAAG,YAAY,CAAC,YAAY,CAAC,CAAC;QACrC,YAAY,CAAC,KAAK,CAAC,MAAM,GAAG,kBAAgB,CAAC,QAAK,CAAC;QACnD,YAAY,CAAC,KAAK,CAAC,iBAAiB,CAAC,GAAG,QAAM,CAAC,OAAI,CAAC;IACxD,CAAC,CAAC;IACF,YAAY,CAAC,GAAG,GAAG,UAAU,CAAC,MAAM,CAAC;AACzC,CAAC;AAED,SAAS,YAAY,CAAC,GAAG;IACrB,GAAG,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IACzB,IAAI,SAAS,GAAG,GAAG,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC;IACnE,cAAc;IACd,IAAM,OAAO,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACzC,iBAAiB;IACjB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACjC,IAAI,IAAI,GAAG,KAAK,CAAC;QACjB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;YAChC,IAAM,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;YACtC,IAAM,YAAY,GAAG,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC;YAC1D,qCAAqC;YACrC,IAAI,UAAU,CAAC,OAAO,EAAE,YAAY,CAAC,EAAE;gBACnC,IAAI,GAAG,IAAI,CAAC;gBACZ,sCAAsC;gBACtC,MAAM;aACT;SACJ;QACD,IAAI,CAAC,IAAI,EAAE;YACP,OAAO,CAAC,CAAC;SACZ;KACJ;IACD,wBAAwB;IACxB,yCAAyC;AAC7C,CAAC;AAED,SAAS,UAAU,CAAC,CAAoB,EAAE,CAAoB;IAC1D,OAAO,CAAC,CAAC,KAAK,CAAC,UAAC,KAAK,EAAE,KAAK,IAAK,OAAA,CAAC,CAAC,KAAK,CAAC,IAAI,KAAK,EAAjB,CAAiB,CAAC,CAAC;AACxD,CAAC"}
\ No newline at end of file
--- a/main.ts
+++ b/main.ts
+const canvas = document.createElement("canvas");
+const ctx = canvas.getContext("2d");
+// let imageData;
+
+const element: HTMLInputElement = document.querySelector('#myFile');
+element.addEventListener('change', (event) => {
+    const file = element.files[0];
+    const reader = new FileReader();
+    reader.onload = () => showImage(reader);
+    reader.readAsDataURL(file);
+
+    element.style.display = 'none';
+    imageElement.style.display = 'block';
+})
+
+const imageElement: HTMLImageElement = document.querySelector('#myImage');
+
+function showImage(fileReader) {
+    imageElement.onload = () => {
+        const y = getImageData(imageElement);
+        imageElement.style.height = `calc(100vh + ${y}px)`;
+        imageElement.style['object-position'] = `0 -${y}px`;
+    };
+    imageElement.src = fileReader.result;
+}
+
+function getImageData(img) {
+    ctx.drawImage(img, 0, 0);
+    let imageData = ctx.getImageData(0, 0, img.width, img.height).data;
+    // RGBA format
+    const bgColor = imageData.subarray(0, 4);
+    // let index = 0;
+    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.subarray(index, index + 4);
+            // console.log(bgColor, currentPixel)
+            if (pixelEqual(bgColor, currentPixel)) {
+                flag = true;
+                // console.log(`line ${y} get a same`)
+                break;
+            }
+        }
+        if (!flag) {
+            return y;
+        }
+    }
+    // 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
--- a/package-lock.json
+++ b/package-lock.json
+{
+  "name": "fuck-daxuexi",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "typescript": "^4.1.3"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.1.3.tgz",
+      "integrity": "sha512-B3ZIOf1IKeH2ixgHhj6la6xdwR9QrLC5d1VKeCSY4tvkqhF2eqd9O7txNlS0PO3GrBAFIdr3L1ndNwteUbZLYg==",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=4.2.0"
+      }
+    }
+  },
+  "dependencies": {
+    "typescript": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.1.3.tgz",
+      "integrity": "sha512-B3ZIOf1IKeH2ixgHhj6la6xdwR9QrLC5d1VKeCSY4tvkqhF2eqd9O7txNlS0PO3GrBAFIdr3L1ndNwteUbZLYg=="
+    }
+  }
+}
--- a/package.json
+++ b/package.json
+{
+  "scripts": {
+    "build": "tsc"
+  },
+  "dependencies": {
+    "typescript": "^4.1.3"
+  }
+}
--- a/style.css
+++ b/style.css
+html, body {
+    margin: 0;
+    overflow: hidden;
+}
+
+#myImage {
+    width: 100%;
+    display: none;
+}
\ No newline at end of file
--- a/tsconfig.json
+++ b/tsconfig.json
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es5",
+    "sourceMap": true,
+  },
+  "compileOnSave": false,
+  "exclude": [
+    "node_modules"
+  ]
+}
\ No newline at end of file