Script | 제이웹2

JAVASCRIPT 25.08.26 조회 143

인터넷 canvas 이미지를 다운로드하는 방법 (toDataURL)

브라우저 개발자 도구를 이용해 페이지의 canvas 이미지를 저장하는 방법이다. Elements 패널에서 canvas를 찾아 "Store as Global Variable"로 저장한 뒤, 콘솔에서 canvas.toDataURL("image/png")로 이미지 데이터를 추출하고 a 태그의 download 속성으로 파일로 저장한다. cross-origin 이미지로 toDataURL()이 실패하는 경우의 대안도 설명한다.

Elements 패널에서 <canvas> 태그를 찾고 오른쪽에서 스타일 또는 속성을 확인하세요.
우클릭 메뉴에서 “Store as Global Variable”을 선택합니다.
콘솔에서 위와 같은 방법(canvas.toDataURL())으로 이미지 데이터를 추출 후 저장 가능합니다.

canvas 내부에 이미지가 그려지는 방식에 따라 보안상 이유로 toDataURL()이 실패할 수 있습니다. (예: Cross-Origin 이미지가 캔버스에 포함된 경우)
만약 toDataURL()이 반환되지 않거나 오류가 발생하면 이미지 소스 자체를 따로 다운로드해야 할 수 있습니다.

var canvas = $0; // $0는 마지막 선택된 요소를 가리킵니다.

var dataURL = canvas.toDataURL("image/png");

var a = document.createElement('a');

a.href = dataURL;

a.download = 'canvas-image.png'; // 저장될 파일명 지정

document.body.appendChild(a);

a.click();

document.body.removeChild(a);

canvas 요소 제대로 선택했는지 확인

var canvas = $0; 에서 $0이 실제 <canvas> 요소인지 확인하세요.
콘솔에 console.log(canvas); 입력해 보고 canvas 요소 객체가 잘 나오는지 확인해보세요.

직접 data URL을 새 탭에 복사해서 열기

toDataURL()이 정상적으로 결과를 반환하면, dataURL 자체가 엄청 길 수도 있는데, 콘솔에 들어오는 문자열을 다 복사해서 새 탭 주소창에 붙여넣기 하면 이미지가 나옵니다.

#javascript #canvas #todataurl #devtools

JAVASCRIPT CSS 24.07.13 조회 222

스크롤에 따라 배경이 움직이는 시차(Parallax) 효과

스크롤 위치에 따라 배경 요소가 서로 다른 속도로 움직이는 시차(Parallax) 스크롤 효과를 보여주는 CodePen 예제다. CSS background-attachment: fixed를 이용하거나 JavaScript 스크롤 이벤트로 요소의 transform을 조절해 깊이감 있는 화면을 연출한다.

See the Pen Untitled by H J (@H-J-the-typescripter) on CodePen.

#parallax #css #javascript #scroll

JAVASCRIPT jQuery 22.02.14 조회 180

onclick(this)와 onclick(this.value) 사용법 정리

HTML 태그에서 onclick="함수(this)" 형태로 현재 요소나 값을 전달하는 방법을 정리한 글이다. this로 클릭된 요소 객체 자체를 넘기는 방식과, input 등에서 this.value로 입력된 값만 넘기는 방식의 차이를 예제 코드와 함께 설명하고, 페이지 이동이나 Ajax 실행 시 동적 파라미터를 전달하는 활용법을 소개한다.

<html>
<head>
<script language="javascript">
function test(value){
if(value=='1') {
alert("11111111");
}else{
alert("00000000");
}
}
</script>
</head>

<body>
<form name="form1" method="post" action="">
<input type="radio" name="ra" value="1" onclick="test(this.value)"/>
个人
<input type="radio" name="ra" value="0" onclick="test(this.value)""/>
公司
</form>
</body>
</html>

2.onclick(this)代码详解

