히파루스의 솔직한 여행 이야기

어쩌다 웹페이지를 이미지로 저장해달라는 요구가 있다.

그때 유용한 오픈소스들을 활용하면 어렵지 않게 구현이 가능하지만

망할  M$ 익스플로러 때문에 삽질을 해댔다.

참고로 IE10 이상부터 지원한다.

아래 소스는 맥 크롬에서도 테스트 해봤다.

js 첨부파일은 각각 여기서 다운로드도 가능함

https://html2canvas.hertzen.com/

https://github.com/hongru/canvas2image

일단 include시키고

<script src="/js/html2canvas.js"></script>

<script src="/js/canvas2image.js"></script>

버튼 누르면 이미지 저장

$("#SAVE").click(function(e) {

    e.preventDefault();

   var canvas ="";

   html2canvas($("#container"), {

       onrendered: function(canvas) {

            //document.getElementById("RESULT").src = canvas.toDataURL();   // 이미지를 보여주고 싶으면 이런식으로 치환해버림 됨

            if (canvas.msToBlob) { // 망할 익스플로러 예외처리.. 망해라 M$

                var blob = canvas.msToBlob();

                window.navigator.msSaveBlob(blob, "FILENAME.png");

            } else {

                Canvas2Image.saveAsPNG(canvas, document.body.clientWidth, document.body.clientHeight, "FILENAME");

            }

       }

   });

});

*활용팁

이미지 덤프기능인 이 소스를 적용하였는데 스크롤이 너무 길어서 다 나타나지 않는다면?

사이즈를 키워주고 덤프 뜨면 되겠지.. 이정도는 기본이니 사족급 팁

window.resizeTo(document.body.scrollWidth, document.body.scrollHeight);

* 추가팁

빌어먹을 익스플로러에선 테이블선이 제대로 나타나지 않는다.

이럴땐 오픈소스를 수정해야 한다.

html2canvas.js를 열어 

이 파랑 부분을 width: container.cssInt('border' + side + 'Width'), 

이렇게 width: container.cssFloat('border' + side + 'Width'),

고쳐주면 제대로 보여진다.

인터스텔라가 머리 아프고 이해가 안가는 영화라길래 그간 못보다가 최근 TV에서 방영도 해줬겠다

나님이 한 번 봐줘보셨다.

놀란 감독의 전작이었던 인셉션 정도의 복잡성 정도??

오히려 인셉션의 결말은 팽이가 돌다 쓰러질듯하며 끝나버리는 기가막힌 오픈 결말인지라 결말에 대한 논란이 일겠지만..

정주행 후 두가지 의문이 생겼는데

1. 3차원 시공간은 누가 만들었는가?

2. 도무지 뭐시 그리 이해가 안가는지??

먼저 2번 도무지 뭐시 그리 이해가 안가는지??

결말도 아닌 스토리가 이정도로 이해가 안간다란 글을 발견한 나로선 당췌 이해가 안갈 따름

설마 이 때문일까?? 아닐것이다란 확신이 들었기에 자연스럽게 첫번째 의문으로 넘어가봄

복잡한 상대성이론이든 뭐든 내 알바는 아니고 인터스텔라에서 딱 한가지 이해가 안가던 부분

웜홀과 3차원 시공간은 누가 만들었을까?

이 뫼비우스의 띠 같은 물음의 해법은 머리 똑똑한 다른 사람들의 설명으로 쉽게 납득이 갔다.

설명인즉슨

우주정거장 콜로니에 지구에 있던 인류들을 모두 이주시키려던 플랜A는 실패

새로운 행성에 수정체를 들고가는 (이걸 뭐라 해야 하나.. 사람을 부화시킨다는것도 아니고 ㅡㅡ) 플랜 B가 성공하여 기술발전을 이룬 인류가 

과거에 실패한 플랜A도 성공시키기 위해 시공간을 만들고 적절한 곳에 쿠퍼를 불러들여 플랜A도 성공시켰다란 해석

아직 안본 영화는 메멘토 정도인데... 덩케르크는 졸라 재미없고

감독이 독특하니 같은 감독 영화지만 참 호불호가 갈리는건 어쩔 수 없나봄

