기존 배경 이미지와 자바 스크립트 텍스트를 PHP의 jpg로 안전하게 작성하십시오.

Question

재미있는 텍스트가 포함 된 이미지를 게시하는 페이스 북에 몇 개의 팬 페이지가 있습니다 (아래 예제 참조). 모든 페이지에서 동일한 텍스트를 사용하지만 배경 이미지는 다릅니다. 배경의 크기는 항상 동일합니다. 색상 만 바뀝니다. 개별 사진을 다른 배경으로 개별적으로 저장해야하기 때문에 지금은 jpg 또는 png 파일과 같이 다른 배경의 텍스트를 저장할 수있는 작은 스크립트를 만들려고합니다. 나는 보통의 HTML 양식의 일부가 될 것입니다 텍스트 영역에 텍스트를 추가 할 수

1. : 여기이 과정을 상상하는 방법이다.

2. javascript를 사용하여 아래 표본의 흰색 테두리 안에 텍스트 (fontsize, 너비 및 높이)를 맞추고 싶습니다.

3. 양식이 제출되면 스크립트는 루프를 통해 실행되어 별도의 배경에 각기 다른 배경에 텍스트를 저장해야합니다. 여기

출력이

내가 파악하는 방법을 알고 내 계획의 일부가 있습니다

어떻게 보일지의 예입니다. 그러나 내가 붙어있는 두 가지가있다.

1. 견본 이미지의 흰색 테두리 안에 맞도록 텍스트를 조정하려면 어떻게해야합니까?

2. 배경 이미지로 이미지를 만들고 그 위에 일부 텍스트를 어떻게 만들 수 있습니까?

아무에게도 접근 방법에 대한 아이디어가 있습니까? 아니면 내가 충분히 사용할 수있는 스크립트일까요?

Answer 1

PHP에서 이러한 종류의 이미지 생성을 수행 할 방법이 있는지 확신하지 못합니다. Javascript로 태그를 지정 했으므로 프론트 엔드가 있다고 가정합니다.

저는 FitText.js과 같은 것을 제안하려고했지만 이미지 파일로 작업을 저장하려면 Canvas API를 사용해야합니다. 그것에는 toDataUrl('image/jpeg') 방법이 있습니다.

canvasCtx.drawImage을 사용하여 이미지 배경을 만들 수 있습니다. A canvasCtx.strokeRect을 사용하면 테두리가있는 사각형을 만들 수 있습니다. 그리고 canvasCtx.fillText 텍스트를 그립니다. 컨테이너

에

맞춤 텍스트는 텍스트가 현재 글꼴 크기 차지 공간이 얼마나되는지 측정하는 캔버스의 방법이있다. 그러나이 방법은 텍스트를 줄 바꿈하지 않고 한 줄에 모두 넣을 수 있습니다.

Size to fit font on a canvas

저장 이미지 : 더 나은 솔루션은 다음과 같은 스택 오버플로 스레드에서 논의 된 바와 같이 사용자가 텍스트에 맞게 할 수 있도록 고정 된 글꼴 크기와 <textarea> 또는 여러 <input>의 여러 라인을 가지고하는 것입니다

확인이 스레드 밖으로 파일 : Save canvas as jpg to desktop

솔직히, 그 모든 후, 나는 어떤 사진 편집기 자동화 약간의 설정 쉬울 것이다라고 말하고 싶지만 너는 사용한다. 예를 들어 Photoshop의 템플릿 PSD입니다.