一般标签中会使用href和onclick两种方式来进行进行页面跳转或执行动作，但是小编一般都会使用onclick来进行执行Ajax函数进行跳转，并同时使用onclick=”xxxxxx(this)”来传递动态参数：例子如下

JSP代码如下：

<a href="javascript:void(0);"  onclick="xxxx(this)" userId=${userId}>${userName}></a>

JSP代码如下：

function  xxxx(obj) {
var thisObj=$(obj);//js对象转jquery对象
var userId=thsiObj.attr("userId");
alert(userId);
}

#javascript #onclick #jquery #event

JAVASCRIPT 22.02.11 조회 160

현재 페이지 URL을 클릭 한 번으로 복사하는 방법 (JavaScript)

버튼 클릭 한 번으로 현재 페이지 URL을 클립보드에 복사하는 JavaScript 방법이다. a 태그의 onclick으로 함수를 호출하고, 함수 안에서 임시 textarea 요소를 만들어 현재 주소(location.href)를 넣은 뒤 document.execCommand("copy")로 복사하고 textarea를 제거한 다음 알림창을 띄운다. 전체 HTML·JS 코드를 단계별로 설명한다.

HTML에서 버튼 생성과 스크립트에서 코드 몇줄이면 간단히 만들 수 있습니다.

HTML

a태그를 통해 onclick으로 함수를 호출합니다.

저는 URL주소복사란 이름의 버튼을 A태그를 통해 만들 예정입니다.

<span class="button gray medium"><a href="#" onclick="clip(); return false;">URL주소복사</a></span>

JAVASCRIPT

a태그에서 호출한 함수인 clip을 작성해줍니다.

url을 변수로 만들고

textarea라는 변수에 textarea의 요소를 생성해줍니다.

이 것을 body의 가장 아래, 즉 </body> 바로 위에 textarea를 추가해줍니다.

(임시 공간이기 때문에 위치는 상관이 없습니다.)

url에는 현재 주소값을 넣어줍니다.

textarea 값에 url를 넣어주고,

textarea를 설정합니다.

그리고 document.execCommand("copy"); 메서드를 사용하면 복사가 됩니다.

그리고 마지막으로 textarea 요소를 없애주고,

복사되었다는 알림창을 띄우면 끝입니다.

<script type="text/javascript">
function clip(){
var url = "<?php echo $_SERVER['SERVER_NAME']?>";
var textarea = document.createElement("textarea");
document.body.appendChild(textarea);
url = window.document.location.href;
textarea.value = url;
textarea.select();
document.execCommand("copy");
document.body.removeChild(textarea);
alert("URL이 복사되었습니다.")
}
</script>

#javascript #clipboard #url #copy

JAVASCRIPT 21.07.26 조회 226

자바스크립트 print_r 함수 - 객체 구조를 HTML로 출력

PHP의 print_r처럼 자바스크립트 객체를 트리 구조의 HTML로 출력해주는 함수 예제다. 객체의 모든 속성을 순회하며, 중첩 객체는 들여쓰기를 적용해 재귀적으로 출력하고 기본형 값은 강조 표시한다. 배열 형태의 객체를 print_r로 변환해 지정한 div에 삽입하는 사용 예시를 보여준다.

<div id='video_related'></div>
<script>
var video_related = [<?php echo $video["video_related"]?>];
function print_r(theObj) {
var retStr = '';
if (typeof theObj == 'object') {
retStr += '<div style="font-family:Tahoma; font-size:7pt;">';
for (var p in theObj) {
if (typeof theObj[p] == 'object') {
retStr += '<div><b>['+p+'] => ' + typeof(theObj) + '</b></div>';
retStr += '<div style="padding-left:25px;">' + print_r(theObj[p]) + '</div>';
} else {
retStr += '<div>['+p+'] => <b>' + theObj[p] + '</b></div>';
}
}
retStr += '</div>';
}
return retStr;
}

var related = print_r(video_related);
$("#video_related").html(related);
</script>

#javascript #print_r #debug #object

스크립트 & 소스코드 공유