죽을 때 까지 이 좁은 행성안에서 살다 죽는 인간이나 평생 땅속만 기어다니다 죽을때가 되서야 빛을 보는 매미나 도찐개찐일듯 싶다.

매미에겐 땅속 위 세상은 또 하나의 세상

인간에게도 대기권 위는 또 하나의 세상

또 다른 윗 존재들은 인간이 매미로 인식될터

끝이 없구나...

1.selectbox의 이름으로 선택하기

<input type="text" name="TXT" id="TXT">

<select name="SELECTBOX" id="SELECTBOX">

<option value="1">1학기</option>

<option value="2">2학기</option>

</select>

<a href="#" class="CLASSNAME" SELECTBOX="2학기">선택</a>

$('.CLASSNAME').click(function(e) {

e.preventDefault();

// 링크의 속성값을 구한 후

        var str = $(this).attr("SELECTBOX");

// 구한 값과 일치하는 SELECTBOX를 선택

        $("select[id='SELECTBOX'] option:contains(" + str + ")").attr("selected", "selected");

});

2.SELECTBOX DISABLE, ENABLE

$("#SELECTBOX").attr("disabled", "disabled"); // DISABLE

$("#SELECTBOX").removeAttr("disabled"); // ENABLE

3.엔터시 포커스 주고 클릭하기

$('#TXT').keypress(function(e) {

if(e.which == 13) {

jQuery(this).blur();

                jQuery('.CLASSNAME').focus().click();

                return false;

}

});

4.선택된 selectbox의 text구하기

alert($("#SELECTBOX option:selected").text());

5.selectbox 변경시 이벤트 발생

$("#SELECTBOX").change(function() {

alert("event 발생");

});

6.checkbox 토글 전체선택, 전체해제

$("#ALLCHK").click(function() {

if($("#ALLCHK").prop("checked")) {

$(".CLASSCHECKBOX").prop("checked",true).change();

} else {

//체크해제

$(".CLASSCHECKBOX").prop("checked",false).change();

}

})

6.TD클릭시 이동

<td class="btnRead" IDX="<%=IDX%>">이동</td>

$(document).on("click", "td.btnRead", function() {

var IDX;

IDX = $(this).attr("IDX");

document.location.href = "LINK.asp?IDX=" + AIR;

});        

7.ASP배열로 radio, checkbox를 다수 생성 후 각각 radio button change event 발생시, checkbox change event 발생시 처리

    <%

            For i = 0 To UBound(arrData, 2)

    %>

            $(".A_ATTENDRADIO<%=i %>").on("change", function(e) {

                e.preventDefault();                

                $(".A_ATTENDCD").eq(<%=i %>).val($(this).val());

                if ($(this).val() == '') {                

                } else {

                    $(".A_ATTEND_SCHOOLVISIT").eq(<%=i %>).val('');

                    $(".A_ATTEND_SCHOOLVISITCHECK<%=i %>").prop('checked', false);

                }

                var chkAttend;

                chkAttend = $('.A_ATTENDRADIO<%=i %>:checked').val();

                if (chkAttend == "0401" || chkAttend == "0402" || chkAttend == "0403") {

                    $(".A_ATTEND_FIELD<%=i %>").prop("checked",false).change();                    

                }

            });

            $(".A_ATTEND_SCHOOLVISITCHECK<%=i %>").change(function(e) {

                e.preventDefault();

                if ($(".A_ATTEND_SCHOOLVISITCHECK<%=i %>").is(":checked")){

                    $(".A_ATTEND_SCHOOLVISIT").eq(<%=i %>).val($(this).val());

                    $(".A_ATTENDCD").eq(<%=i %>).val($(this).val());

                } else {

                    $(".A_ATTEND_SCHOOLVISIT").eq(<%=i %>).val('');

                    $(".A_ATTENDCD").eq(<%=i %>).val('');

                }

                $(".A_ATTENDRADIO<%=i %>:radio[value='']").prop("checked", true);

            }); 

    <%

            Next

    %>

이게 얼마나 쉽냐면

이것저것 HTML5 SLIDE 메뉴랍시며 적용해보다 매번 헛걸음만 하다 이 오픈 소스 한방에 모든게 다 해결되었기 때문이다.

