2016-10-21 3 views
1

얼마 전에 포럼 서명에 사용하기 위해 다양한 이미지를 선택할 수있는 작은 시스템을 만들었습니다 (아래 예제 이미지 참조). 이것은 현재 자신의 이름, 폴더 및 이미지 이름의 접미어에 의해 참조되는 일련의 이미지를 가짐으로써 수행됩니다.PNG 수정 및 내보내기

원하는 모든 것을 수정할 수있는 시스템을 만들고 싶습니다. 나는 그것을하기위한 몇 가지 다른 방법을 찾아 보았지만 여기서하고자하는 것을 할 수있는 방법을 찾지 못했습니다.

원래 이미지는 Photoshop에서 만들어지며 배너 유형에 따라 개별 레이어로 구분됩니다. 이상적으로는 색상 (RGB, 슬라이더 등)을 수정할 수있는 시스템을 만들고, 미리 설정된 아이콘 세트로 아이콘을 변경하거나 자신의 파일을 업로드하고, 텍스트를 수정할 수있는 시스템을 만들고 싶습니다. 이미지들.

결국 나는 서버 측에 저장되지 않도록 이미지 조각을 다운로드 할 수 있기를 바랍니다. 또한 가능한 모든 변형을 내보낼 필요없이이 작업을 수행하고 싶습니다.이 작업은 현재 수행중인 현재의 방식과 관련하여 이미 불편을 겪고 있기 때문입니다.

TL : 사용자가 색상, 아이콘 또는 텍스트를 변경하기 위해 매개 변수 집합을 수정할 수있는 방법이 있습니까? 그런 다음 결과를 PNG로 다운로드 할 수 있습니까? 코드 유형은 중요하지 않으며 배우기를 원하며 올바른 방향을 알고 싶습니다.

다음은 관심있는 모든 사용자를위한 최신 코드 다운로드입니다.

https://dl.dropboxusercontent.com/u/90098446/website.zip

예 이미지 (흰색 라인을 무시) : 배너, 아이콘, 텍스트, 옵션 눈물 :

Old Layout

답변

1

각 배너처럼 보인다는 4 개의 레이어가 있습니다.

개별 레이어를 저장하고 프런트 엔드의 javascript를 통해 어셈블합니다. 파트를 스프라이트 시트로 배열하면 Photoshop에서 편집하고 프로그래밍 방식으로 어셈블 할 때이 작업을보다 편리하게 수행 할 수 있습니다.

사용자가 결과를 다운로드하려면 어셈블리 설명을 백 엔드에 보내고 백 엔드에서 이미지로 파트를 어셈블하고 다운로드 할 이미지를 제공하십시오.

Photoshop에서 각 가능성을 수동으로 조합하는 대신 필요에 따라 시스템을 조합 할 수 있습니다.

+0

나는이 라인을 따라 뭔가를 논했는데,이 경우 시스템이 PSD에서 이미지를 어셈블하고 내 보내면 어떻게 될까? 또한이 방법으로 배너의 텍스트와 색상을 수정할 수 있습니까? 마지막으로 이러한 유형의 시스템에 사용할 최적의 코드는 무엇입니까? – Korvic

+0

@ 코르 빅 그들은 평면 이미지 여야합니다. PSD에서 직접 실행하는 것은 실제로 불가능합니다. 글꼴을 사용할 수 있다고 가정하면 텍스트를 수정할 수 있습니다. 배너의 색상을 수정하는 것은 원하는 수정의 종류에 따라 달라집니다. 배너가 그레이 스케일 인 경우 단색 투명 색상을 덧씌우면 색조가됩니다. 테두리 줄무늬를 다른 기본 색상으로 만들려면 다른 레이어가 있어야합니다. 그것은 종단 간 전략이기 때문에 변환이 쉬운 시스템이 아니며 이미 모든 것을 구축했지만 전략이 완료되면 삶은 훨씬 더 간단해질 것입니다. – Ouroborus

+0

@Korvic PSD를 다시 배열하면 스프라이트 시트로 쉽게 내보낼 수 있습니다. – Ouroborus

1

나는 실제로 이와 같은 작업을 수행했습니다. HTML에 canvas을 사용하고 유한 이미지 수 또는 사용자가 원하는 것을 그릴 수있는 일부 자바 스크립트 function을 사용해야합니다. 사용자가 사진을 미리 볼 수있게하고 사진을 변경하기 위해 컨트롤을 사용하려면 해당 이미지/functioncanvas에 넣어야합니다.

SO postcanvas에서 png를받는 방법을 보여줍니다. 사용자가 사진을 마무리하고 저장 될 서버로 사진을 보내야하는 저장 버튼이 있어야한다고 제안합니다. 다운로드 기능은 해당 그림을 다운로드해야합니다.

나는 이것을 다르게 처리했다.canvas을 미리보기로 사용하고 사용자가 설정을 완료하면 JSON으로 서버에 보내져 최종 사진이 만들어집니다.