HTML
html2canvas를 이용해서 특정영역을 캡쳐했다면 이것을 서버에 이미지 파일로 저장을 하고 이를 활용해야 할 수 있습니다. 필자는 이렇게 하기위해 html상에서 ajax를 사용해서 html2canvas로 만들어진 스샷을 base64포맷으로 django의 views에 있는 함수로 요청을 보냈고 django에서는 python의 base64라는 모듈을 사용해 이미지 바이너리 코드로 디코딩해서 파일에 쓰고 저장을 하였습니다. > base64란? 64개의 char(A-Z,a-z,0-9,/,+,=(padding))를 사용해서 binary data를 text로 변환을 하는 것이다. 즉, 64진법으로 바이너리데이터를 문자열로 바꾸는 것이다. 하지만 이미지나 오디오를 base64로 encoding을 하면 데이터의 양..
[html] Canvas로 특정 영역 스샷하기 html파일이 render가 된 상태인 브라우저에서 보이는 화면을 캡쳐를 해야해는 경우가 있어 알아본 결과. html2canvas를 사용하여 특정 div나 canvas (html에서 그림을 그릴 수 있게 해주는) 태그에 id를 달아놓고 div나 canvas를 스크린샷하여 이미지로 저장을 할 수 있는 방법이 있었습니다. 일단 바로 예제코드 Screen! 스샷! 실행결과 스샷 버튼을 누르기 전 스샷 버튼을 한번 눌렀을때 위에서 볼 수 있듯이 스샷! 버튼을 한번 누르면 아래 'img'라는 id가 달린 div에 위의 Screen!이 쓰여 있는 div를 스샷해서 이미지로 띄워주는 것을 확인할 수 있습니다. 마무리하며 일단은 이렇게 html상의 특정영역을..
[JQuery] 동적으로 버튼을 누르면 html에 태그 추가 및 삭제 저의 경우 기존의 input tag들이 있는데 상황에 따라 input tag가 더 필요한 경우 추가를 해야하는 경우를 만들어야 했다. 그래서 검색을 통해 JQuery를 이용하여 html에 tag를 동적으로 추가할 수 있는 방법을 찾았다. tag추가하기 위의 코드를 활용하면 원하는대로 원하는 div에 html상에 tag를 동적으로 만들 수 있다. ex)
[JQuery] 여러 input값을 배열로 view로 넘기기 {% for test in tests %} {% endfor %}위와 같은 상황에서는 test1이라는 input이 몇개가 될지 모른다. 그런데 이것들을 django의 view로 넘겨서 배열로 처리를 하고싶어 알아보니 jquery를 사용해 배열로 만들고 그 배열을 hidden으로 넘겨주는 방법을 생각해냈다. 따라서 아래와 같은 코드로 해결을 했다. {% csrf_token %} {% for test in tests %} {% endfor %} 위의 코드를 간략히 설명하면 onclick 옵션을 사용하여 form에서 submit이 눌렸을때 list라는 배열을 만들어 name이 'test1'인 input타입들의 value들을 list에 ..
