fix

ba3e0b24 · 神楽坂玲奈 · f740f1f0 · ba3e0b24 · ba3e0b24 · ba3e0b24
Commit ba3e0b24 authored Dec 25, 2020 by 神楽坂玲奈
Show whitespace changes
Inline Side-by-side

Showing with 79 additions and 30 deletions

index.html index.html +8 -2

main.js main.js +28 -13

main.js.map main.js.map +1 -1

main.ts main.ts +29 -13

style.css style.css +13 -1

No files found.
--- a/index.html
+++ b/index.html
@@ -7,8 +7,14 @@
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
 </head>
 <body>
-    <input type="file" id="myFile">
+<form id="first">
-    <img id="myImage"/>
+    <label>标题<input id="title" value="“青年大学习”第_季第_期"></label>
+    <label>图片<input type="file" id="myFile"></label>
+    <button>提交</button>
+    <img id="myImage"n/>
+</form>
+<canvas id="second"></canvas>
 <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 fileElement = document.querySelector('#myFile');
-var ctx = canvas.getContext("2d");
+var formElement = document.querySelector('#first');
-// let imageData;
+var titleElement = document.querySelector('#title');
-var element = document.querySelector('#myFile');
+var canvasElement = document.querySelector('#second');
-element.addEventListener('change', function (event) {
+var imageElement = document.querySelector('#myImage');
-    var file = element.files[0];
+formElement.addEventListener('submit', function (event) {
+    event.preventDefault();
+    var file = fileElement.files[0];
    var reader = new FileReader();
    reader.onload = function () { return showImage(reader); };
    reader.readAsDataURL(file);
-    element.style.display = 'none';
+    document.title = titleElement.value;
-    imageElement.style.display = 'block';
+    formElement.style.display = 'none';
+    canvasElement.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)";
+        // console.log(y);
-        imageElement.style['object-position'] = "0 -" + y + "px";
+        canvasElement.width = imageElement.width;
+        canvasElement.height = imageElement.height - y;
+        var ctx = canvasElement.getContext('2d');
+        ctx.drawImage(imageElement, 0, y, canvasElement.width, canvasElement.height, 0, 0, canvasElement.width, canvasElement.height);
+        //
+        // ctx.drawImage(img, 0, y);
+        // imageElement.style.height = `calc(100vh + ${y}px)`;
+        // imageElement.style['object-position'] = `0 -${y}px`;
    };
    imageElement.src = fileReader.result;
 }
 function getImageData(img) {
+    var canvas = document.createElement("canvas");
+    canvas.width = img.width;
+    canvas.height = img.height;
+    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);
    var imageData = ctx.getImageData(0, 0, img.width, img.height).data;
+    // console.log(imageData);
+    // console.log(imageData.length, imageData.byteLength)
    // RGBA format
    var bgColor = imageData.subarray(0, 4);
    // let index = 0;
@@ -29,8 +44,8 @@ function getImageData(img) {
        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);
+            var currentPixel = imageData.slice(index, index + 4);
-            // console.log(bgColor, currentPixel)
+            // console.log(bgColor, currentPixel, index)
            if (pixelEqual(bgColor, currentPixel)) {
                flag = true;
                // console.log(`line ${y} get a same`)

--- 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"}
+{"version":3,"file":"main.js","sourceRoot":"","sources":["main.ts"],"names":[],"mappings":"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"}
\ No newline at end of file
--- a/main.ts
+++ b/main.ts
-const canvas = document.createElement("canvas");
+const fileElement: HTMLInputElement = document.querySelector('#myFile');
-const ctx = canvas.getContext("2d");
+const formElement: HTMLFormElement = document.querySelector('#first');
-// let imageData;
+const titleElement: HTMLInputElement = document.querySelector('#title');
+const canvasElement: HTMLCanvasElement = document.querySelector('#second');
+const imageElement: HTMLImageElement = document.querySelector('#myImage');
-const element: HTMLInputElement = document.querySelector('#myFile');
+formElement.addEventListener('submit', (event) => {
-element.addEventListener('change', (event) => {
+    event.preventDefault()
-    const file = element.files[0];
+    const file = fileElement.files[0];
    const reader = new FileReader();
    reader.onload = () => showImage(reader);
    reader.readAsDataURL(file);
+    document.title = titleElement.value;
-    element.style.display = 'none';
+    formElement.style.display = 'none';
-    imageElement.style.display = 'block';
+    canvasElement.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)`;
+        // console.log(y);
-        imageElement.style['object-position'] = `0 -${y}px`;
+        canvasElement.width = imageElement.width;
+        canvasElement.height = imageElement.height - y;
+        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);
+        // imageElement.style.height = `calc(100vh + ${y}px)`;
+        // imageElement.style['object-position'] = `0 -${y}px`;
    };
    imageElement.src = fileReader.result;
 }
 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;
+    // console.log(imageData);
+    // console.log(imageData.length, imageData.byteLength)
    // RGBA format
    const bgColor = imageData.subarray(0, 4);
    // let index = 0;
@@ -34,8 +50,8 @@ function getImageData(img) {
        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);
+            const currentPixel = imageData.slice(index, index + 4);
-            // console.log(bgColor, currentPixel)
+            // console.log(bgColor, currentPixel, index)
            if (pixelEqual(bgColor, currentPixel)) {
                flag = true;
                // console.log(`line ${y} get a same`)

--- a/style.css
+++ b/style.css
@@ -4,6 +4,18 @@ html, body {
 }
 #myImage {
-    width: 100%;
+    width: 100vw;
+    height: 100vh;
    display: none;
 }
+#first {
+    display: flex;
+    flex-direction: column;
+}
+#second {
+    display: none;
+    width: 100vw;
+    height: 100vh;
+}
\ No newline at end of file