jquery를 이용한 애니메이션 설정
$(selector).animate({params},speed,callback); |
[링크 : https://www.w3schools.com/jquery/jquery_animate.asp]
마우스 오버시 줌 애니메이션(트랜지션 시간 설정)
[링크 : https://www.w3schools.com/howto/howto_css_zoom_hover.asp]
| 로컬파일 접근...이 안되는거니까.. (0) | 2018.10.12 |
|---|---|
| 캔버스에 그리고 드래그 하여 다른 캔버스로 영역 복사하기 (0) | 2018.10.11 |
| jquery / js로 배경이미지 변경하기 (0) | 2018.10.11 |
| html canvas 크기 (0) | 2018.10.07 |
| html5 canvas crop & save (0) | 2018.10.04 |
jquery로 css를 변경하는 방법
$("p").css("background-color"); |
[링크 : https://www.w3schools.com/jquery/jquery_css.asp]
[링크 : https://www.tutorialspoint.com/How-to-change-the-background-image-using-jQuery]
+
2018.10.11
$("#my_image").attr("src","second.jpg"); |
[링크 : https://stackoverflow.com/questions/554273/changing-the-image-source-using-jquery]
| 캔버스에 그리고 드래그 하여 다른 캔버스로 영역 복사하기 (0) | 2018.10.11 |
|---|---|
| css & jquery animation (0) | 2018.10.11 |
| html canvas 크기 (0) | 2018.10.07 |
| html5 canvas crop & save (0) | 2018.10.04 |
| json2xls 사용 주의 (0) | 2018.10.02 |
화면상에 보이는 실제 크기
document.getElementById('video-canvas').scrollWidth
document.getElementById('video-canvas').scrollHeight
캔버스 자체의 실제 크기
document.getElementById('video-canvas').width
document.getElementById('video-canvas').height
jsmpeg을 통해서 동영상을 틀어 주면 동영상의 실제 크기는 width, height로 나오고
scrollWidth, scrollHeight는 canvas 태그에 의해서 설정된 width, height 값이 나오게 된다.
+
jquery에서 셀렉터로 하면 width를 못 받아온다. 왜그럴까..
| css & jquery animation (0) | 2018.10.11 |
|---|---|
| jquery / js로 배경이미지 변경하기 (0) | 2018.10.11 |
| html5 canvas crop & save (0) | 2018.10.04 |
| json2xls 사용 주의 (0) | 2018.10.02 |
| json key 추가/삭제 (0) | 2018.09.28 |
본목적(?)은 canvas로 그려진 jsmpeg을 캡쳐 하는건데
canvas 가 2d 컨텍스트라면 아래의 toDataURL()을 통해서 간단하게
image/png MIME 타입으로 받을수 있다.
var dataURL = canvas.toDataURL('image/png'); |
[링크 : https://weworkweplay.com/play/saving-html5-canvas-as-image/]
다만 기본 값이 GL 가속이라 disableGL을 true로 해주면 canvas가 2d로 설정되기에 캡쳐가 가능한데
문제는.. gl이나 gl-experiment로 설정해도 못받아 오는건 매한가지란거...
disableGl: true canvas.getContext('2d'); |
[링크 : https://github.com/phoboslab/jsmpeg]
<!DOCTYPE html> <html> <head> <style> .canvas__container { height: 100%; position: relative; width: 100%; } .canvas__canvas { height: 100%; position: relative; width: 100%; z-index: 1; } .canvas__mirror { height: 100%; left: 0; position: absolute; top: 0; width: 100%; } </style> </head> <body> <div class="canvas__container"> <canvas id="cnvs" class="canvas__canvas"></canvas> <img src="" id="mirror" class="canvas__mirror" /> </div> <a href="#" class="button" id="btn-download" download="my-file-name.png">Download</a> <script> var cnvs = document.getElementById('cnvs'), ctx = cnvs.getContext('2d'), mirror = document.getElementById('mirror'); cnvs.width = mirror.width = window.innerWidth; cnvs.height = mirror.height = window.innerHeight; mirror.addEventListener('contextmenu', function (e) { var dataURL = canvas.toDataURL('image/png'); mirror.src = dataURL; }); var button = document.getElementById('btn-download'); button.addEventListener('click', function (e) { var canvas = document.getElementById('cnvs'); var dataURL = canvas.toDataURL('image/png'); button.href = dataURL; }); document.getElementById('btn-download').click(); </script> </body> </html> |
[링크 : https://weworkweplay.com/play/saving-html5-canvas-as-image/]
| jquery / js로 배경이미지 변경하기 (0) | 2018.10.11 |
|---|---|
| html canvas 크기 (0) | 2018.10.07 |
| json2xls 사용 주의 (0) | 2018.10.02 |
| json key 추가/삭제 (0) | 2018.09.28 |
| json merge (0) | 2018.09.28 |
버그인가...
데이터는 더 있는데 필드가 추가 안되는 문제가 있네..
(혹시나 해서 json도 저장해놔서 비교하는데 이런 문제가..)
| html canvas 크기 (0) | 2018.10.07 |
|---|---|
| html5 canvas crop & save (0) | 2018.10.04 |
| json key 추가/삭제 (0) | 2018.09.28 |
| json merge (0) | 2018.09.28 |
| jquery 선택자 (0) | 2018.09.27 |
동적 추가
var keyname = ''; var something = { }; something[keyname + 'postfix'] = 'value'; |
[링크 : https://blog.outsider.ne.kr/675]
삭제
var json = {NAME: "John", AGE: 30, SEX: "male"}; json.BIRTHDAY = '2001-03-01'; delete json.SEX; |
[링크 : https://gent.tistory.com/21]
+
2018.11.21
[링크 : https://stackoverflow.com/questions/19837916/creating-object-with-dynamic-keys]
| html5 canvas crop & save (0) | 2018.10.04 |
|---|---|
| json2xls 사용 주의 (0) | 2018.10.02 |
| json merge (0) | 2018.09.28 |
| jquery 선택자 (0) | 2018.09.27 |
| jquery n번째 요소 선택하기, select 선택하기 (0) | 2018.09.27 |
json으로 값을 받아서 중복되는 하나의 key 목록을 얻고 싶은데
assign이나 for문으로 합치는데, 그걸 도와주는 모듈도 있지만 흐음...
[링크 : https://stackoverflow.com/questions/21450060/how-to-join-two-javascript-objects-without-using-jquery]
[링크 : https://www.npmjs.com/package/merge-json]
+ 2018.10.02
xls 등으로 출력을 하도록 하니 알아서 생성되는 듯
굳이 하나의 json으로 합치지 않아도 되는 듯
| json2xls 사용 주의 (0) | 2018.10.02 |
|---|---|
| json key 추가/삭제 (0) | 2018.09.28 |
| jquery 선택자 (0) | 2018.09.27 |
| jquery n번째 요소 선택하기, select 선택하기 (0) | 2018.09.27 |
| css 배경 이미지 회전, 크기 등 (0) | 2018.09.27 |
| json key 추가/삭제 (0) | 2018.09.28 |
|---|---|
| json merge (0) | 2018.09.28 |
| jquery n번째 요소 선택하기, select 선택하기 (0) | 2018.09.27 |
| css 배경 이미지 회전, 크기 등 (0) | 2018.09.27 |
| svg.js (0) | 2018.09.21 |
테스트 용으로 단간한 계정정보를 받아와서 ID와 PW 그리고 역활에 대해서 출력하고
jquery를 이용하여 table에 값을 추가하고
select-option 에 항목 값을 지정하는 예제
$.ajax({ type: "POST", url: '/list', success: function (data) { }, error: function (data) { }, complete: function (data) { var result = JSON.parse(data.responseText); for(var idx = 0; idx < result.length; idx++) { $('#userlist > tbody:last').append('<tr class="unsel"><td><input class="uncheck" name="chk_del", type="checkbox"</td><td><input class="user-editbox" type="text" value="'+ result[idx].user_id + '"></td><td><input class="user-editbox" type="text" value="'+ result[idx].user_pw + '"></td><td><select class="user-role"><option value="admin">admin</option><option value="user">user</option><option value="server">server</option></select></td><td><input class="user-editbox" type="text" value="DESC."></td></tr>'); switch(result[idx].user_role) { case 0: //admin $('.user-role').eq(idx).val('admin'); break; case 1: //user $('.user-role').eq(idx).val('user'); break; case 2: //server $('.user-role').eq(idx).val('server'); break; } } } }); |
찾은 요소 n번째 접근하기 : .eq(index)
[링크 : http://egloos.zum.com/survival/v/464374]
$('#fruits').val('값');
| json merge (0) | 2018.09.28 |
|---|---|
| jquery 선택자 (0) | 2018.09.27 |
| css 배경 이미지 회전, 크기 등 (0) | 2018.09.27 |
| svg.js (0) | 2018.09.21 |
| ajax (0) | 2018.09.20 |
배경을 돌리면 안에 내용도 같이 돌아버리니까
배경만 돌리려면 조금 까다롭다.
[링크 : https://www.sitepoint.com/css3-transform-background-image/]
[링크 : https://www.w3schools.com/cssref/pr_background-position.asp]
| jquery 선택자 (0) | 2018.09.27 |
|---|---|
| jquery n번째 요소 선택하기, select 선택하기 (0) | 2018.09.27 |
| svg.js (0) | 2018.09.21 |
| ajax (0) | 2018.09.20 |
| polar clock (0) | 2018.09.20 |
|
