Skip to content

F
fuck-daxuexi
Commit ba3e0b24 authored by 神楽坂玲奈's avatar 神楽坂玲奈
Browse files
Options

fix

parent f740f1f0
Pipeline #1870 canceled with stages
        Hide whitespace changes
        Inline Side-by-side
        Showing with 79 additions and 30 deletions
        index.html
        View file @ ba3e0b24
        ......@@ -7,8 +7,14 @@
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        </head>
        <body>
        <input type="file" id="myFile">
        <img id="myImage"/>
        <form id="first">
        <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
        main.js
        View file @ ba3e0b24
        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 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) {
        event.preventDefault();
        var file = fileElement.files[0];
        var reader = new FileReader();
        reader.onload = function () { return showImage(reader); };
        reader.readAsDataURL(file);
        element.style.display = 'none';
        imageElement.style.display = 'block';
        document.title = titleElement.value;
        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)";
        imageElement.style['object-position'] = "0 -" + y + "px";
        // console.log(y);
        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);
        // console.log(bgColor, currentPixel)
        var currentPixel = imageData.slice(index, index + 4);
        // console.log(bgColor, currentPixel, index)
        if (pixelEqual(bgColor, currentPixel)) {
        flag = true;
        // console.log(`line ${y} get a same`)
        ......
        main.js.map
        View file @ ba3e0b24
        {"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
        {"version":3,"file":"main.js","sourceRoot":"","sources":["main.ts"],"names":[],"mappings":"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"}
        \ No newline at end of file
        main.ts
        View file @ ba3e0b24
        const canvas = document.createElement("canvas");
        const ctx = canvas.getContext("2d");
        // let imageData;
        const fileElement: HTMLInputElement = document.querySelector('#myFile');
        const formElement: HTMLFormElement = document.querySelector('#first');
        const titleElement: HTMLInputElement = document.querySelector('#title');
        const canvasElement: HTMLCanvasElement = document.querySelector('#second');
        const imageElement: HTMLImageElement = document.querySelector('#myImage');
        const element: HTMLInputElement = document.querySelector('#myFile');
        element.addEventListener('change', (event) => {
        const file = element.files[0];
        formElement.addEventListener('submit', (event) => {
        event.preventDefault()
        const file = fileElement.files[0];
        const reader = new FileReader();
        reader.onload = () => showImage(reader);
        reader.readAsDataURL(file);
        document.title = titleElement.value;
        element.style.display = 'none';
        imageElement.style.display = 'block';
        formElement.style.display = 'none';
        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)`;
        imageElement.style['object-position'] = `0 -${y}px`;
        // console.log(y);
        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);
        // console.log(bgColor, currentPixel)
        const currentPixel = imageData.slice(index, index + 4);
        // console.log(bgColor, currentPixel, index)
        if (pixelEqual(bgColor, currentPixel)) {
        flag = true;
        // console.log(`line ${y} get a same`)
        ......
        style.css
        View file @ ba3e0b24
        ......@@ -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
        Markdown is supported
        0% or
        You are about to add 0 people to the discussion. Proceed with caution.
        Finish editing this message first!
        Please register or to comment