생활코딩 | PHP - 이미지 예제 1 - 1/2
본문
※ 영상을 선명하게 보기 안내
- 유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
- 팝업목록에서 "품질" 선택하세요.
- 원하는 해상도를 선택해주세요.
※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.
생활코딩님의 PHP강의 청각장애인을 위한 자막
자 이번 시간에는 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 이런거를 요렇게 추가를 하시면
자 아까 우리가 실행했던 요거를 리로드 했을 때 이미지가 표시되지
않습니다 라고 에러가 납니다
예 왜냐하면 헤더 정보는 가장 먼저 나와야 되기 때문입니다
예 그리고 또 여기에다가 여러분이 카피는 비슷하다 가 공백을 넣으셔도
동작하지 않습니다 왜냐
이 공백도 이 데이터 기 때문에 헤더 보다 먼저 나왔기 때문에 이렇게
되도 작동하지 않을 것입니다 그렇기 때문에
헤더 라고 하는 것은 항상 가장 위에 있어야 됩니다
물론 똑같은 헤더는 여러개가 이렇게 중첩해서 여기 다른 메세지가
들어가서 사용될 수도 있겠죠
너 어쨌든 헤더는 가장 위에 오는 위에 와야 된다 라는 겁니다 자 이게
이 예제를 이해하기 위한 부품 하나 입니다
부품 하나라 아셨어요 자 그 다음에 부품 투는
자 딸라 언더바 케 텍스트 라고 하는 것은 이
브라우저의 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 이런식으로 바꿔 보면서 이따가 정말 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 라고 하는 요 값을 어떻게 사용하는가
라는 것을 설명 드리려고 하는 거구요 그 전에 한 가지 제가 착각한 게
있어서 조금 이 변명을 좋아하면 여기 오렌지 라고 하는 변수에 다가 제가
요 색깔이 가리키는 컬러를 담았죠
근데 이 색깔은 요 밑에 있네요 색깔입니다
5 색깔 오렌지가 아니죠 제가 착각한 거에요 예 헷갈려 쓰면 죄송해요
자요 내용을 이해 하시려면 뭘 아셔야 되냐면
자 여기 있네요 바깥쪽에 뉴 파란색 선 여기에 캠 버 스 라고 했을 때
어 그리고 여기 안에 있는 요 텍스트는 사실은 가상의
요렇게 악수 라고 할 수가 있어요 실제로는
얘도 요렇게 박스 라고 할 수가 있습니다 박스안에 들어가 있는 거예요
그러면 여기 있는 요 박스가 요 텍스트가 지금 보고 계신 요 위치에 가기
위해서는 이 텍스트의 요 밥스 이 녹색 박스가 어떤 값을 가지고 있어요
어떤 좌표값을 가져오기로 가
댓글 0개
등록된 댓글이 없습니다.