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

[정보] IT정보&활용 2024. 11. 29. 18:21

PDF 나누기(split)

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정보&활용' 카테고리의 다른 글

엑셀로 IPA 분석하기, VBA 활용 (1)	2024.11.29
PDF 파일 합치기(수정) (1)	2024.11.01
[구글 Apps Script] PDF로 출력하기 (0)	2024.10.23
[구글 스프레드 시트] 서명받기 (0)	2024.08.27
컴퓨터 예약 종료 배치파일(.bat) 만들기 (0)	2024.06.21

[정보] 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정보&활용' 카테고리의 다른 글

엑셀로 IPA 분석하기, VBA 활용 (1)	2024.11.29
PDF 나누기(split) (2)	2024.11.06
[구글 Apps Script] PDF로 출력하기 (0)	2024.10.23
[구글 스프레드 시트] 서명받기 (0)	2024.08.27
컴퓨터 예약 종료 배치파일(.bat) 만들기 (0)	2024.06.21

[정보] 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

일	월	화	수	목	금	토
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	31

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

검색결과 리스트

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

글

엑셀로 IPA 분석하기, VBA 활용

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

설정

트랙백

댓글

글

PDF 나누기(split)

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

설정

트랙백

댓글

글

PDF 파일 합치기(수정)

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

설정

트랙백

댓글

글

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

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

설정

트랙백

댓글

글

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

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

설정

트랙백

댓글

검색

CATEGORY

TAG

RECENT POSTS

RECENT COMMENT

NOTICE

RECENT TRACKBACK

MY LINK

ARCHIVE

calendar

COUNTER

티스토리툴바