Div 콘텐츠를 서버에 이미지로 저장

Question

저는 VB에서 jQuery와 .Net을 조금 배웠습니다. 기본적으로 div를 추가하고 tshirt 위에 텍스트, 이미지 등을 추가하는 제품 사용자 정의 도구를 만들었습니다.

중요한 무대에 갇혀 있습니다!

div에 적용된 CSS도 고려하여 텍스트와 이미지의 모든 div를 하나의 평면 이미지로 변환하는 div의 내용을 변환 할 수 있어야합니다.

서버에있는 브라우저의 콘텐츠를 캡처하여 저해상도로 가능할 수있는 것들에 대해 들어 보았습니다.하지만 약간 귀찮은 것 같습니다. 고해상도의 이미지를 만드는 것이 좋을 것입니다.

html5 캔버스로 변환하여 html5 캔버스로 변환하는 것에 대해 들었습니다 ...하지만 너무 심해서 브라우저에 대한 지원이 문제가됩니다.

.NET에서 가능합니까?

아마도 자바 스크립트로 뭔가 할 수 있을까요?

올바른 방향으로 도와 주시면 감사하겠습니다!

편집 :

나는 아마도 내가이 두 가지 솔루션을 할 수 생각하고 있어요. 이상적으로 나는 웹 사이트에 표시하기위한 정상적인 res jpg/png 등으로 끝날 것이지만 인쇄 준비가 된 고해상도 파일 또한 매우 바람직 할 것입니다.

포스트 스크립트 프린터 - 나는 그것을 들어 봤지만 초보자를 위해서 (특히 위키 블랙 아웃과 함께) 이해하기에 좋은 자원을 찾기 위해 고심하고 있습니다. 아마도 내 div 콘텐츠에서 html 페이지를 만들어 EPS 파일로 인쇄하여 보낼 수 있습니다. 누구든지이 좋은 자습서를 알고 있습니까?

Answer 1

우리는 이것을 약 10 년 전에했습니다. 흥미롭게도, 사용 가능한 기술은 실제로 많이 변경되지 않았습니다. http://blog.spreadshirt.net/uk/2007/11/27/everyones-a-designer-free-designers-for-premium-partners/

은 그냥 라이센스 : -

갱신 우수 답변은

Spreadshirt는 제품을 라이센스. 실제 그래픽을 조작하고 인쇄물을 제작하지 않는 한 직접하지 마십시오. 나는 오늘날의 세계에서 그들이했던 것을 복제하기 위해 약 4,000에서 5,000 시간의 개발 시간을보고 있다고 말하고 싶습니다.두 계층의 상위 계층 사용자가 작업을 수행하는 경우입니다.

---

짧은 대답 : 당신은 HTML로 할 수 없습니다.

는 약간 이상 대답 : 당신이 생산 형 인쇄에 필요한 해상도의 수준을 얻을 수없는 화면 캡 클라이언트 측을하고 있기 때문에이 부분에서 작동하지 않습니다
. 현대적인 화면 해상도는 일반적으로 100ppi입니다. 괜찮은 인쇄물을 얻으려면 밀도가 3 배에서 6 배 사이가되어야합니다. 그렇지 않으면 당신은 많은 pixelation을해야하고 그것은 나오는 때 일반적으로 쓰레기처럼 보일 것입니다.

다른 답 :
가장 좋은 방법은 SVG (확장 가능한 벡터 그래픽) 같은 것을 활용하고 브라우저에 표면 그리기의 유형을 제공하는 것입니다. 플래시 (Spreadshirt.com에서 사용) 또는 Silverlight (권장하지 않음)를 사용하여 여러 가지 방법이 있습니다. 우리는 플래시를 사용했고 꽤 좋았습니다.

HTML 5를 사용하여 벗어날 수 있어야합니다. 어떤 경로를 선택하든 복잡 할 것입니다.

사용자가 자신의 그림에 만족하고 그것을 인쇄하고 싶으면 최종 파일을 만들고 포스트 스크립트 또는 T 셔츠 공급자에게 필요한 형식으로 변환하는 프로세스를 실행합니다. 변환기 (일명 립 소프트웨어)는 개발하는 데 오랜 시간이 걸리거나 많은 돈을 들여야합니다. 하나를 선택하십시오. (도움이되는 힌트 : 그것을 사십시오. 그 때, 우리는 약 20,000 미국 달러를 썼고 개발하는 것보다 훨씬 저렴했습니다).

물론 이것은 색상 일치 및 교정과 같은 문제를 무시합니다. 이것은 실제로 우리의 주요 문제였습니다. 모든 사람의 모니터는 약간 다르며 한 컴퓨터에서 빨간색처럼 보이는 것은 다른 컴퓨터에서 분홍색입니다.

약간의 배경을 위해 맞춤 포장지를 만들고있었습니다. 사용자가 텍스트를 추가하거나 도서관에서 선택한 이미지를 업로드하거나 자신의 이미지를 업로드하고 패턴을 선택했습니다. 우리 지문은 대형 포맷 HP 잉크젯 프린터 (36 인치 및 60 인치)에서 나왔습니다. 궁극적으로 우리는 개발 자원에 단지 $ 200k에서 $ 300k를 썼습니다. 불행하게도 우리가 판매해야하는 가격대는 시장에서 너무 높았습니다.

Answer 2

ajax 호출을 사용하여 사용자 생성 콘텐츠로 전체 div를 서버로 다시 보냅니다. 'HtmlTextWriter'클래스를 사용하여 서버에 HTML 문서를 생성하십시오. 은 그럼 당신은 같은 외부 도구를 사용하여 해당 HTML 파일을 변환 할 수 있습니다

(1) http://www.officeconvert.com/products_website_to_image.htm#easyhtmlsnapshot

(2) 도구를 무료로하지 않습니다,하지만 당신은 서버에 새로운 프로세스를 생성하여 사용할 수 있습니다 http://html-to-image.acasystems.com/faq-html-to-picture.htm

.

Answer 3

일부 서버 측 도구를 사용할 수있는 경우 phantomjs을 확인하십시오. 이것은 페이지의 스크린 샷을 취할 수있는 headless webkit 브라우저입니다 (GUI는 없음). javascript API를 사용합니다. 트릭을해야합니다.

Answer 4

가장 좋은 옵션은 wkhtmltopdf입니다. wkhtmltoimage이라는 도구가 제공됩니다. QtWebKit (WebKit 렌더링 엔진의 Qt 포트)을 사용하여 웹 페이지를 렌더링하고 결과를 원하는 PDF 또는 이미지 형식으로 변환합니다. 모두 서버 측에서 처리됩니다.

WebKit을 사용하기 때문에 최신 브라우저처럼 모든 것을 렌더링합니다 (이미지, CSS, 심지어 자바 스크립트). 필자의 경우, 결과는 매우 만족스럽고 브라우저가 렌더링하는 것과 거의 동일합니다. Execute an external EXE with C#.NET