'JavaScript &amp; jQuery' 카테고리의 글 목록 (4 Page)

'JavaScript & jQuery'에 해당되는 글 69건

[JavaScript] Canvas로 이미지 서버에 전송하기 - Sample[JavaScript] Canvas로 이미지 서버에 전송하기 - Sample

Posted at 2020. 3. 6. 17:38 | Posted in JavaScript & jQuery/JavaScript

참고 : https://bugsdb.com/_ko/debug/14292f07a628fd12f3b6afc4a751f956

■ 캔버스로 생성한 이미지 파일 서버에 업로드 하기

# 소스코드 - 클라이언트 페이지 ( 이미지 전송 )

canvas_upload.php

<html>

<head>

<title>:: JavaScript 캔버스 이미지 업로드 ::</title>

.imgArea { text-align:center; }

canvas, #uploadFile, #submitBtn { display:none; }

</style>

// @breif AJAX 통신 함수

function getXMLHTTPRequest() {

let request = false;

try { request = new XMLHttpRequest(); }

catch(err01) {

try { request = new ActiveXObject("Msxml2.XMLHTTP"); }

catch(err02) {

try { request = new ActiveXObject("Microsoft.XMLHTTP"); }

catch(err03) { request = false; }

}

return request;

}

const ajax = getXMLHTTPRequest();

// @breif 이미지 업로드 함수

function uploadImgFilePrinted() {

// @details 업로드 파일 정보를 받아온다.

let fileInfo = document.getElementById("uploadFile").files[0];

let reader = new FileReader();

reader.onload = function() {

// @details 업로드 버튼 이미지의 넓이와 높이에 맞게 썸네일을 생성을 위해 그 값을 받아온다.

const btnWidth = document.getElementById("uploadImg").width;

const btnHeight = document.getElementById("uploadImg").height;

// @details 업로드 이미지 출력

document.getElementById("uploadImg").src = reader.result;

document.getElementById("uploadImg").width = btnWidth;

document.getElementById("uploadImg").height = btnHeight;

// @details 등록버튼 노출

document.querySelector("#submitBtn").style.display = "inline";

};

if(fileInfo) {

// @details readAsDataURL을 통해 업로드한 파일의 URL을 읽어 들인다.

reader.readAsDataURL(fileInfo);

}

function registryUploadImg() {

if(confirm("업로드한 이미지를 업로드 하시겠습니까?") == true) {

let upImage = new Image();

upImage.src = document.getElementById("uploadImg").src;

upImage.onload = function() {

// @breif 캔버스 위에 이미지 그리기

let canvas = document.querySelector("canvas");

let canvasContext = canvas.getContext("2d");

// @details 리사이즈할 이미지의 크기는, 현재 클라이언트에게 노출되어 있는 이미지 크기로 지정

const btnWidth = document.getElementById("uploadImg").width;

const btnHeight = document.getElementById("uploadImg").height;

// @details 캔버스 생성 및 이미지 그리기

canvas.width = btnWidth;

canvas.height = btnHeight;

canvasContext.drawImage(this, 0, 0, btnWidth, btnHeight);

// @details AJAX 전송 데이터 설정

const arrData = {

"mode" : "imgFileUpload"

, "imgBase64" : canvas.toDataURL("image/jpeg")

, "imgFileName" : document.getElementById("uploadFile").files[0]['name']

};

ajax.open("POST", "./upload_image.php", true); // @details 비동기 방식 사용

ajax.setRequestHeader("Content-Type", "application/json;charset=UTF-8;");

ajax.send(JSON.stringify(arrData));

ajax.onreadystatechange = function() {

if(ajax.readyState == 4) {

if(ajax.status == 200) {

const json = JSON.parse(ajax.responseText);

if(json.ret == "success") {

alert(json.message);

} else {

alert(json.message);

}

} else {

alert(json.message);

}

};

} else {

return false;

}

</script>

</head>

<body>

</a>

</div>

<p>Producer © 사악미소</p>

</div>

</form>

</body>

</html>

# 소스코드 - 서버 ( 이미지 파일 저장 )

upload_image.php

<?php

$RetVal = array("ret"=>"fail", "error"=>"", "error_msg"=>"", "message"=>"");

$backUrl = $_SERVER['HTTP_REFERER'];

// @breif php://input은 내용의 유형에 관계없이 요청 HTTP 헤더 뒤에 모든 원시 데이터를 반환한다.

$data = json_decode(file_get_contents("php://input"), true);

switch($data['mode']) {

// @breif ajax 이미지 업로드

case "imgFileUpload" :

// @breif base64로 암호화된 이미지 파일명 디코드

$uploadCanvas = base64_decode(preg_replace("#^data:image/\w+;base64,#i", "", $data['imgBase64']));

// @breif 파일명과 확장자를 분리 하여 담는다.

$fileName = array_shift(explode(".", $data['imgFileName'])); // @details 이미지 파일 이름

// @breif 이미지 파일명 변경

$uploadImgName = $fileName."_".time().".jpg";

// @breif 업로드할 이미지 경로 설정

$uploadSrc = "./upload/".$uploadImgName;

// @breif 이미지 파일 저장

file_put_contents($uploadSrc, $uploadCanvas);

// @breif 성공 여부 확인

if(file_exists($uploadSrc) == TRUE) {

$RetVal['ret'] = "success";

$RetVal['message'] = "파일을 업로드 하는데 성공하였습니다.\n축하합니다.";

} else {

$RetVal['message'] = "파일을 업로드 하는데 실패하였습니다.\n다시 시도하여 주시기 바랍니다.";

}

// @return 업로드 성공 / 실패 유무를 json 방식으로 웹 페이지에 전달한다.

print json_encode($RetVal);

return;

break;

default :

$RetVal['message'] = "서버와의 연결 실패";

print json_encode($RetVal);

return;

break;

}

header("location:".$backUrl);

# 출력결과

관련포스팅#01 : [JavaScript] 이미지 파일 썸네일 생성하기

관련포스팅#02 : [JavaScript] Canvas를 통한 이미지 회전

관련포스팅#03 : [JavaScript] Canvas로 이미지 서버에 전송하기 - Sample

저작자표시

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScript] 휴대폰 사진 업로드시 회전 방지 (0)	2020.03.30
[JavaScript] 이미지 파일 업로드하고 썸네일 생성하기 (2)	2020.03.25
[JavaScript] Canvas를 통한 이미지 회전 (6)	2020.03.04
[JavaScript] 업로드한 파일 Resizer 하여 화면에 출력시키기 (0)	2020.03.04
[JavaScript] getElementByTagName( ) 메소드 (0)	2020.02.28

[JavaScript] Canvas를 통한 이미지 회전[JavaScript] Canvas를 통한 이미지 회전

Posted at 2020. 3. 4. 11:06 | Posted in JavaScript & jQuery/JavaScript

■ 휴대폰 사진 업로드시 이미지가 가로, 세로가 변경되는 이유

휴대폰, 스마트폰의 카메라로 찍은 사진을 웹 브라우저를 통해 업로드 할경우,

이미지의 가로, 세로가 변경되어 등록되는 경우가 존재한다.

이러한 이유는 EXIF( Exchangeable Image File Format ) 의

회전값 변경이 반영되지 않기에 생기는 이유인데.

아래 이미지는 초기 스마트 폰에서 자주 볼 수 있었던 문제이다.

( 자이로 센서( Gyro Sensor ) 등의 기술 발전으로 이런 문제는 많이 해결 되었지만, 이미지의 편집등 다른 작업 과정으로 현재에도 이런 문제를 맏닥드릴 수 있다. )

가로로 찍은 이미지의 경우 스마트폰 상에서는 분명 정상적으로 보여주지만.

실제 이미지의 EXIF 값을 보면 회전정보( Orientation )가 90° CW 가 적용되어 있는것을 알 수 있다.

이를 회전정보 값을 브라우저에서는 인식하지 않고 보여지는 문제이다.

# EXIF( Exchangeable Image File Format ) 란?

디지털 카메라 등에서 사용되는 이미지 파일 메타데이터 포맷으로,

카메라가 촬영한 사진, 녹음파일에 시간 등의 각종 정보를 담기 위해 개발되었다. 즉,

JPEG, TIFF 6.0과 RIFF, WAV 포맷에 이미지나 소리에 대한 정보를 추가로 기록할 수 있다.

디지털카메라의 보급으로 널리 활성화되었고 이미지 메타데이터의 사실상 표준 지위에 있다.

EXIF 데이터는 이미지 파일의 일부로 저장되며,

EXIF 데이터를 지원하는 소프트웨어 사용 시 이미지를 변경해도 데이터를 보존한다.

출처 : 나무위키( https://namu.wiki/w/EXIF )

간단하게 이미지 파일 하나를 선택하여 마우스 오른쪽 버튼을 클릭하고

오른쪽으로 회전( T ) 을 선택해 보자.

회전 정보 : 90° CW 로 반영된 것을 확인할 수 있다.

이 렇게 회전된 파일을 <img src="스토브리그.jpg">로 올려서 브라우저로 확인을 해 본다면.

# 소스코드

<html>

<head>

<title>:: 스토브리그 ::</title>

/* image-orientation:from-image; */

</style>

</head>

<body>

</body>

</html>

# 출력결과

회전 정보 : 90° CW가 반영이 <img> 태그를 사용한 경우

브라우저에서 다시 정방향으로 돌려서 출력하는 모습을 확인 할 수 있다.

현재 파이어 폭스 브라우저의경우 CSS에 image-orientation:from-image; 를 넣어주는 것만으로도

회전정보 값을 읽어들여 반영하여 이미지가 돌아가는 것을 막아주어서 해결할 수 있지만.

아직까지 크롬등의 다른 브라우저에서는 CSS4의 실험적 기능이기에 적용되어 있지 않다고 한다.

결국 자동으로 이러한 상황을 해결 할 수는 없는 상황이기에

사용자의 폰, 찍은 각도에 따라 업로드시 문제가 발생할 수 있다.

■ 캔버스를 통한 업로드 이미지 각도 조정

그래서 필자는 이에대한 해결책으로

자동으로 이미지를 보정하는 것이 아닌,

사용자가 직접 수동으로 이미지를 수정하는 방향으로 가닥을 잡고,

다 완성된 정보만을 서버로 전달하는 형태로 취하는 방식을 택하게 되었다.

# 소스코드

<html>

<head>

<title>:: JavaScript 캔버스 - 회전 ::</title>

function uploadImgPreview() {

// @breif 업로드 파일 읽기

let fileInfo = document.getElementById("upImgFile").files[0];

let reader = new FileReader();

reader.addEventListener("load", function() {

console.log("INDEX #02");

// @details 업로드한 파일의 URL을 가져온다.

document.getElementById("thumbnail").src = reader.result;

}, false);

if(fileInfo) {

console.log("INDEX #01");

// @details readAsDataURL을 통해 업로드한 파일의 URL을 읽어 들인다.

reader.readAsDataURL(fileInfo);

}

function rotateCanvasImg( angle ) {

// @breif 썸네일 이미지 생성

let tempImage = new Image(); // @details drawImage 메서드에 넣기 위해 이미지 객체화

tempImage.src = document.getElementById("thumbnail").src; // @details 업로드 완료된 이미지를 객체에 주입

tempImage.onload = function() {

// @breif 캔버스 위에 이미지 그리기

let canvas = document.getElementById("canvas");

let canvasContext = canvas.getContext("2d");

// @breif 왼쪽( 270° ) 회전의 경우

if( angle == '270' ) {

// @details 270° 회전의 경우 이미지의 높이와 넓이를 서로 바꿔준다.

canvas.width = tempImage.height;

canvas.height = tempImage.width;

canvasContext.rotate((270) * Math.PI / 180);

// @details 이미지가 270° 회전 했을 경우 x축의 값을 업로드 이미지의 넓이를 음수로 변경한다.

canvasContext.drawImage(this, (tempImage.width * -1), 0);

}

// @breif 오른쪽( 90° ) 회전의 경우

else if( angle == '90' ) {

// @details 90° 회전의 경우 이미지의 높이와 넓이를 서로 바꿔준다.

canvas.width = tempImage.height;

canvas.height = tempImage.width;

// canvasContext.rotate((90) * Math.PI / 180);

canvasContext.rotate(Math.PI / 2);

// @details 이미지가 90° 회전 했을 경우 y축의 값을 업로드 이미지의 높이를 음수로 변경한다.

canvasContext.drawImage(this, 0, (tempImage.height * -1));

}

// @breif 거꾸로( 180° ) 회전의 경우

else if( angle == '180' ) {

canvas.width = tempImage.width;

canvas.height = tempImage.height;

// canvasContext.rotate((180) * Math.PI / 180);

canvasContext.rotate(Math.PI);

// @details 이미지가 180° 회전 했을 경우 x, y축의 값을 업로드 이미지의 넓이와 높이를 음수로 변경한다.

canvasContext.drawImage(this, (tempImage.width * -1), (tempImage.height * -1));

}

// @breif 정방향

else {

canvas.width = tempImage.width;

canvas.height = tempImage.height;

canvasContext.drawImage(this, 0, 0);

}

// @breif 캔버스의 이미지

let dataURI = canvas.toDataURL("image/jpeg");

document.querySelector("#thumbnail").src = dataURI;

};

}

</script>

</head>

<body>

<hr/>

</body>

</html>

# 출력결과

이렇게 이미지 조작이 완료되었다면.

해당 미지를 마우스 우클릭으로 다운받아 보자.

다운받은 이미지는 index.jpg 라는 이름으로 생성되며

회전 정보가 표기되지 않는 0° CW 임을 알 수 있다.

그렇기에 해당 이미지를 <img> TAG를 사용해도 원하는 각도 조절이 가능하기에

사용자의 업로드한 사진의 이미지 축 보정 작업이 끝나고 사진 등록( 파일 업로드 )을 실행하면

편집된 캔버스의 작업내용을 서버에 전송하는 형태로 진행을 하면 된다.

관련포스팅#01 : [JavaScript] 이미지 파일 썸네일 생성하기

관련포스팅#02 : [JavaScript] Canvas를 통한 이미지 회전

관련포스팅#03 : [JavaScript] Canvas로 이미지 서버에 전송하기 - Sample

저작자표시

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScript] 이미지 파일 업로드하고 썸네일 생성하기 (2)	2020.03.25
[JavaScript] Canvas로 이미지 서버에 전송하기 - Sample (0)	2020.03.06
[JavaScript] 업로드한 파일 Resizer 하여 화면에 출력시키기 (0)	2020.03.04
[JavaScript] getElementByTagName( ) 메소드 (0)	2020.02.28
[JavaScript] INPUT TYPE FILE 썸네일 생성 (0)	2020.01.16

[JavaScript] 업로드한 파일 Resizer 하여 화면에 출력시키기[JavaScript] 업로드한 파일 Resizer 하여 화면에 출력시키기

Posted at 2020. 3. 4. 07:34 | Posted in JavaScript & jQuery/JavaScript

■ 업로드한 파일 리사이즈 하여 화면에 출력시키기

<html>

<head>

<title>:: JavaScript 캔버스 - 뷰 ::</title>

table {

border:1px solid #444444;

border-collapse:collapse;

}

table th {

border:1px solid #444444;

padding:5px 10px 5px 10px;

text-align:center;

font-weight:bold;

}

table td {

border:1px solid #444444;

padding:10px;

text-align:center;

}

</style>

function uploadImgPreview() {

// @breif 업로드 파일 읽기

let fileInfo = document.getElementById("upImgFile").files[0];

let reader = new FileReader();

// @details INDEX #01 실행 이후, 파일의 업로드( onload )가 확인되고 나서 실행된다.

reader.onload = function() {

console.log( "INDEX #02" );

// @details 업로드한 파일의 URL을 가져온다.

document.getElementById("preview").src = reader.result;

// @breif 썸네일 이미지 생성

let tempImage = new Image(); // @details drawImage 메서드에 넣기 위해 이미지 객체화

tempImage.src = reader.result; // @details data-uri를 이미지 객체에 주입

tempImage.addEventListener("load", function() {

// @breif 캔버스 위에 이미지 그리기

let canvas = document.getElementById( "canvas" );

let canvasContext = canvas.getContext( "2d" );

// @breif 캔버스 크기 셋팅

canvas.width = 240;

canvas.height = 300;

// @breif 캔버스 위에 이미지 그리기

canvasContext.drawImage(

this // @details 업로드한 이미지 파일의 정보

, -10 // @details X좌표

, -10 // @details Y좌표

, 270 // @details 넣을 이미지의 가로 사이즈( 해당 예제는 변화를 보기위해 살짝 크게 했다. )

, 330 // @details 넣을 이미지의 세로 사이즈( 해당 예제는 변화를 보기위해 살짝 크게 했다. )

);

// @breif 캔버스 위에 이미지 그리기

canvasContext.stroke();

// @breif 캔버스의 이미지 URL 정보를 받아 썸네일 출력

let dataURI = canvas.toDataURL("image/jpeg");

document.querySelector("#thumbnail").src = dataURI;

});

};

if( fileInfo) {

console.log( "INDEX #01" );

// @details readAsDataURL을 통해 업로드한 파일의 URL을 읽어 들인다.

reader.readAsDataURL(fileInfo);

}

</script>

</head>

<body>

<hr/>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

① 이미지 파일을 업로드 한다.

② 업로드한 이미지를 화면에 출력한다.

③ 지정한 캔버스 영역에 해당 이미지를 그대로 리사이징 하여 따라 그리는 작업을 수행한다.

( 이때 기본적으로 이미지는 *.png 파일로 생성된다. )

④ 마지막으로 캔버스의 이미지 파일을 그대로 다시 이미지로 출력시키는 작업을 수행한다.

사실 필자가 해당 글을 작성하게 된 경위는

[JavaScript] Canvas를 통한 이미지 회전 포스팅의 사전 준비 과정이었다.

캔버스를 통해 프론트 개발의 좀더 넓은 시각을 바라보고.

HTML5의 가능성에 대해서 좀더 알아봐야 겠다는 생각을 하고 있다.

저작자표시

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScript] Canvas로 이미지 서버에 전송하기 - Sample (0)	2020.03.06
[JavaScript] Canvas를 통한 이미지 회전 (6)	2020.03.04
[JavaScript] getElementByTagName( ) 메소드 (0)	2020.02.28
[JavaScript] INPUT TYPE FILE 썸네일 생성 (0)	2020.01.16
[JavaScript] 파일업로드시 용량 검사하기 (0)	2019.12.26

[jQuery] load( ) 메소드를 이용한 외부 데이터의 페이지 반영[jQuery] load( ) 메소드를 이용한 외부 데이터의 페이지 반영

Posted at 2020. 3. 2. 19:03 | Posted in JavaScript & jQuery/jQuery

■ 새로고침 없이변경된 데이터 조회하기

Ajax 통신을 사용한 비동기 통신으로

웹 브라우저의 새로고침 없이 데이터를 조회하거나, 변경 및 이벤트를 실행하는 경우는 많이 보아 왔을 것이다.

또한 iframe을 통해 작업되어져 있는 다른 페이지의 정보를 가져오는 방식으로도

새로고침 없이 작업을 진행 할 수 있지만.

여기서 설명할 .load( ) 메소드는 Ajax와 iframe은 비슷한 기능을 수행하면서도, 좀 하위 호한의 느낌이 강하지만.

사용여부와 방법에따라서 직관적이고 단순한 사용의 장점이 있다.

단순히 가져올 데이터가 명확하다면 .load( ) 메소드는 큰 힘을 발휘 하게 된다.

load_front.php

<html>

<head>

<title>:: jQuery load() 함수 ::</title>

jQuery(document).ready(function() {

backLoadAgainCall();

});

function backLoadAgainCall() {

jQuery(".output").load("load_back.php");

}

</script>

</head>

<body>

<hr/>

</body>

</html>

load_back.php

<html>

<head>

<title>:: jQuery load() 함수 ::</title>

#turnImg { transform:rotate(0deg); }

/* #turnImg { transform:rotate(90deg); } */

/* #turnImg { transform:rotate(180deg); } */

/* #turnImg { transform:rotate(270deg); } */

</style>

</head>

<body>

</body>

</html>

코드를 다 작성했다면.

load_front.php 를 실행한다.

이후 load_back.php에서 #turnImg { transform : rotate ( 0deg ); } 를

0 → 90 → 180 → 270 순서로 한번씩 변경하면서

브라우저의 재호출 버튼을 클릭해 보자.

load_front.php를 새로고침 하지 않고 load_back.php의 변경된 사항을 반영하여

이미지가 계속 회전하는 것을 확인 할 수 있다.

위와같이 jQuery의 .load( ) 를 사용하면

이미 만들어진 결과를 페이지의 새로고침 없이 가져올 수 있어.

경우의 따라서는 Ajax 호출과 구분하여 사용할 수 있다.

저작자표시

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

[jQuery] TextBox에서 다중 선택 기능 제작 (0)	2020.07.24
[jQuery] JCROP을 이용한 이미지 자르기 - Sample (5)	2020.02.11
[jQuery] jQuery Mobile을 이용한 반응형 테이블 제작 (0)	2019.06.18
[jQuery] 팝업 창 외에 다른 항목 클릭 막기 (0)	2019.06.04
[jQuery] 화면 단위로 끊어서 마우스 휠로 이동하기 (7)	2019.01.31

Prev Next

1 2 3 4 5 6 7 ··· 18

'JavaScript & jQuery'에 해당되는 글 69건

[JavaScript] Canvas로 이미지 서버에 전송하기 - Sample[JavaScript] Canvas로 이미지 서버에 전송하기 - Sample

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScript] Canvas를 통한 이미지 회전[JavaScript] Canvas를 통한 이미지 회전

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScript] 업로드한 파일 Resizer 하여 화면에 출력시키기[JavaScript] 업로드한 파일 Resizer 하여 화면에 출력시키기

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[jQuery] load( ) 메소드를 이용한 외부 데이터의 페이지 반영[jQuery] load( ) 메소드를 이용한 외부 데이터의 페이지 반영

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

CategoryCategory

Recent PostRecent Post

Recent CommentRecent Comment

Recent TrackbackRecent Trackback

Tag CloudTag Cloud

ArchiveArchive

LinkLink

티스토리툴바