본문 바로가기

Programing/JavaScript64

특정 영역 캡쳐해서 이미지로 HTML에 띄우기 출처 : https://hooongs.tistory.com/65 [html] Canvas로 특정 영역 스샷하기 [html] Canvas로 특정 영역 스샷하기 html파일이 render가 된 상태인 브라우저에서 보이는 화면을 캡쳐를 해야해는 경우가 있어 알아본 결과. html2canvas를 사용하여 특정 div나 canvas (html에서 그림을 그릴 hooongs.tistory.com 상황 든 HTML의 특정 영역을 캡쳐해서 별도로 지정한 등의 영역에 캡쳐해서 자동으로 이미지로 띄워주는 기능을 구현하고 싶다. 문제 해결하기 기능 구현에 사용되는 JQuery, html2canvas CDN 삽입하기 닫는 태그 앞 권장 HTML 문서에서 외부 자바스크립트 시트를 불러와 별도로 작업하는 경우 해당 호출 태그는 .. Programing/JavaScript 2024. 2. 29.
input에 입력된 값을 다른 곳에 붙여넣기 상황 웹 사용자가 값을 입력할 수 있는 input이 있고, 이곳에 타이핑해서 넣은 값을, button을 클릭하면 onclick 이벤트가 발생하여 특정 id를 가진 화면의 구역으로 텍스트 형태로 붙여넣고 싶은 상황 문제해결 순서 input 태그에 ID 값을 부여해준다. 인풋에 담긴 내용을 옮길(출력시킬) 태그에 아이디를 부여해준다. 이나 등 ① 자바스크립트에서 input 값을 특정 변수에 value로 담는 함수를 지정하고 ② innerHTML을 통해 변수값을 특정 태그 아이디에 대체시킨다. function 온클릭함수명() { // 버튼에 온클릭 이벤트로 발생시킬 함수명 // '값을담을변수명'에 인풋값을 불러온다. let 값을담을변수명 = document.getElementById('인풋아이디').value.. Programing/JavaScript 2024. 2. 28.
input 태그 값 가져와서 콘솔에 출력해보기 // input 값 가져오기 function 설정할함수명() { let 값을담을함수명 = document.getElementById('input의아이디').value; console.log(값을담을함수명); } 위와 같이 자바스크립트를 작성한다. 그리고 아래와 같이 버튼 등에 onclick 이벤트를 넣어준다. Programing/JavaScript 2024. 2. 28.
클립보드에 복사하기 또는 js파일에 아래의 코드를 변수로 지정해준다. function copyToClipBoard() { window.navigator.clipboard.writeText("복사될 텍스트").then(() => { alert("복사되었습니다."); }); } 위의 copyToClipBoard()라는 함수를 실행하기 위한 이벤트를 HTML 버튼 등에 속성으로 담는다. 복사하기 Programing/JavaScript 2024. 2. 28.
Form에 입력된 값을 가져오기 위와 같은 Form이 4개가 있고 이 Form에 들어간 내용을 불러와야 한다. 참고로 저 한 개의 폼은 아래와 같이 작성되어 있다. 앨범 이미지 첫번째로 해야 할 일, input 태그에 id를 부여한다. (위에선 image) 사용자가 폼에 입력한 값을 불러오려면 .val()이라는 함수를 사용한다. function makeCard() { let image = $('#image').val(); } 이렇게 불러온 값을 새로운 앨범 카드로 만들어야 한다. 카드를 만드는 HTML 태그를 전체 복사한다. 그 다음 별도의 함수를 만들어 `` 백틱 안에 넣는다. let temp_html = ` ${title} ${content} ${date} ` 위의 코드는 temp_html이라는 함수를 만들고, 그 함수를 실행하면 .. Programing/JavaScript 2024. 2. 26.

티스토리툴바