PHP - 이미지 예제 1 - 1/2 > PHP

PHP

PHP Web Programming 강의 리스트

생활코딩 | PHP - 이미지 예제 1 - 1/2

본문

※ 영상을 선명하게 보기 안내
  1. 유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
  2. 팝업목록에서 "품질" 선택하세요.
  3. 원하는 해상도를 선택해주세요.
※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.
생활코딩님의 PHP강의 청각장애인을 위한 자막
15444116006131.jpg

 자 이번 시간에는 gd 라이브러리를 사용하는 구체적인 방법에 대해서

알아보겠습니다
자 어떤 걸 먼저 해 볼 건지 를 먼저 보여드리면
자 이렇게
이렇게 생긴 요 페이지에서
자 여기 버튼 점 php 라고 하는 필치 애플리케이션으로 접근할 때
물음표 텍스트는 일이라고 하는 것은 우리가 예전에 그 어디 였죠
입출력 그리고 폼 http 라는 것에서 갭 방식으로 데이터를 전송할 때는
url 란 의 데이터를 포함해서 데이터를 전송할 수 있다 라고 말씀드렸죠
바로 저기에 갭 방식이고 텍스트 라고 하는
값은 일이란 일이라는 뜻입니다 이렇게 되면 며 제가 이거를 엔터를 땅
치면 버튼 점 php 라고 하는 php 애플리케이션의 텍스트 라는 값이
1의 값을 텍스트 가 일이라고 하는 값이 입력된 거죠 그게 그것이 출력된
결과가 지금 보고계신 이 버튼의 찍혀 있는 일이라는 텍스트입니다
제가 음 제가 여기다가 이 보행 일하고 적게 되면 여기 이미지의 이 고잉
이 출력이 되고 요건은 이미지입니다
자 그 다음에 여기다가 코딩 이라고 하면 코딩이 출력되도록 하는 것을
해볼 거에요
다시 말해서 우리가 php 애플리케이션에 접근할 때 입력 값을 주는 거에
따라서 이 php 가 맡을 포토샵 처럼 포토샵 처럼 이미지 에다가 텍스트
를 입력해서 그것을 이미지로 만들고 우리에게 전송해주는 애플리케이션을
만들어 볼 거라는 겁니다
아시겠죠
자 우선 음 여기 보시면 우리 이미지란 디렉토리에 다가
자 버튼 점 php 라는 파일을 만들었고 요거를 우리가 작성하는 법을
배울 거고요
그 다음에 여기 작 이것을 사용하기 위해서는 같은 디렉토리에 m 버튼 점
php 라는 파일이 위치하고 있어야 됩니다
그 파일은 무엇이냐면 바로 요렇게 생긴 파일인데 이거를 오른쪽 클릭해서
다른 이름으로 이미지 저장을 해서
여러분의 그 컴퓨터에 저장을 하고 저장을 할 때는 어디에다 저장을 하냐면
바로 이 이미지 라고 하는 디렉토리에 버튼 점 php ng 라는 이름으로
저장을 하셔야 된다는 겁니다 되겟죠
자 이렇게 하면 이제 준비가 된거구요 요기 있는 코드가 어떻게 동작하는
나를 제가 설명을 드리겠습니다
자 제일 먼저 등장하는 코드는 예 헤더 라고 하는 겁니다 해도 잘 거
아직 안 매운 건데 이 헤더 라고 하는 것은 뭐 관련 있냐면

http 프로토콜 과 관련이 되어 있습니다

