'Javascript'에 해당되는 글 14건
- 2017.02.14 네이버맵 : clientId와 웹 서비스 url을 확인해주시기 바랍니다. 메시지가 나올때
- 2015.12.07 웹에서 signature_pad.js 사용해서 서명받기 예제
- 2012.11.08 jQuery Mobile : select 박스가 안드로이드폰에서 작동하지 않을때
- 2012.05.30 Javascript로 문자열 중에서 ip 문자열을 배열로 추출하기
- 2011.11.29 Javascript 숫자에 천단위로 콤마(,) 찍기 1
네이버맵 : clientId와 웹 서비스 url을 확인해주시기 바랍니다. 메시지가 나올때
문득 지도가 잘 안되는것 같기도 해서 간만에 네이버 오픈 api 사이트에 가보니 기존에 쓰던 key 방식 대신에 clientId 방식으로 바꾸라고 그래서 한번 바꿔 보았다.
기존에 등록해서 썼던 key 들은 어데 갔는지 잘 못찾겠고 뭔 애플리케이션을 등록하라길래 등록하고 지도 api를 사용할 web url을 입력하고 clientId를 발급받았다.
기존과는 다르게 사용할 url을 여러개 입력할수 있길래 개발서버 ip, 내 로컬서버 ip, 운영서버 도메인 요렇게 싹 등록하고 발급받은 다음에
지도 api 로드하는 js 를 https://openapi.map.naver.com/openapi/v2/maps.js?clientId=xxxxxxx 요렇게 바꿧다.(기존에 지도api 2.0버전을 사용하고 있었기 때문에)
시키는 데로 쪽바로 따라했지만 clientId와 웹 서비스 url을 확인해주시기 바랍니다. 이런 메시지가 자꾸 뜬다.
네이버 개발자센터 포럼이랑 구글에서 검색해 봤지만 URL 형태를 쪽바로 넣으시오! 라는 대답밖에 없었다.
나는 분명히 URL 을 쪽바로 입력했는데... 살살 짜증이 났다.
오만 이상한 URL 로 바꿔가면서 쌩난리를 쳐봤지만 안되서, 그냥 문득 뜬금없이 애플리케이션을 등록할때 입력했던 로컬, 개발, 운영 URL을 싹 지우고 하나만 입력하고 다시 해보니 문득 또 뜬금없이 잘 됐다. -.-
결론은 애플리케이션 웹 서비스 URL 을 하나만 등록해서 해결했다는 것이다.
그냥 마음편하게 개발서버용, 로컬서버용, 운영서버용 애플리케이션을 따로 등록해서 clientId 를 각각 따로 발급받아서 써야 한다~ 끝~
'Javascript' 카테고리의 다른 글
| 웹에서 signature_pad.js 사용해서 서명받기 예제 (0) | 2015.12.07 |
|---|---|
| jQuery Mobile : select 박스가 안드로이드폰에서 작동하지 않을때 (0) | 2012.11.08 |
| Javascript로 문자열 중에서 ip 문자열을 배열로 추출하기 (0) | 2012.05.30 |
| Javascript 숫자에 천단위로 콤마(,) 찍기 (1) | 2011.11.29 |
| 순수 Javascript 로 get 방식으로 넘어온 파라메터 가져오기 (2) | 2011.11.14 |
웹에서 signature_pad.js 사용해서 서명받기 예제
Signature Pad : https://github.com/szimek/signature_pad
Demo 사이트 : http://szimek.github.io/signature_pad/
요기에 가보면 어떤 머리좋고 착한 사람이 웹에서 사인을 할 수 있도록 지원해주는 js 를 맨들어 놓고 설명을 해 주고 있다.
웹에서 사인한 이미지를 php 을 사용해서 png 이미지 파일을 생성하는 예제는 있는데 Java 예제는 없어서 Java 로 하는걸 살짝 맹글어 보았다.
뭐 별건 아니고 BASE64 로 인코딩된 문자열을 다시 디코딩해서 png 파일로 맨드는것만 하면 된다.
보다 쉬운 편의를 위해서 Apache Commons 프로젝트에 있는 라이브러리 몇개(lang, io, codec)를 가져다 썼다.
maven 을 사용하는 사람들은 디펜던시에 요걸 추가해 주면 되고 아니면 그냥 commons.apache.org 에 가서 다운로드 받으면 된다.
<dependency>
<groupId>commons-codec</groupId>
<artifactId>commons-codec</artifactId>
<version>1.10</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.4</version>
</dependency>
<dependency>
<groupId>org.apache.commons</groupId>
<artifactId>commons-lang3</artifactId>
<version>3.4</version>
</dependency>
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>::: 사인패드 테스트 :::</title>
<script src="${pageContext.request.contextPath}/resources/js/jquery-1.11.3.min.js" type="text/javascript">
</script>
<script src="${pageContext.request.contextPath}/resources/js/signature_pad.min.js" type="text/javascript">
</script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/css.css">
</head>
<body>
<div id="signature-pad" class="m-signature-pad">
<div class="m-signature-pad--body">
<canvas></canvas>
</div>
<div class="m-signature-pad--footer">
<div class="description">사인해 주세요~</div>
<button type="button" class="button clear" data-action="clear">지우기</button>
<button type="button" class="button save" data-action="save">저장</button>
</div>
</div>
<script>
var canvas = $("#signature-pad canvas")[0];
var sign = new SignaturePad(canvas, {
minWidth: 5,
maxWidth: 10,
penColor: "rgb(66, 133, 244)"
});
$("[data-action]").on("click", function(){
if ( $(this).data("action")=="clear" ){
sign.clear();
}
else if ( $(this).data("action")=="save" ){
if (sign.isEmpty()) {
alert("사인해 주세요!!");
} else {
$.ajax({
url : "save.jsp",
method : "post",
dataType : "json",
data : {
sign : sign.toDataURL()
},
success : function(r){
alert("저장완료 : " + r.filename);
sign.clear();
},
error : function(res){
console.log(res);
}
});
}
}
});
function resizeCanvas(){
var canvas = $("#signature-pad canvas")[0];
var ratio = Math.max(window.devicePixelRatio || 1, 1);
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
canvas.getContext("2d").scale(ratio, ratio);
}
$(window).on("resize", function(){
resizeCanvas();
});
resizeCanvas();
</script>
</body>
</html>
save.jsp
잠깐 테스트로 예제를 작성하는것이기 때문에 Controller 없이 그냥 jsp 로 맨들어 보았다.
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@page import="org.apache.commons.codec.binary.Base64"%>
<%@page import="org.apache.commons.io.FileUtils"%>
<%@page import="org.apache.commons.lang3.StringUtils"%>
<%@page import="java.io.File"%>
<%
String sign = StringUtils.split(request.getParameter("sign"), ",")[1];
String fileName = "sign"+System.currentTimeMillis()+".png";
FileUtils.writeByteArrayToFile(new File("d:\\"+fileName), Base64.decodeBase64(sign));
%>
{
"filename" : "<%= fileName %>"
}
예제 프로젝트 다운로드
JavascriptSignature.zip'Javascript' 카테고리의 다른 글
| 네이버맵 : clientId와 웹 서비스 url을 확인해주시기 바랍니다. 메시지가 나올때 (0) | 2017.02.14 |
|---|---|
| jQuery Mobile : select 박스가 안드로이드폰에서 작동하지 않을때 (0) | 2012.11.08 |
| Javascript로 문자열 중에서 ip 문자열을 배열로 추출하기 (0) | 2012.05.30 |
| Javascript 숫자에 천단위로 콤마(,) 찍기 (1) | 2011.11.29 |
| 순수 Javascript 로 get 방식으로 넘어온 파라메터 가져오기 (2) | 2011.11.14 |
jQuery Mobile : select 박스가 안드로이드폰에서 작동하지 않을때
보통 개발할때 굳이 모바일 기기에서 테스트를 많이 안하고 개발을 해서 이런 오류가 있는줄은 몰랐다.
막상 실제 모바일웹으로 올린 후 직접 안드로이드 폰을 이용해서 이것저것 해보니 안드로이드 ICS 와 아이폰에서는 셀렉트박스가
잘 작동했는데 진저브레드 안드로이드 폰에서는 셀렉트 박스를 눌러도 작동을 하지 않았다 -_-
이유를 알아보니 전혀 예상하지 못했던 HTML 쪽 때문에 오류가 발생했던 것이였다 -.-
jQuery Mobile 을 적용할때 HTML 코드는
<html> <head> ..... </head> <body> <div data-role="page"> ... </div> </body> </html>
요런식으로 body 태그 바로 아래 <div data-role="page"> 가 위치해야 한다.
기존 셀렉트 박스가 작동안했던 코드는 요랬다 -_-
<html> <head> ..... </head> <body> <div class="wrap"> <div data-role="page"> ... </div> </div> </body> </html>
위 코드 처럼 body 태그의 child 로 다른게 얼쩡거리면 아마 셀렉트 박스가 안될것이다. 진저브레드에서 -,-
'Javascript' 카테고리의 다른 글
| 네이버맵 : clientId와 웹 서비스 url을 확인해주시기 바랍니다. 메시지가 나올때 (0) | 2017.02.14 |
|---|---|
| 웹에서 signature_pad.js 사용해서 서명받기 예제 (0) | 2015.12.07 |
| Javascript로 문자열 중에서 ip 문자열을 배열로 추출하기 (0) | 2012.05.30 |
| Javascript 숫자에 천단위로 콤마(,) 찍기 (1) | 2011.11.29 |
| 순수 Javascript 로 get 방식으로 넘어온 파라메터 가져오기 (2) | 2011.11.14 |
Javascript로 문자열 중에서 ip 문자열을 배열로 추출하기
문자열이 쪽 있으면 그 문자열에서 IP 에 해당하는 문자열 부분들을 찾아내서 배열로 얻고 싶을때는 요렇게~
응용해서 정규표현식만 원하는 패턴으로 바꿔주면 정규표현식에 해당하는 패턴을 배열로 쪽 뽑아낼 수 있다.
var pattern = /((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){3}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})/g;
// ["19.22.2.255", "219.22.2.253", "219.22.2.251"]
var ipList = "19.22.2.255@219.22.2.253 219.22.2.251".match(pattern);
여기서 한발짝 더 뿍 나가
String 객체의 prototype 에다 함수를 추가시켜 쓰면 쪼매더 간지나 보인다.
공통으로 땡겨다 쓰는 js 파일에다 요렇게 String prototype 을 추가하고
String.prototype.getIP = function() {
var pattern = /((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){3}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})/g;
return this.match(pattern);
};
아무데서나 요렇게 쓰면 위와 똑같은 결과를 쫌더 간지나게 얻을 수 있다.
// ["19.22.2.255", "219.22.2.253", "219.22.2.251"] var ipList = "19.22.2.255@219.22.2.253 219.22.2.251".getIP();
'Javascript' 카테고리의 다른 글
| 웹에서 signature_pad.js 사용해서 서명받기 예제 (0) | 2015.12.07 |
|---|---|
| jQuery Mobile : select 박스가 안드로이드폰에서 작동하지 않을때 (0) | 2012.11.08 |
| Javascript 숫자에 천단위로 콤마(,) 찍기 (1) | 2011.11.29 |
| 순수 Javascript 로 get 방식으로 넘어온 파라메터 가져오기 (2) | 2011.11.14 |
| javascript Array 에 protoype으로 remove 함수 추가하기 (2) | 2011.11.09 |
Javascript 숫자에 천단위로 콤마(,) 찍기
자바스크립트 Number, String 클래스의 prototype 에 format() 라는 함수를 추가시키면 어디에서든지 간단하게 숫자에다 천단위로 콤마를 찍을 수 있다.
솟스코드
// 숫자 타입에서 쓸 수 있도록 format() 함수 추가
Number.prototype.format = function(){
if(this==0) return 0;
var reg = /(^[+-]?\d+)(\d{3})/;
var n = (this + '');
while (reg.test(n)) n = n.replace(reg, '$1' + ',' + '$2');
return n;
};
// 문자열 타입에서 쓸 수 있도록 format() 함수 추가
String.prototype.format = function(){
var num = parseFloat(this);
if( isNaN(num) ) return "0";
return num.format();
};
// 숫자 타입 test
var num = 123456.012;
console.log(num.format()); // 123,456.012
num = 13546745;
console.log(num.format()); // 13,546,745
// 문자열 타입 test
console.log("12348".format()); // 12,348
console.log("12348.6456".format()); // 12,348.6456
자바스크립트의 프로토타입을 가지고 쪼물락 거리면 재미진걸 많이 할 수 있는것 같다.
2011/11/11 - [Javascript 예제] - jQuery로 테이블 tr 동적으로 추가,삭제 하기 v2
2011/11/14 - [Javascript] - 순수 Javascript 로 get 방식으로 넘어온 파라메터 가져오기
2011/11/15 - [Javascript 예제] - jQuery 로 해보는 체크박스(checkbox) 전체선택, 선택해제 예제
2011/11/18 - [Javascript 예제] - jQuery 로 메뉴 접었다~ 펼쳤다~ 구현하기
2011/11/18 - [jQuery Plugin] - 자작 훌러그인 : jQuery shortcut v0.1 (웹페이지에 단축키 기능을 넣자)
2011/11/24 - [Javascript 예제] - jQuery 로 원하는 갯수만큼 checkbox 선택하기
'Javascript' 카테고리의 다른 글
| jQuery Mobile : select 박스가 안드로이드폰에서 작동하지 않을때 (0) | 2012.11.08 |
|---|---|
| Javascript로 문자열 중에서 ip 문자열을 배열로 추출하기 (0) | 2012.05.30 |
| 순수 Javascript 로 get 방식으로 넘어온 파라메터 가져오기 (2) | 2011.11.14 |
| javascript Array 에 protoype으로 remove 함수 추가하기 (2) | 2011.11.09 |
| javascript 로 PC에서 접속했는지 모바일 기기에서 접속했는지 체크하기 (6) | 2011.11.07 |
