'[정보] IT정보&amp;활용' 카테고리의 글 목록

[정보] IT정보&활용 2024. 11. 6. 12:10

PDF를 두개로 나누는 html입니다.

pdf-lib (MIT 라이선스): https://github.com/Hopding/pdf-lib
pdf.js (Apache 2.0 라이선스): https://github.com/mozilla/pdf.js
위 라이브러리를 사용하였으며, chatGPT 등의 도움을 받아 실습 삼아 만들어 보았습니다.

아래는 html 스크립트 입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>PDF 나누기 (Split)</title>

    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf-lib/1.17.1/pdf-lib.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>

    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f3f4f6;
            margin: 0;
        }
        .container {
            width: 100%;
            max-width: 500px;
            padding: 20px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        h1 {
            font-size: 24px;
            color: #333;
            text-align: center;
        }
        p {
            font-size: 14px;
            color: #555;
            text-align: left;
        }
        input[type="file"] {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            font-size: 14px;
        }
        input[type="number"] {
            width: 50%;
            padding: 10px;
            margin: 10px 0;
            font-size: 14px;
        }
        #split-button {
            width: 100%;
            padding: 12px;
            background-color: #28a745;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            margin-top: 10px;
        }
        #split-button:hover {
            background-color: #218838;
        }
        footer {
            text-align: left;
            font-size: 12px;
            color: #777;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>PDF 나누기</h1>
        <p>PDF를 두 개의 파일로 나눌 수 있습니다.</p>
        <p>1. "파일 선택" 버튼을 눌러 나눌 PDF 파일을 선택하세요.</p>
        <input type="file" id="file-input" accept="application/pdf" />

        <p>2. 나눌 페이지 번호를 입력하세요. <br>
                 (예: 3을 입력하면 1-3페이지와 4-마지막 페이지로 나뉩니다.)</p>
        <input type="number" id="split-page" min="1" />

        <p>3. "PDF 나누기" 버튼을 누르세요.</p>
        <button id="split-button">PDF 나누기</button>

        <footer>
            <p><strong>사용된 라이브러리</strong></p>
            <ul>
                <li>pdf-lib (MIT 라이선스): <a href="https://github.com/Hopding/pdf-lib">https://github.com/Hopding/pdf-lib</a></li>
                <li>pdf.js (Apache 2.0 라이선스): <a href="https://github.com/mozilla/pdf.js">https://github.com/mozilla/pdf.js</a></li>
            </ul>
        </footer>
    </div>

<script>
    const fileInput = document.getElementById('file-input');
    const splitPage = document.getElementById('split-page');
    const splitButton = document.getElementById('split-button');

    splitButton.addEventListener('click', async () => {
        if (!fileInput.files[0]) {
            alert('PDF 파일을 선택해주세요.');
            return;
        }

        const pageNumber = parseInt(splitPage.value);
        if (isNaN(pageNumber) || pageNumber < 1) {
            alert('유효한 페이지 번호를 입력해주세요.');
            return;
        }

        const file = fileInput.files[0];
        const arrayBuffer = await file.arrayBuffer();
        const pdfDoc = await PDFLib.PDFDocument.load(arrayBuffer);

        if (pageNumber >= pdfDoc.getPageCount()) {
            alert('입력한 페이지 번호가 PDF의 총 페이지 수보다 크거나 같습니다.');
            return;
        }

        // 첫 번째 PDF 생성 (1부터 pageNumber까지)
        const firstPdf = await PDFLib.PDFDocument.create();
        const firstPages = await firstPdf.copyPages(pdfDoc, Array.from({length: pageNumber}, (_, i) => i));
        firstPages.forEach(page => firstPdf.addPage(page));

        // 두 번째 PDF 생성 (pageNumber+1부터 끝까지)
        const secondPdf = await PDFLib.PDFDocument.create();
        const secondPages = await secondPdf.copyPages(pdfDoc, Array.from({length: pdfDoc.getPageCount() - pageNumber}, (_, i) => i + pageNumber));
        secondPages.forEach(page => secondPdf.addPage(page));

        // PDF 저장 및 다운로드
        const firstPdfBytes = await firstPdf.save();
        const secondPdfBytes = await secondPdf.save();

        downloadPdf(firstPdfBytes, 'split_first.pdf');
        downloadPdf(secondPdfBytes, 'split_second.pdf');
    });

    function downloadPdf(pdfBytes, fileName) {
        const blob = new Blob([pdfBytes], { type: 'application/pdf' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = fileName;
        a.click();
        URL.revokeObjectURL(url);
    }
</script>

</body>
</html>

저작자표시 비영리 동일조건

'[정보] IT정보&활용' 카테고리의 다른 글

PDF 파일 합치기(수정) (1)	2024.11.01
[구글 Apps Script] PDF로 출력하기 (0)	2024.10.23
[구글 스프레드 시트] 서명받기 (0)	2024.08.27
컴퓨터 예약 종료 배치파일(.bat) 만들기 (0)	2024.06.21
yt-dlp를 쉽게... 배치파일(bat) 만들기 (0)	2024.05.29

[정보] IT정보&활용 2024. 11. 1. 13:10

,

PDF 파일 합치기(수정)

디자인을 가미하기 전 순수 스크립트만 담겨있는 초기 버전입니다.

소스 검토용으로 남겨놓습니다.

위 파일을 자신의 컴퓨터로 다운 받아서 그냥 실행하시면 됩니다.

pdf-lib (MIT 라이선스): https://github.com/Hopding/pdf-lib
pdf.js (Apache 2.0 라이선스): https://github.com/mozilla/pdf.js

위 두 개의 라이브러리를 사용하였으며, chatGPT 등의 도움을 받아 실습 삼아 만들어 보았습니다.

아래는 html 스크립트입니다.

---------------------------------------------

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>PDF 합치기 (Merge)</title>

    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf-lib/1.17.1/pdf-lib.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>

    
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f3f4f6;
            margin: 0;
        }
        .container {
            width: 100%;
            max-width: 500px;
            padding: 20px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        h1 {
            font-size: 24px;
            color: #333;
            text-align: center;
        }
        p {
            font-size: 14px;
            color: #555;
            text-align: left;
        }
        input[type="file"] {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            font-size: 14px;
        }
        #file-list {
            list-style: none;
            padding: 0;
            margin: 10px 0;
        }
        #file-list li {
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin: 5px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #f9f9f9;
        }
        .move-buttons button {
            padding: 5px;
            margin: 0 2px;
            background: #4a90e2;
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            font-size: 12px;
        }
        .move-buttons button:hover {
            background: #357ABD;
        }
        #merge-button {
            width: 100%;
            padding: 12px;
            background-color: #28a745;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            margin-top: 10px;
        }
        #merge-button:hover {
            background-color: #218838;
        }
        footer {
            text-align: left;
            font-size: 12px;
            color: #777;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>PDF 합치기</h1>
        <p>여러 개의 PDF를 하나로 합칠 수 있습니다.</p>
        <p>1. "파일 선택" 버튼을 눌러 합칠 파일을 선택하세요.</p>
        <input type="file" id="file-input" multiple accept="application/pdf" />

        <p>2. 아래 목록에서 ↑↓를 눌러 순서를 조정하세요.</p>
        <ul id="file-list"></ul>

        <p>3. 순서를 확인한 후 "PDF 합치기" 버튼을 누르세요.</p>
        <button id="merge-button">PDF 합치기</button>

        <footer>
            <p><strong>사용된 라이브러리</strong></p>
            <ul>
                <li>pdf-lib (MIT 라이선스): <a href="https://github.com/Hopding/pdf-lib">https://github.com/Hopding/pdf-lib</a></li>
                <li>pdf.js (Apache 2.0 라이선스): <a href="https://github.com/mozilla/pdf.js">https://github.com/mozilla/pdf.js</a></li>
            </ul>
        </footer>
    </div>

<script>
    const fileInput = document.getElementById('file-input');
    const fileList = document.getElementById('file-list');

    fileInput.addEventListener('change', () => {
        fileList.innerHTML = '';
        Array.from(fileInput.files).forEach((file, index) => {
            const li = document.createElement('li');
            li.textContent = file.name;
            li.dataset.index = index;

            // 이동 버튼 추가
            const moveButtons = document.createElement('div');
            moveButtons.classList.add('move-buttons');

            const upButton = document.createElement('button');
            upButton.textContent = '↑';
            upButton.addEventListener('click', () => moveItem(li, -1));

            const downButton = document.createElement('button');
            downButton.textContent = '↓';
            downButton.addEventListener('click', () => moveItem(li, 1));

            // 삭제 버튼 추가
            const deleteButton = document.createElement('button');
            deleteButton.textContent = '삭제';
            deleteButton.style.background = '#dc3545';
            deleteButton.style.marginLeft = '5px';
            deleteButton.addEventListener('click', () => li.remove());

            moveButtons.appendChild(upButton);
            moveButtons.appendChild(downButton);
            moveButtons.appendChild(deleteButton);
            li.appendChild(moveButtons);

            fileList.appendChild(li);
        });
    });

    function moveItem(item, direction) {
        const sibling = (direction === -1) ? item.previousElementSibling : item.nextElementSibling;
        if (sibling) {
            fileList.insertBefore(item, direction === -1 ? sibling : sibling.nextElementSibling);
        }
    }

    document.getElementById('merge-button').addEventListener('click', async () => {
        const files = Array.from(fileList.children).map(li => fileInput.files[li.dataset.index]);
        const mergedPdf = await PDFLib.PDFDocument.create();

        for (let file of files) {
            const arrayBuffer = await file.arrayBuffer();
            const pdfDoc = await PDFLib.PDFDocument.load(arrayBuffer);
            const pages = await mergedPdf.copyPages(pdfDoc, pdfDoc.getPageIndices());
            pages.forEach(page => mergedPdf.addPage(page));
        }

        const pdfBytes = await mergedPdf.save();
        const blob = new Blob([pdfBytes], { type: 'application/pdf' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'merged.pdf';
        a.click();
        URL.revokeObjectURL(url);
    });
</script>

</body>
</html>

저작자표시 비영리 동일조건

'[정보] IT정보&활용' 카테고리의 다른 글

PDF 나누기(split) (2)	2024.11.06
[구글 Apps Script] PDF로 출력하기 (0)	2024.10.23
[구글 스프레드 시트] 서명받기 (0)	2024.08.27
컴퓨터 예약 종료 배치파일(.bat) 만들기 (0)	2024.06.21
yt-dlp를 쉽게... 배치파일(bat) 만들기 (0)	2024.05.29

[정보] IT정보&활용 2024. 10. 23. 18:56

,

[구글 Apps Script] PDF로 출력하기

[구글 스프레드 시트]로 일지를 만든 경우, 이 일지의 날짜를 하나하나 변경하면서 PDF로 출력해 저장해주는 스크립트 입니다.

이 모두를 묶어서 하나의 PDF로 구현하는 것을 고민하였으나, 아직까지 구글에서는 PDF 합치기 기능은 제공하고 있지 않는거 같습니다.

메뉴바에 출력 버튼이 만들어지고, 적용 월을 입력하면, 그 달에 해당하는 일지를 모두 PDF로 만들어줍니다.

단, 한꺼번에 많은 양을 PDF로 변환하면 구글에서 오류 메시지를 나타내었습니다.

해서 10개씩 출력한 후 30초 기다렸다가 다시 출력하도록 했습니다.

그래서 모두 PDF로 변환되는데 3분 안쪽의 시간이 필요합니다.

// 이후의 각주를 참고하셔서 자신의 시트에 맞게 수정해서 사용하시면 됩니다.

또한 PDF가 저장될 폴더에 접근 권한을 열어 두는거 잊지마세요~

----------------------------------

Code.gs

----------------------------------

function onOpen() {

var ui = SpreadsheetApp.getUi();

ui.createMenu('출력')

.addItem('월 입력', 'generatePDFsByMonth')

.addToUi();

}

function generatePDFsByMonth() {

var ss = SpreadsheetApp.getActiveSpreadsheet();

var sheet1Name = 'DATA';

var sheet2Name = '일지'; // 출력서식이 있는 시트명을 정확히 지정해주세요.

var dateCell = 'A3'; // '일지' 시트에서 날짜가 입력되는 셀입니다.

var outputRange = 'A1:G25'; // '일지' 시트의 출력범위를 조정합니다.

var dataRange = 'A2:A'; // 'DATA'시트에서의 날짜 데이터 범위

var folderId = '1OlXGiKJyeixZ0j4PLIkWl1xxffBZVQZ0'; // PDF가 저장될 폴더의 ID입니다.

var sheet1 = ss.getSheetByName(sheet1Name);

var sheet2 = ss.getSheetByName(sheet2Name);

var folder = DriveApp.getFolderById(folderId);

var ui = SpreadsheetApp.getUi();

var response = ui.prompt('월을 입력하세요 (YYYY-MM)', ui.ButtonSet.OK_CANCEL);

if (response.getSelectedButton() == ui.Button.OK) {

var month = response.getResponseText().trim();

var data = sheet1.getRange(dataRange + sheet1.getLastRow()).getValues();

var filteredData = data.filter(function(row) {

return row[0] && formatDate(row[0]).includes(month);

});

for (var i = 0; i < filteredData.length; i += 10) {

var chunk = filteredData.slice(i, i + 10);

chunk.forEach(function(row) {

sheet2.getRange(dateCell).setValue(formatDate(row[0]));

SpreadsheetApp.flush();

Utilities.sleep(1000); // 데이터를 로드하는 데 충분한 시간을 두기 위해 1초 대기

var pdfBlob = createPDF(sheet2, formatDate(row[0]) + '_' + sheet2Name + '.pdf', outputRange, folder);

folder.createFile(pdfBlob);

});

Utilities.sleep(30000); // 10개의 파일 생성 후 30초 대기

}

if (filteredData.length > 0) {

ui.alert('PDF 저장이 완료되었습니다: ' + month);

} else {

ui.alert('입력된 월에 해당하는 데이터가 없습니다: ' + month);

}

function formatDate(date) {

var d = new Date(date);

var year = d.getFullYear();

var month = ('0' + (d.getMonth() + 1)).slice(-2);

var day = ('0' + d.getDate()).slice(-2);

return year + '-' + month + '-' + day;

}

function createPDF(sheet, fileName, range, folder) {

var sheetName = sheet.getName();

var url = 'https://docs.google.com/spreadsheets/d/' + SpreadsheetApp.getActiveSpreadsheet().getId() +

'/export?exportFormat=pdf&format=pdf' +

'&size=A4' +

'&portrait=true' +

'&fitw=true' +

'&sheetnames=false&printtitle=false' +

'&pagenumbers=false' +

'&gridlines=false' +

'&fzr=false' +

'&gid=' + sheet.getSheetId() +

'&range=' + range;

var token = ScriptApp.getOAuthToken();

var response = UrlFetchApp.fetch(url, {

headers: {

'Authorization': 'Bearer ' + token

}

});

var pdfBlob = response.getBlob().setName(fileName);

return pdfBlob;

}

저작자표시 비영리 동일조건

'[정보] IT정보&활용' 카테고리의 다른 글

PDF 나누기(split) (2)	2024.11.06
PDF 파일 합치기(수정) (1)	2024.11.01
[구글 스프레드 시트] 서명받기 (0)	2024.08.27
컴퓨터 예약 종료 배치파일(.bat) 만들기 (0)	2024.06.21
yt-dlp를 쉽게... 배치파일(bat) 만들기 (0)	2024.05.29

[정보] IT정보&활용 2024. 8. 27. 13:14

,

[구글 스프레드 시트] 서명받기

http://swsp.or.kr/3.html

appsscript활용

4 대상자 검색,수정,추가하기1 동영상 대상자 검색,수정,추가하기2 동영상 대상자 검색,수정,추가하기3 동영상 대상자 검색,수정,추가하기4 동영상 대상자 검색,수정,추가하기5 동영상 대상자 검

swsp.or.kr

여기에 가보면 구글 스프레드 시트 의 앱 스크립트를 활용한 다양한 사례들을 보여주고 있다.

그 중 주목한 것 하나가 바로 "서명받기"

후원신청서나 프로그램 참가 신청을 받을 때에도 유용할 거 같아서 좀더 자세히 살펴보았다.

소스는 다 오픈되어 있어 하나하나 뜯어보면서 나에게 필요한 방식으로 수정해보았다.

https://script.google.com/a/macros/bmsenior.org/s/AKfycbyU6cbIQfPkMm9Soqcz5l9ORI_QB320vAogSsqQFnGYoLEVxM118wXig9rsB32ogHc/exec

여기에 입력하면,

https://docs.google.com/spreadsheets/d/13EJTaSd31_r8A8I4v6WzGqr1BJfqsmVmu4Xv55IpZpw/edit?gid=0#gid=0

여기에 이름과, 서명이미지, 그리고 해당 이미지의 url을 저장해 보여준다.

그런데 이 걸 내가 사용하기 위해서는 몇가지 수정해야할 것이이 있다.

서명이 저장되는 ① 구글 스프레드 시트의 고유 ID를 알아야하고, ② 서명 이미지가 저장될 폴더의 고유 ID를 알아야 한다.

마지막으로 ③ 저장될 시트의 이름도 일치시켜야 한다.

그래서 내가 편하려고 소스를 좀 수정해보았다.

1. Code.gs

function doGet() {

return HtmlService.createTemplateFromFile("index").evaluate();

}

function receiveSiganture(encodedImage,signame){

// 폴더, 스프레드시트 ID 및 시트명을 직접 입력해주세요.

const folderId = "23GF3aHMo0MDOxjCQLss12Ir-WjQmQT_T7B9";

const spreadsheetId = "2Ak0WTqcdsc25RcaQZ86dRNMbddcOn88_eIdo";

const sheetName = "시트1";

var fileTime = new Date();

var s1 = signame.sigName;

const data = encodedImage.split(",")[1];

const dataDecoded = Utilities.base64Decode(data);

const signatureAsPictureBlob = Utilities.newBlob(dataDecoded).setName(s1+fileTime+"somefile.png");

// 서명이 저장될 폴더

var signurl = DriveApp.getFolderById(folderId).createFile(signatureAsPictureBlob).getId();

var signfile = '=image("https://drive.google.com/uc?export=view&id=' + signurl + '")';

var signfile2 = "https://drive.google.com/drive/folders/" + folderId + "/uc?export=view&id=" + signurl;

// 입력된 서명 정보가 저장될 스프레드 시트

var sa = SpreadsheetApp.openById(spreadsheetId);

var sheet1 = sa.getSheetByName(sheetName);

var rowData = [[fileTime, s1, signfile, signfile2]];

var lastRow = sheet1.getLastRow();

sheet1.getRange(lastRow+1, 1, 1, 4).setValues(rowData);

getTexttS();

}

function getTexttS(form){

var text = "서명이 입력되었습니다.";

return text;

}

이제 위 음영처리한 ID와 이름만 정확히 확인해서 입력하면, 다른 소스는 수정할 필요가 없다.

2. index.html

<!doctype html>

<head>

</head>

<body>

 <h2>성함을 입력하시고 아래 패드에 서명해 주세요.</h2><br><br>

 성명: <input type="text" name="mname" id="mname"><br><br>

</canvas>

</div>

<div>

<button type="button" id="clearSig">Clear</button>

</div>

</form>

var signaturePad

function setupSignatureBox(){

var canvas = document.getElementById("sig");

signaturePad = new SignaturePad(canvas);

}

function clearSignature(){

signaturePad.clear();

}

function sendToDrive(){

if(mname.value.length == 0){

alert("성명을 입력하세요");

mname.focus();

} else {

var imageData = signaturePad.toDataURL();

var signame = {sigName: document.getElementsByName('mname')[0].value};

google.script.run.receiveSiganture(imageData, signame);

google.script.run.withSuccessHandler(getText).getTexttS(document.forms[0]);

setTimeout('note()', 2000);

clearSignature()

// console.log(imageData);

}

function note(){

var alt = document.getElementById('mtext').value;

alert(alt);

document.getElementById("signatureForm").reset();

}

function getText(text){

var txtTextt = document.getElementById('mtext');

txtTextt.value = text;

}

document.getElementById("clearSig").addEventListener("click",clearSignature);

document.getElementById("send").addEventListener("click",sendToDrive);

document.addEventListener("DOMContentLoaded",setupSignatureBox);

</script>

</body>

</html>

원본에서는 1개의 css 파일과 2개의 js 파일을 참조토록 하고 있었다.

하지만 굳이 디자인이 복잡할 필요가 있는게 아니라서 과감히 삭제했다.

그리고 꼭 필요한 서명용 js 파일을 확인하고, 원본 사이트에 들어가 가장 최신의 스크립트로 교체하였다.

github에서 배포되고 있으며, 확인결과 상업적 사용까지 무료인 것을 확인하였다.

https://github.com/szimek/signature_pad

GitHub - szimek/signature_pad: HTML5 canvas based smooth signature drawing

HTML5 canvas based smooth signature drawing. Contribute to szimek/signature_pad development by creating an account on GitHub.

github.com

https://cdn.jsdelivr.net/npm/signature_pad@5.0.3/dist/signature_pad.umd.min.js

그리고 이를 웹에서 링크로 사용할 수 있도록 제공하는 url은 위와 같다.

사실 gemini에게 물어보면 굳이 링크에 있는 스크립트를 사용하지 않아도 이미지를 그릴 수 있는 소스를 만들어준다.

1. Code.gs

// 그리기 기능

function doGet() {

var html = HtmlService.createHtmlOutputFromFile('index');

return html;

}

// 지우개 기능 (선의 색을 흰색으로 설정)

function erase() {

ctx.strokeStyle = 'white';

// 드로잉 로직과 동일하게 사용

}

2. index.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

성명: <input type="text" name="ur_name" id="ur_name"><br><br>

const canvas = document.getElementById('myCanvas');

const ctx = canvas.getContext('2d');

let isDrawing = false;

let lastX = 0;

let lastY = 0;

function startDrawing(e) {

isDrawing = true;

[lastX, lastY] = [e.offsetX, e.offsetY];

}

function draw(e) {

if (!isDrawing) return;

ctx.beginPath();

ctx.moveTo(lastX, lastY);

ctx.lineTo(e.offsetX, e.offsetY);

ctx.stroke();

[lastX, lastY] = [e.offsetX, e.offsetY];

}

function stopDrawing() {

isDrawing = false;

}

canvas.addEventListener('mousedown', startDrawing);

canvas.addEventListener('mousemove', draw);

canvas.addEventListener('mouseup', stopDrawing);

canvas.addEventListener('mouseout', stopDrawing);

// 터치 이벤트 추가 (모바일 지원)

canvas.addEventListener('touchstart', startDrawing);

canvas.addEventListener('touchmove', draw);

canvas.addEventListener('touchend', stopDrawing);

// 지우기 버튼 클릭 이벤트 처리

const clearButton = document.getElementById('clearButton');

clearButton.addEventListener('click', () => {

ctx.clearRect(0, 0, canvas.width, canvas.height);

});

</script>

</body>

</html>

처음의 드로잉처럼 자연스럽진 않지만, 그래도 웬만큼 흉내는 된다.

이걸 다시 세세한 부분을 손봐야하는데, 귀찮아서... ㅡ.ㅡ

저작자표시 비영리 동일조건

'[정보] IT정보&활용' 카테고리의 다른 글

PDF 파일 합치기(수정) (1)	2024.11.01
[구글 Apps Script] PDF로 출력하기 (0)	2024.10.23
컴퓨터 예약 종료 배치파일(.bat) 만들기 (0)	2024.06.21
yt-dlp를 쉽게... 배치파일(bat) 만들기 (0)	2024.05.29
한글, ( )안의 글자만 모양 바꾸기 (0)	2023.03.30

[정보] IT정보&활용 2024. 6. 21. 12:44

,

컴퓨터 예약 종료 배치파일(.bat) 만들기

컴퓨터를 켜놓은 채 나가야하는 경우, 예약 종료 기능을 사용하면 편리하겠다 생각해본 적 없는가?

cmd 창을 띄우고, shutdown 명령어를 사용하면 되지만, 이런 명령어 입력에 익숙치 않다면, 배치 파일(.bat)을 만들어 두면 유용하게 사용할 수 있다.

메모장을 열고 아래 초록색 박스 안의 내용을 복사해 붙여넣으면 된다.

이후 저장할 때 파일 형식을 "모든 파일(*.*)"을 선택한 후, 확장자를 bat로 해서 저장하면 된다.

@echo off
echo ============================================
echo 예약 종료 또는 예약 종료 취소를 실행합니다.
echo ============================================
@set /p onoff="예약종료=1, 예약종료취소=2:"
if %onoff%==1 goto on
if %onoff%==2 goto off

: on
echo 예약 종료 시간을 설정합니다.
echo ============================================
@set /p poweroff=몇 시간 뒤에 종료할까요? :
set /a offhour=%poweroff%*3600
shutdown /s /t %offhour%
goto end

: off
echo 예약 종료를 취소합니다.
pause
shutdown /a
goto end

: end
echo.
echo 설정이 완료되었습니다.
echo ============================================
pause

사실 필요한 명령어는

shutdown /s /t "종료까지 필요한 시간(초)"라는 명령어 한줄이다.

하지만 이 경우 초단위로 설정하게 된다.

익숙한 시간 단위로 변환할 수 있도록 명령어를 수정했고,

한번 설정하면 이걸 해제해야지만 새로 설정이 가능하다.

하여 예약종료를 취소하는 메뉴까지 추가해서 파일을 구성해보았다.

이때 주의할 점, 반드시 인코딩을 ANSI로 해야 한글이 깨지지 않는다.

모르겠으면 아래 첨부파일을 다운 받아서 그냥 실행해도 된다.

예약 종료.bat

0.00MB

저작자표시 비영리 동일조건

'[정보] IT정보&활용' 카테고리의 다른 글

[구글 Apps Script] PDF로 출력하기 (0)	2024.10.23
[구글 스프레드 시트] 서명받기 (0)	2024.08.27
yt-dlp를 쉽게... 배치파일(bat) 만들기 (0)	2024.05.29
한글, ( )안의 글자만 모양 바꾸기 (0)	2023.03.30
[엑셀] 파일명 구하기 (0)	2022.10.18

일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

Social Welfare Thorn News, 福智衍, 복지비틀기

검색결과 리스트

[정보] IT정보&활용에 해당되는 글 93건

글

PDF 나누기(split)

'[정보] IT정보&활용' 카테고리의 다른 글

설정

트랙백

댓글

글

PDF 파일 합치기(수정)

'[정보] IT정보&활용' 카테고리의 다른 글

설정

트랙백

댓글

글

[구글 Apps Script] PDF로 출력하기

'[정보] IT정보&활용' 카테고리의 다른 글

설정

트랙백

댓글

글

[구글 스프레드 시트] 서명받기

'[정보] IT정보&활용' 카테고리의 다른 글

설정

트랙백

댓글

글

컴퓨터 예약 종료 배치파일(.bat) 만들기

'[정보] IT정보&활용' 카테고리의 다른 글

설정

트랙백

댓글

검색

CATEGORY

TAG

RECENT POSTS

RECENT COMMENT

NOTICE

RECENT TRACKBACK

MY LINK

ARCHIVE

calendar

COUNTER

티스토리툴바