자 제가 피들러 라고 하는 프로그램을 실행을 시켰는데 요 요 프로그램
우리가 앞에서 몇 번 살펴본 프로그램입니다
제 걸 이용해서 서버와 클라이언트가 사이에 주고받는 실제 데이터인
http 프로토콜의 내용을 요걸로 살펴볼 수가 있었죠
자 그럼 제가 음
자 여기에 있는 요 파일로 제가 접근을 하면 url 로 접근을 하게 되면
어떻게 되는지를 한번 살펴볼게요
자 엔터를 땅 치는 순간에
서버와 클라이언트 사이의 통신이 이루어 졌고 그게 여기 있는 이 겁니다
자유글 더블 클릭해 보면 자 보시는 것처럼 위쪽이 리퀘스트 밑에 쪽이
리스폰스 즉 위쪽이 브라우저가 서버에게 요청한 정보가 위에 나타나구요
요 겁니다 그리고 아래쪽은 서버가
브라우저에게 응답해 주나 업 내용이 나타나는데 바로 여기 있는 요
내용입니다
자 그럼 그 중에서 뭘 봐야 되냐면 자 여기 있는 이 부분을 보셔야
됩니다
자 컨텐트 타입 은
이미지 슬래시 png 라고 하는 이 갑 있죠
요 값이 바로 컨텐트 타입 이라는 헤더 값입니다
그래서 여기에서 여기까지의 정보가 헤더가 되는 것이고 밑에 있는 정보는
뭐 컨텐츠가 되겠죠
바디 라고도 할 수 가 있겠구요 그래서 여기 있는 요 부분이 해더 고 요
헤더가 하는 역할은
예 서버와 클라이언트가 서로 통신을 할 때 필요한 여러가지 부가적인 정보
들 실제 내용이 아니라 내용이 아니라 부가적인 정보들이 바로 헤더 안에
들어가는데 그 중에 우리가 주목해야 될 헤더는 컨텐트 다시 타입 이라고
하는 것이고 그 값이 이미지 다시 png 라고 되어 있기 때문에
자 요건은 서버가
클라이언트에게 보내준 정보 줘 그럼 클라이언트 이 웹브라우저는 바로 요
정보를 보고 서버가 전송 안 데이터가 이미 지고 그 중에서 png 라고
하는 포맷을 따루 있다라는 사실을 알고 그 png 를 해석하는 방법에
따라서 png 를 해석해서 화면에 출력할 수 있게 되는 겁니다
예 그렇게 된 결과가 바로 요 것이고 바로 그것을 가능하게 해주는 코드가
여기에 있는 요 부분 이라는 것이죠 즉 php 에 는 php 에 있는 이
헤더 라고 하는 요 함수는 특수한 함수 인데 이 함수 안에 과로 하고서
여기에다가 이렇게 컨텐트 다시 타입이라고 이렇게 적어 주게 되면 자 여기
있는 6 버튼 점 p
php 라고 하는 요 파일이 어
php 엔진으로 부터 해석되고 웹서버로 그 결과를 보여줄 때 웹서버가 이
php 가 만든
php 에 있는 요 내용을 기준으로 해서
서버 가 클라이언트로 전송하는 헤더 안에
바로 요 내용을 포함 시키게 된다는 것이죠
그렇게 된 결과가 아까 보셨던 요 내 용 이라는 겁니다

그런데 이 헤더 라는 요 함수는 특수한 암수 라서 항상 어 젤 위에 위치
해야 됩니다
예 물로 2위 에 따른 게 유치할 수 있는데 예를 들면 결혼의 코어
같은거 있죠
뭔가 실제로 데이터를 출력하는
에코 1 이런거를 요렇게 추가를 하시면
자 아까 우리가 실행했던 요거를 리로드 했을 때 이미지가 표시되지
않습니다 라고 에러가 납니다
예 왜냐하면 헤더 정보는 가장 먼저 나와야 되기 때문입니다
예 그리고 또 여기에다가 여러분이 카피는 비슷하다 가 공백을 넣으셔도
동작하지 않습니다 왜냐
이 공백도 이 데이터 기 때문에 헤더 보다 먼저 나왔기 때문에 이렇게
되도 작동하지 않을 것입니다 그렇기 때문에
헤더 라고 하는 것은 항상 가장 위에 있어야 됩니다
물론 똑같은 헤더는 여러개가 이렇게 중첩해서 여기 다른 4 메세지가
들어가서 사용될 수도 있겠죠
너 어쨌든 헤더는 가장 위에 오는 위에 와야 된다 라는 겁니다 자 이게
이 예제를 이해하기 위한 부품 하나 입니다
부품 하나라 아셨어요 자 그 다음에 부품 투는
자 딸라 언더바 케 텍스트 라고 하는 것은 이
브라우저의 url 상에 돌아오 레져 브라우저의 적혀있는
그 url 상에 입력된 값이 바로 딸라 온더 바케 시라고 하는 변수에
담겨 지도록 약속되어 있고 그 변수들 중에 텍스트 란 이름을 가지고 있는
변수가 여기에 담겨 진다 라는 것이죠
요건 우리가 이전에 살펴 보았기 때문에 제가 따로 설명드릴 필요는 없을
것 같습니다
자 그렇게 해서 여기 있는 요 두 줄이 하는 역할은 자리 첫 번째는
예 서버 서버가 클라이언트로
지금부터 전송하는 내용은 png 라고 하는 이미지의 형식을 따르고 있는
이미 c 달하는 것을 클라이언트 즉 100 쁠알 우정 에게 알려주는
내용이 첫 번째 줄
예 2번째 중이죠 그리고 3번은 사용자가 입력한 데이터를 받아서 그
입력한 데이터를 스트링 이라는 변수에 담아 주고 있습니다
이렇게 두줄 우리 해서 캣 고요 자 그 다음부터 이제 gd 라이브러리 에
내장 함수가 이제 등장하기 시작합니다
자이미 직 크레이트 프롬 png 라는 이름은 어떤 뜻일까요 끊어 보세요
이미지 크리에이트 프럼 png
즉 이미지를 생성할 건데
png 로 부터 생성할 것이다
다시 말해서 png 의 형식에 이미지를 가져올 것이다 라는 겁니다
그래서 그 png 의 형식을 갖고 있는 이미지는 바로 이 함수의 인자로
그 이미지에 이름이 전달되면 됩니다
그래서 이 php 는 여기 있는 네 번째 행을 해석할 때 네 번째 행을
실행할때 요 인자로 전달 되어 있는 버튼 점 png 라고 하는 바로 요
파일이죠
요 파일을 읽어서 예 읽고 그 결과를 요 아이 엠 이라고 하는 변수에
다가 닫는다 라고 생각합시다
정확하게 같지는 않은데요 아 그리고 그렇게 되면
여기 있는 딸라 im 이라고 하는 적 변수는
여기 있는 버튼 점 png 라고 하는 저 이미지 파일에 대한 식별 자가
되는 겁니다 식별 짜
그러면 이 식별자 를 통해서 이 식별자 를 통해서
저 이미지를 조작할 수도 있고 이미지를 읽어올 수도 있고 여러 가지 것들
할 수가 있게 되는 겁니다 자
그 다음에는 어 이미지 컬러 얼 ok 트라고 되어 있죠 자 이미지 컬러
컬러는 색 이란 뜻이고 어로 케이트는 뭐 할당한다 뭐 이런 뜻이에요
그래서 여기 있는 요 함수의 첫 번째 인자로는 뭐가 들어오도록 약속되어
있냐면

