Canvas와 PHP를 통한 재료 이미지 생성기

개요

@ 베타 히카루 만들고 있는 「동물은 당신의 밥이 아니다」제너레이터의 내용을 메모합니다.

「동물은 당신의 밥이 아니다」제너레이터
h tp // 베타히카루. 이 m/의 t후오 d/그리고 x. HTML

전 자료
h tp // w w. 호페 후라 니마 ls. rg/

참고(Togetter)
htp // 가시 r. 코m/ぃ/623016

기능

「동물은 당신의 밥이 아니다」라든가 「Animals are not …」등의 문자열을 바꾼 이미지를 만들 수 있다.

베이스의 색을 변경할 수 있다.

URL로 꽂을 이미지를 지정할 수 있다.

삽입할 이미지의 위치를 ​​조정할 수 있습니다.

이미지를 저장할 수 있습니다. (오른쪽 클릭 또는 스마트 폰의 경우 길게 누르기)

작성 예

운영 환경

Mac

Chrome 32.0.*

Safari 7.0.*

iOS7

Chrome for Mobile (2014/2/5 현재)

Moblie Safari

Windows

동작 환경 없이 미확인. Windows Server 2008 R2의 IE11에서 이미지가 Cavnas에 그려지지 않았음을 알고 있습니다.

처리 내용

사용자가 입력 한 문자열을 캔버스에 그립니다.

지정된 URL의 이미지를 단색화 (적당)하고 캔버스에 그립니다.

canvas의 내용을 img 태그에 쓰고 오른쪽 클릭으로 저장 가능하게 한다.

덤: canvas의 내용으로부터 DataUrl을 생성해, DataUrl로부터 파일을 생성한다.

힘든 점

언어

지금까지 일 이외에 웹 앱적인 것을 만들어 오지 않았기 때문에, 여러 아마추어에 가까운 상태로 힘들었다.
ROR의 환경 구축은 힘들고, CakePHP라든지 공부하고 있지 않기 때문에, 소의 PHP로 실장했지만, 몹시 귀찮았다.

쓰기

매우 나쁘다. 어떻게 하면 사용하기 쉬울까.

보안?

Canvas에 외부 사이트의 이미지를 가져오려고 하면, cross-origin 따위의 보안 엑셉션이 발생했다.
어쩔 수 없기 때문에, PHP로 일단 서버상에 파일을 다운로드하는 형식으로 했다.
현재 파일을 삭제하는 수단이 SSH 밖에 없기 때문에 공격하지 마세요 ☆

홍보

그리고 Twitter에서 자신의 트윗에 해시태그를 붙여도 해시태그 검색결과 목록에 나오지 않는다.
왜일까.

야망

현재는 화면상에 표시한 img 태그를 오른쪽 클릭으로 저장하는 형태로 하고 있지만,
AWS의 S3에 이미지를 저장하고 싶습니다.
※AP 서버를 중복할 수 있도록.
※예의 작성중.