생활코딩 | PHP - 이미지 예제2
본문
※ 영상을 선명하게 보기 안내
- 유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
- 팝업목록에서 "품질" 선택하세요.
- 원하는 해상도를 선택해주세요.
※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.
생활코딩님의 PHP강의 청각장애인을 위한 자막
이번에 살펴볼 예제는 워터마크를 만드는 제 죄입니다
자 이게 오시면 생활코딩 이라는 요 텍스트가 있습니다 이 텍스트는 요뒤에 있는 하얀 부분이 투명하게 처리된 텍스트의 요 자 그다음에
오리지널 점 png 란 파일이 요렇게 생겼는데요
요 파일의 다가 생활코딩 이란 텍스트를 위해 닿지 꺼서
워터마크를 이렇게 어떠 마크 효과를 내는 이 방법에 대해서 알아보겠습니다
즉 여기 있는 요 두개의 이미지를 조합해서 세번째 이미지를 php 가
프로그래밍 쪽으로 동쪽으로 생성하는 방법을 알아보겠다 는 거예요
작아서 여기 있는 요거 이미지는 텍스트 점 png 오리지널 점 png 로
두 개의 이미지 파일이
우리가 작업하려고 하는 디렉토리에
이렇게 오리진 점 png 그리고 텍스트 점 png 이렇게 미리 위치하고
있어야 됩니다
그리고 워터마크 점 png 라는 파일에서 저는 작업을 할 거구요
어 뭐 터 마크 점 png 로 이렇게 접근했을 때 이 두 개의 파일 2개
이미지 파일을 조합해서
이렇게 하나의 이미지로 만드는 방법을 알아보는 게 이번 동영상 수업의
목표입니다
저서 이미지 처리 는 대부분 다 비슷비슷합니다 이 순서가
저희 보시는 것처럼 어 이미지 크레이트 프롬 png 이거 우리가 이전에
했습니다 그래서 두 개의 이미지 요건은 텍스트 점 png 는
어 요거는 생활코딩 이라는 텍스트
그쵸 오리지날 좀 png 는 아까 보셨던 그 사막
사진
고 것을 스템프 라는 변수와 im 이라는 변수에 각각 식별자 로써 어
담아 놓은 거죠 자 그다음에 여기에 있는 마진 라이트 마진 버트 미 라고
하는 건 뭐냐면
자 여기 요게 사막 사진 입니다
그리고 이 생활코딩 이란 텍스트가
여기에
위치하게 될 거에요
예 테두리는 제가 이해를 돕기 위한 것 뿐입니다
자 그러면 어
저는 뭘 하고 싶냐 면 여기있네요 생활코딩 이라는 텍스트가
요 암연 이 사막 싸진
왜 기준으로 했을 때 자요 만큼 의 간격이
c 픽셀 이었으면 좋겠구요 그리고
요만큼 의 간격도
c 픽셀이 었으면 한다.는 거죠 예
그래서 요렇게 했을 때 요만큼 20
요만큼 더 10 이었으면 좋겠다는 겁니다 자 그 다음에 나오는 건 뭐죠
이미지 sx 스탬프 즉 요 생활코딩 이라는
요 것의 크기를 달러 sx
그리고 떨 어
sy 에다가 담았네요
그쵸 까지 됐습니다
자료 이미지 컬러 이미지 컬러 라고 하는 요 함수는 첫번째 인자로 멀
봤냐 면
아 데스티네이션 해 봤습니다 st
데스티네이션 은 목적지 라는 거죠
자 그 다음에 스탬프 라는 것은
소스를 받습니다 자 데스티네이션 소스
즉 여기 있는 요 이미지 있죠
요 캠퍼스 캠퍼스 가 일종의 목적지 고 어
누가 이 캔버스에 그려진 야 면 요 생활코딩 이란 텍스트가 그려지기
때문에
요 생활코딩 이란 텍스트를 소스 라고 한다.는 거죠 자 여기 있는 용어
중요하지 않습니다 데스티네이션 소스 라는거
이런 php 매뉴얼에 여기 이 변수의 이름을 데스티네이션 이라 한
것뿐이에요 예 아무 의미 없습니다
즉 첫 번째는 예
복제될 자 이미지 카피 라는건 이미지를 복사할 건데 어디다 복사할 거냐면
기존의 이미지 위에다가 복사를 할 거 란 뜻입니다
그래서 첫 번째 인자는 기존의 이미지에 대한 식별 차 두 번째 인자는
복사할 이미지에 대한 식별자 가 온다 라는 이 사실 많이 하시면 됩니다
자 그 다음에 세 번째 나오는 요만큼 의 구간은
여기에 뭐가 들어 오냐 면
복제할 이미지의
아니죠 복 짜리 미지가 2캠퍼스 상에서
즉 eim 이라는 요 변수가 식별하는 오리지날 점 png 라는
저 이미지 상에서 위치 rx 좌표의
그래서 요거를 station
제가 첫 번째를 데스티네이션 이라고 했으니까요
그 다음에 요만큼 뭐냐면
만큼은 잣 에스트 에
y 좌표입니다
자 그 다음에 여기 있는 요 세 자리
여기 있는
요거 3자리 인가요 내자리 줘 예 자 주 깔끔하게 지웠어요 자요 만큼
요건 뭐냐면 여기 있는 요구 첫번째 꺼는
자 생활코딩 이라는
요 텍스트 1 가상의 선을 이렇게 했을 때 요 텍스트의 이 텍스트
쪽 즉 이 이미지를
어떤 구간을 사용할 것이냐 만약에 여러분이 요만큼 의 구간을 쓸 수도
있어요
요만큼만 쪽에서 여긴 오리지날 점 p 인제 다 붙일 수도 있다는 거죠
근데 우리가 지금 하려는 것은 요 이미지 전체를 쓰려고 하는 거기 때문에
자 이미지의 시작점
x 축 요기는 y 축 그리고 여기는
여기는 끝점에 x 즉 그 씨라고 써야겠네요
여기는
끝점에 y 축 좌표 라는 거에요 그래서 욕을 0 콤마 영어로 한다.는 것은
결국에는
0 콤마 영은 x0 y0 그리고 요 그 점 이 끝점에
이미지 sx 스탬프 잖아요 그럼 이건 뭐죠
자택 3.png 즉 여기있네요 생활코딩 으로 이미지 2 이미지 에 폭
이니까
여기 있는 요 값은
요기가 되죠 그리고
여기 있는 요것은 예 요 이미지의 높이기 때문에 여기 있네요 빨간 점은
일로 이동을 해서 요만큼 이 된거죠
그래서 여기 있는 요 0 콤마 0부터 요 생활코딩 1 텍스트의 폭과 높이
만큼 의 x y 좌표 사이에 있는 이만큼 을 다 쓰겠다 라는 겁니다
나중에 여러분들이 여기에 있는 요 값을 한번 바꿔서 어떤 일이 일어나는
지를 살펴 보시면 이게 어떤 뜻인지 직접 하기는 보실 수가 있을 겁니다
자 그렇게 이미지를 카피 하면 자 여기 있는 오리지널 이미지
오리지날 점 png 에다가 스템프 즉 생활코딩 이라는 텍스트를 복사 해서
그 위치 줘 위치에 대한 부분이고 복사하면
복사한 다음에 헤더가 등장을 하죠
예 그리고 컨텐트 타입을 이미지 png 직 png 형식으로 이미지를 저장
하겠다
이미지 를 전송하게 따 이런 뜻이에요 브라우저 달려주는 거죠
그 다음에 이미지 png im 즉 우리가
스탬프 라고 하는 이미지를 im 이라고 하는 이미지의 붙였기 때문에 im
이란 이미지를 화면에 풀어 주면 되는 거죠 그래서 이렇게 한 다음에
화면에 전송이 다 된 다음에는
이미지 디스트로이 를 해서 어 그 이미지에 대한 자원을 해제 시켜 주는
그런 명령을 이렇게 내리는게 전체적인 흐름 입니다
자 그러면 나머지 에 여기 있는 좌표와 관련된 부분에 조금 살펴 볼게요
자 여기 있는 이미지 xx
자 여기 여기에서 콤마 에서
요금 막 요구 간의 들어오는 요 값은
예 어
텍스트가 생활코딩 이런 텍스트가 오리지날 좀 png 라고 하는 배경이미지
이상의 어떤 x 좌표의 위치하게 될 것인가 를 나타내는 값이고
여기서부터 여기 있는 요 콤마 까지의 들어오는 요구 간의 들어가는 값은
y 측의 해당되는 갑시다 라는 거죠 자 그럼 여기잇는 이미지 imax
라고 하는 것은
예 오리지널 이미지 오리지날 이미지의 폭을 의미하는 것이고 그 폭 에서
자 달러에 섹스는 요 거잖아요
예 생활코딩 이라는 로고 의 폭을 빼준 거고
거기서 다시 마진 라이트 요거 줘 예 그 아까 제가 이렇게
생활코딩 이렇게 있으면 요만큼 의 여백 을 의미하는 게 바로
예 sx 였죠
바로 그 값을 많이 xx 가 아니죠 바로 여기에 마진 랄 t 었는데 그
값을 이렇게 입력해 준 겁니다
자 그럼 어떻게 되냐면 자 이렇게 캔버스가 있습니다
캠퍼스가 있는데 만약에
요 뒤에 있는 부분 요 뒤에 있는 부분을 아직 계산하지 않은 상태에서
그냥 이 값만 세번째 인자로 주게 되면 요 값은
요 켄버스 캔버스에 폭만큼 에 값이 잖아요 이런 만큼 의 값이 여기 있는
이미지 sx im 이잖아요
그렇게 되면 어떻게 되냐면 생활코딩 이라는
요 글씨가
여기에 위치하게 됩니다 여기까지 있으면 자
거기서
- xx 를 해주게 되면 요 생활코딩 이라는 욕이 556
텍스트의 2 폭 만큼 을
폭만큼 을 여기서 요 전체에서 빼주는 거기 때문에
요만큼 전진을 하겠죠
위치를 여기도 안 올까요
얘가 로 만큼을 선진 하는 겁니다 자 그럼 마진이 없잖아요
여기 딱 달라붙어 있는 상태이기 때문에 맞은 라이트 를 빼주면 즉 여기에
우리가 지정한 요식 픽셀 만큼을 빼주면 애가
여기에 있던 게 요만큼 이동을 하면서
여기서 끝나게 되는 거죠
그러면 요만큼 의 거리가 바로 식 픽셀이 되게 됩니다
그럼 y 측은 제가 설명 안 드려도 여러분들이 이해할 수 있을 거라고
생각이 됩니다
자 이런식으로 요 캔버스에
어떠한 이미지를 그릴 때 그 그리고자 하는 이미지
또 복사 하려고 하는 그 이미지에 어떤 위치 같은 것들을 세부적으로
조정할 수 있다는 것을 제가 보여드린 거 보여 드린 겁니다
그럼 워터마크 이런 것들은 뭐 서비스에서 자주 쓴다면 자주 쓴다고 할
수 있는 기법 이기 때문에 알아두시면 요긴 하실 것 같구요
그리고 워터마크를 사용하는 과정에서 우리가 이미지를 어떻게 처리하고 이
프로그래밍 쪽으론 이미지를 어떻게 다룬 응가 에 대한 감각을 익혔다면
그걸 이번 수업은 충분히 목적을 달성한 거라고 할 수 있겠습니다
댓글 0개
등록된 댓글이 없습니다.