이미지에 대한 식별 자가 들어오도록 약속이 되어 있습니다
자 우리가 위에서 만들었던 이미지에 대한 식별자는 뭐죠
바로 이 버튼 점 png 라고 하는 요 파일에 대한 식별 자가 im 에
들어가 있고 바로 그 im2
여기에 첫 번째 인자로 들어오게 되는 겁니다 자 그다음에 뒤에 있는 68
17
156 이라고 하는 것은 요건은 r g b
즉 어 레드
그리고 그린
그리고
블루 이렇게 3개의 색깔의 수치가

숫자로 순서대로 들어오도록 약속되어 있습니다
자 그럼 60 80 756 에 어떤 색인지 한번 살펴볼까요
제 작은 픽셀로 라고 하는 프로그램을 실행을 시켰는데 이거 아주 좋은
프로그램입니다
좋은 서비스 의 주소로 들어가시면 여러분이 온라인으로 포토샵 작업을 할
수 있는 기능을 제공합니다
자 아까 우리가 봤던 그 코드는
자 이렇게
여기에 됐든 적어놓고 요 제가 이걸 기록 기억해야 되니까
여기가 60 을 적으면 60에 적은 만큼 레드 값이 요렇게 적용이 됩니다
자 그 다음에 여기 있는 87
초록색 밭 초록색의 87회 감도로 입력하는 거죠 자 그럼 색깔이 이렇게
되요
자 그 다음에 마지막에 있는 156 이라고 파란색을 지정을 하면 요
색깔이 됩니다
예 뭐 페이스북에 idt 칼라는 비슷하죠
바로 색깔은 예 붉은색 60 그리고 초록색 87
그리고 파란색 156 에 강도를 요렇게 좋아 파괴되면 요 색깔이 된다는
겁니다
그래서 뭐 rgd 에 갑시다 0 0 이면 검은 색이 되고요
ig b 의 값이 255
알마니 150 오면 붉은색의 되죠 그리고 255
255호 가 되면
예 흰색이 됩니다 굉장히 자 왜냐하면 여기 있는 요 각각의 색깔들이
일종의
붉은 빛 초록빛 파란 빛 인데 그 광원 들이
합쳐질 수 록 색깔은 밝아집니다 광원이 줄어들수록 색깔을 어두워지기
때문에 검은색에 가까워 지는 거예요
그냥 모르시는 분들은 그냥 상식적으로 알고 계시면 이미지 처리 않는데 뭐
음으로 양으로 도움이 될겁니다
자 그 다음에 다시 코드로 돌아와서
자 이렇게 해서 뭐랄 뭘 한거냐 면 자 여기 있는 요 버튼 점 png
라고 하는 저 파일의
우리가 색을 칠할 건데 그 색을 칠할 때 오렌지 색깔의
대한 정의를 해 준 겁니다 버튼 점 png 에다가 오렌지 색깔로 색을
칠할 때는 우리는 이 오렌지 라고 하는 요 변수
이 변수를 활용해서 오렌지 색깔을 취할 수 있게 된 겁니다
요거는 이제 색깔에 대한 식별 자라고 할 수가 있는 겁니다 여기 있는
im 이라고 하는 것은 예 이미지에 대한 식별 자라고 할 수 있는
것이고요
뭐 캔버스에 대한 식별자 라고도 이야기할 수도 있습니다 저거는
자 그럼 이번에 살펴볼 것은 뭐냐면
음 일단 여기 있는 여섯 번째 라인은 건너뛰고 요
7번째 라인부터 설명을 드리겠습니다 자 이미지 스트림
이렇게 끊어 읽으면 즉 이미지로 된 문자열 이란 뜻이죠
이제 우리가 갖고 있는 요 켄버스 요건은 달러 im 이라고 하는 변수를
통해서 식별되는 요 캔버스는 캔버스 에다가 우리가 어떤 글씨를
적겠다 라는 뜻이죠 예 요거는 그런 뜻입니다
자 그러면 요 캔버스는
아니 요 이미지 스트링 이라고 하는 저 함수는 어떤 인자 값을 받도록
약속되어 있냐면 요 자 첫번째 자리에는
예 글씨를
기록하기 위한 글씨를 그리기 위한 캠퍼스 를 첫 번째 인자로 줘야 됩니다
그렇기 때문에 우리는 버튼 점 png 라고 하는 저 이미지 에다가 그림을
그릴 거잖아요
그렇기 때문에 바로 이 버튼 점 png 에 대한 식별자 인 여기 있는
달러 im 을
여기에다가 요렇게 집어 넣은 겁니다
저는 두번째 나오는 요것은 이건 폰트입니다 폰트 폰트 는 글꼴이 란
뜻인데 이 글꼴을 바꿀 수가 있습니다
여기 있는 숫자를 1 2 3 4 이런식으로 바꿔 보면서 이따가 정말 ot
그 폰트 글꼴이 바뀌는지 한번 직접 살펴 보시면 됩니다
자 여기에 네요 px 이 px 가 바로 요 위에 있는 루피 x 인데 이거
조금 복잡하니까 좀 뒤에서 살펴보도록 할게요
자 뒤에서 살펴보더라도 살펴 본다고 하더라도 여기에 어떤 값이 나오는
지는 설명드릴 필요가 있겠네요
자 여기에 들어오는 값은 x 주게 값입니다
즉 이렇게 캠퍼스가 있을 때 이 캔버스에 요기를 0 콤마 x 가 0
y 가 0 자 여기가 x 죽이고
여기가 y 축 입니다 자 이렇게 됐을 때
자 우리가 그리려고 하는 글씨가 글씨가
어디에 위치해야 되는가 라고 하는건데요
만약에 그 코드 라고 하는 요 텍스트를 우리가 입력하고 싶다 며 텍스트
바깥쪽에 있는 제가 그리고 있는 태 드리는 요건 이해를 돕기위한 테두리
부분입니다
그렇게 했을 때 여기에 있는 요 이미지의 이 체험이 이점이
어 요기에 위치 하기 위해서는 x 의 값은
얼만큼 y 에 값은 얼만큼 이라고 되어야 되는데
자 여기에 있는 요 지점이 만약에 백이다
그리고 여기 있는 요 지점이 100이라고 하면 자 여기 있는 코드 라고
하는 요 텍스트를
이 곳에 위치 시키려고 한다면 우리는 이 코드란 텍스트의 위치를 x
축으로 는 뱅 만큼 y 축으로 도 뱅 만큼 이동을 시켜야 된다는 거죠
바로 그 x 축에 베개 해당되는 그 값이 op x 라고 하는 것이고요
그 다음에 y 축에 9 라고 하는 것이 여기에 있는 요 것에 해당되는
것이죠
그런데 x 축의 px 는 변수에 요
그 얘기는 x 축 자의 수평 의 위치
이 텍스트의 수 평상에 위치가 바뀔 수 있다라는 것을 의미하고
y 축은 구로 딱 정해져 있습니다 그 얘기는 뭐냐면 와 1 측은 요기
있는 요기 가구 픽셀이 라고 한다면 언제나 9 픽셀의 있을 거라는 거예요
즉 y 측으로 는 위치가 바뀌지 않고 x 축으로 는 위치가 바뀔 것이라는
뜻입니다
자 그 다음에 스트링 이라고 하는 것은 뭐냐면 우리가 입력하고자 하는
내용 즉 여기 코드 라고 적힌 이게 코드라고 여기에다 기록하고 싶다면
스트링에 값은 코드 라고 하는 문자열이 해야 된다는 것이죠
자는 오렌지 라고 하는 것은 뭐였죠 바로 요 거였죠
요거는 뭐 했어요 이미지 칼라 얼 로 kt 얼렁 케이트를 통해서 얻은
값이 줘
그건 뭐 였어요 어 요 색깔 여기 있는 요 숫자가 지정하는 그 색깔을
식별하는 식별자 라는 뜻입니다
작 즉 무슨 뜻이냐면 요 스트링 이라고 하는 요 변수로 전달된 값 변수
로 전달된 값을
이 색깔로 칠하는데 예 x 축으로 는 이 위치로
y 축으로 는요 위치로 위치하게 했으면 좋겠고
그리고 우리가 작성하는 우리가 그 그리려고 하는 텍스트는
요 4번에 해당되는 폰트 여야 한다
그리고 그리려고 하는 대상은 여기 있는 요 캔버스 에다가 그릴 것이다
이런 뜻이 된다는 겁니다
자 그 다음에 img png
그리고 im 이라고 이렇게 나왔어요
자 여기 있는 요 함수가 하는 역할은 자 이미지 png 니까 png 라고
하는 형식으로 된 이미지를
어 전송한다 란 뜻으로 생각합시다
예 실제 데이터가 그 이미지에 대한 데이터가 여기서
어 작성이 되는 것이고 여기서 전송이 되는데 그 전송된 데이터가 어떤
형식인지 는 애가 알려주는 것이 아니라 이 위에 있는 헤더 값에 의해서
브라우저는 그 이미지가 png 라는 형식의 형식을 지키고 있다는 것을 알
수가 있는 겁니다 자 이미지 디스트로이 라고 하고 im 이라고 하면
우리가 지금까지 사용했던 요 이미지파일 있죠
요 이미지 이미지에 대한 자원을
이 해제해 주는 겁니다 삭제 하는 겁니다
여러분도 포토샵 같은걸 써보시면 포토샵의 그 이미지가 여러분이 편집한
이미지가 수백장 인구수 천장이 면 컴퓨터가 어떻게 되나요
느려 지죠 그럼 뭘 해요 그 이미지를 끄 줘 바로 그 끄는 것에 해당되는
것이 이미지 디스트로이 달하는 겁니다
자 아까 제가 설명들이 다만 내용을 이제 설명을 마저 드리려고 합니다
즉 요 달러 ps 라고 하는 요 값을 어떻게 사용하는가
라는 것을 설명 드리려고 하는 거구요 그 전에 한 가지 제가 착각한 게
있어서 조금 이 변명을 좋아하면 여기 오렌지 라고 하는 변수에 다가 제가
요 색깔이 가리키는 컬러를 담았죠
근데 이 색깔은 요 밑에 있네요 색깔입니다
4 5 색깔 오렌지가 아니죠 제가 착각한 거에요 예 헷갈려 쓰면 죄송해요
자요 내용을 이해 하시려면 뭘 아셔야 되냐면
자 여기 있네요 바깥쪽에 뉴 파란색 선 여기에 캠 버 스 라고 했을 때
어 그리고 여기 안에 있는 요 텍스트는 사실은 가상의
요렇게 악수 라고 할 수가 있어요 실제로는
얘도 요렇게 박스 라고 할 수가 있습니다 박스안에 들어가 있는 거예요
그러면 여기 있는 요 박스가 요 텍스트가 지금 보고 계신 요 위치에 가기
위해서는 이 텍스트의 요 밥스 이 녹색 박스가 어떤 값을 가지고 있어요
어떤 좌표값을 가져오기로 가

댓글 0개

등록된 댓글이 없습니다.

 
Total 93건 1 페이지
썸네일
제목

본 사이트의 컨텐츠는 명시적으로 공유기능을 제공하고 있는 공개된 자료를 수집하여 게시하고 있습니다.

저작권에 문제가 있는 자료일 경우 impactlife@naver.com 으로 신고해 주시면 즉시 삭제처리하겠습니다.

Menu