왼쪽에서 오른쪽 또는 그 반대방향 푸시메뉴도 되고 레이어처럼 메뉴가 위로 올라오기도 할 수 있고, 아래에서 위에서 아래로도 되는 매우 강력한 HTML5 SLIDE MENU라 할 수 있겠다.

원본 출처는 다음과 같다.

https://tympanus.net/codrops/2013/04/17/slide-and-push-menus/

데모는 여기서 확인이 가능하다.

https://tympanus.net/Blueprints/SlidePushMenus/

다만 한가지 마음에 안드는건 메뉴가 그냥 쌩 버튼이라 좀 손봐야 한다란 부분이다.

또 어려운 중생들을 위해 수정된 HTML을 공유하니 있는 힘껏 경배하라

음하하하하

<div id="showLeftPush" style="position:absolute; z-index:100; padding:24px 0 0 20px;"><img src="../images/slideMenu.png" /></div>

흔히 사용되는 三 아이콘이 slideMenu.png라 보면 되고 이 위치가 버튼의 좌측에 배치된다 보면 된다.

버튼을 100%로 만드는건 알아서 -_-

mssql Management Studio에 시스템개체를 숨길 수 있는 방법을 찾아보니 다행히 이를 끌 수 있는 옵션이 mssql에 존재하여 공유한다.

일단 도구의 옵션

환경의 시작을 클릭하면 개체 탐색기에서 시스템 개체 숨기기가 uncheck되어있는데

이를 체크해준다.

그러며ㄴ mssql server management studio를 다시 시작해야 하는데 해주면 된다.

속이 다 시원하다.

개편함

남양주시에서 운영중인 아쿠와조이

처음엔 아쿠아조이 인줄 알고 검색했는데 아쿠와조이였다.

지인들 추천 그것도 강려크 추천이라 가봤는데 매우 만족스러운 시설이었다.

본 포스팅에 접속한 분들을 위해 결론부터 말하겠다.

쓰잘데기 없이 우리아기랑 넘나 재미있게 놀았어요 행복해요 이딴 포스팅은 나와 맞지 않으므로 패스

입장료

성수기때와 비성수기 입장료가 다르다. 성수기 시즌기준 1인당 18,000원이며 성수기엔 할인티켓도 소셜 등에선 일절 판매하지 않는다. 있어봤자 야간 이용권만 존재
남양주시민들은 몇십% 할인도 됨
치사 빤스
도봉구에 위치한 둘리뮤지엄도 도봉구민만 1,000원 할인되더란 이것도 치사 빤스

복장

물에 들어가려면 무조건 수영복 + 수영모가 필수
수영모 대여료 1,000원, 방수기저귀 1개 3,000원, 썬베드 8,000원(4시간 기준이며 연장시 30분전에 대여티켓 들고 찾아가서 연장 가능함. 인기가 높아서 조금만 지나면 매진되므로 필요한 사람은 미리미리 대여하길 바람. 다만 나같은 경우 돈낭비였음)
대여료는 보증금이 포함
예전엔 썬캡, 야구모자, 티셔츠 등 허용이 되었다가 민원등의 이유로 이젠 절대 불가. 계속 호루라기 불고 난리남

외부음식

짜증날 정도로 인권 탄압 받는 수준으로 짐 뒤적여서 발견해냅니다. 그냥 내부 음식 드세요.

내부 식당 물가

불고기덮밥 같은 식사는 8,000원 떡볶이는 3,500원 커피 3,000원 츄러스 3,000원
맛은 soso함. 개인적으로 식사는 1,000원 저렴해도 괜찮을법하지만 캐리비안베이 같은 곳과 비교불가 저렴 가격이라 봄
생수나 차는 되지만 커피나 술 김밥 등은 절대 불가
더불어 영아 이유식은 되고 특이체질로 인한 외부음식도 되지만 소견서 같은 증빙이 필요함

가장 중요한 아쿠와조이 무료입장

36개월 미만 영유아는 가능합니다. 다만 증빙서류나 캡쳐 이미지가 필요함.
주민등록등본이나 의료보험증 등 나이가 추정될 수 있는 서류나 캡쳐 이미지만 있다면 아쿠와조이 무료입장 가능

내부시설은?

