임이지의 블로그

HTML 상에 Canvas에서 그려진 객체를 이미지로 업로드하는 방법에 대해서 조사하였다. toDataURL toDataURL란? HTML5 Canvas의 제공 함수 중에 하나이며 Canvas의 내용을 data URL 문자열로 변환한다. 원하는 인코딩 타입으로 변환 가능 변환된 데이터 - data : 마임 타입; base64, 이미지를 변환한 문자열 toDataURL 메서드를 사용하여서 canvas를 이미지로 변환하는 코드이다. toDataURL의 경우 모질라 파이어 폭스에서는 image/jpeg, image/webp 두 가지만 허용함으로 주의해야 한다. 브라우저마다 API의 지원범위가 조금씩 다르다. var dataUrl = canvas.toDataURL("image/jpeg"); var blobDat..

Web/HTML JS 2021. 5. 10. 15:25

티스토리 상에 이미지를 첨부하고 테스트를 해보겠다. 상기 이미지는 아래의 경로를 갖는다. https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fblx41k%2Fbtq31asAHuU%2FnkcKYglcscK8pd60WNysNk%2Fimg.jpg IMG Tag로 이미지 출력 IMG Tag 로 아래와 같이 티스토리에 업로드된 이미지 주소를 출력하였다. Canvas 객체를 생성하여 이미지를 그리는 코드 Your browser does not support the HTML5 canvas tag. 상기 코드는 canvas를 생성하고 이전의 생성한 img 객체를 canvas 에 드로잉 하는 ..

Web/HTML JS 2021. 5. 4. 10:09

WEB 은 더 이상 단순히 WEB 이 아니라 WEB APPLICATION 즉 응용 프로그램이다. 간단하게 HTML5는 특정 플러그인(실버라이트 or Flash Player)에 의존하지 않고 웹 브라우저에서 표현이 가능하다. 장점 HTML5는 유연하다. HTML5로 작성된 앱은 어떤 한 장치에서도 볼 수 있다. 최근에는 MS , GOOGLE, APPLE에서 HTML 5를 지원하는 브라우저를 시현 하고 있다. 전 세계에 모든 사이트에서는 Flash를 사용한다. Flash에 문제점으로는 Flash Plugin 을 설치하여야 하고 또한 CPU 점유율에 문제점이 생긴다. FLASH뿐만 아니라 Silver Light 기타 등 Active X를 설치하여 웹에 웹 기술에 표준이 모호해졌다. 이러한 문제점을 없애고 통일..

컴퓨터 언어/Script 2018. 9. 4. 21:35