유수풀 : 가장 재미있고 튜브가 좀 있음
누구나 잡는 사람이 임자이므로 쟁탈전 눈치전이 있음
유아용풀 : 미끄럼틀도 바로바로 탈 수 있고 엄마 아빠가 잡아주면 꿀잼탈 수 있음
온수풀 : 뜨끈뜨끈 체온조절 할 수 있음. 오후되면 때꾸정물이 떠다닌다 함
샤워시설 : 널럴하고 쾌적함. 비누만 있음. 세면도구 수건등은 따로 준비해가야 함

사람이 얼마나 많을까?

나름 제한 인원 시스템이라 언제가든 붐비지 않고 놀 수 있음. 다만 늦게 가서 재수없게 먼저 들어간 인원이 안나오면 계속 기다려야 함.

그럼 언제 가는게 젤 꿀인가?

성수기 금요일 기준 9시 30분 쯤 가서 순번대기표 받아놓으면 10시 입장이 시작되니 대략 11시 전엔 들어갈 수 있음
따라서 내 생각엔 주말이어도 비슷할것 같음

이 사진이 휴가 성수기 금요일 9시 10분 사진

앞에 단체가 있어서 그렇지 평소대로라면 더 없을테고 

9시 30분 되도 순번표가 한 30번대를 유지하더란

순번표 뽑고 가면 10시부터 은행처럼 한팀 한팀 불러서 요금 지불하고 (성인기준 1인당 18,000원이었음) 입장권 받아들고 내부에서 사용할 카드연동 팔찌랑 부여받고 들어가면 됨.

맨 왼쪽은 아쿠와조이 사전 예약자줄이라 순번표와 별개로 줄이 있음

기다리다 외부에서 내려다본 아쿠와조이 전경

주차장은 9시에 도착하였으나 자리가 딸랑 2개밖에 없었음

개이상함

직원들 차인지 아니면 뭔지.. 이해불가

자리가 없어서 길건너 노상주차도 하더란

요건 36개월 이하 영유아 아쿠와조이 무료입장을 위해 증빙서류를 준비 못한 이용객을 위해 배치된 무인민원발급기

1,000원 내고 뽑을 수 있음

가격 : 90점

서울 강북권 기준 접근성 : 90점

시설 : 90점

영유아 있는 집에선 강추

피서지로 추천할만 함.

캐리비안베이가는 목적이 눈요기인 분들은 캐리비안베이로

아이랑 피서가는 목적이라면 남양주시 아쿠와조이

전체 체크를 종종 쓸일이 있다.

더불어 check box를 클릭할때마다 특정 값을 hidden box에 넣어주는 코드를 넣어뒀다면 난감해진다.

동작하지 않기 때문이다.

        $("#ALLCHK").click(function() {

if($("#ALLCHK").prop("checked")) {

$(".SCHOOLVISIT").prop("checked",true).change();;

} else {

//체크해제

$(".SCHOOLVISIT").prop("checked",false).change();;

}

})

전체 체크박스인 id가 ALLCHK를 클릭하면

SCHOOLVISIT라는 체크 박스가 토글되는 코드이다.

무척 단순한 코드

        $("#ALLCHK").click(function() {

if($("#ALLCHK").prop("checked")) {

$(".SCHOOLVISIT").prop("checked",true);

} else {

//체크해제

$(".SCHOOLVISIT").prop("checked",false);

}

})

        $("#ALLCHK").click(function() {

if($("#ALLCHK").prop("checked")) {

$(".SCHOOLVISIT").prop("checked",true).change();

} else {

//체크해제

$(".SCHOOLVISIT").prop("checked",false).change();

}

})

            $(".A_ATTEND_SCHOOLVISITCHECK<%=i %>").change(function(e) {

                e.preventDefault();

                if($(".A_ATTEND_SCHOOLVISITCHECK<%=i %>").is(":checked")){

                    $(".A_ATTEND_SCHOOLVISIT").eq(<%=i %>).val($(this).val());

                    $(".A_ATTENDCD").eq(<%=i %>).val($(this).val());

                }else{

                    $(".A_ATTEND_SCHOOLVISIT").eq(<%=i %>).val('');

                    $(".A_ATTENDCD").eq(<%=i %>).val('');

                }

                $(".A_ATTENDRADIO<%=i %>:radio[value='']").prop("checked", true);

            });