html5 양식의 일부인 캔버스

Question

저는 아직이 프로젝트의 예비 단계를 파악하고 있으므로 기본 사항 인 경우 사과드립니다. 나는 html5 티셔츠를 만들어 웹 사이트 용 응용 프로그램을 디자인하고 셔츠 그래픽 필드에 기본 드래그 앤 드롭 입력, 셔츠 필드 내에서 크기 조정 및 이동을 수행하고 결국 일부 텍스트 입력 필드와 함께 제출합니다. 고객은 설계 한 셔츠를 지불하고 주문을 제출합니다. 저는 html5에 비교적 익숙하지 않습니다. 그리고 지금까지 캔버스와 드래그 앤 드롭 기능을 사용할 것이라고 생각했습니다. 내 질문은 내가 정말 고객이 일부 정보를 입력하고 일부 체크 박스 필드 등 텍스트 필드와 함께 가고 전체 주문의 일부로 제출할 필요가 있기 때문에 캔버스를 양식에 일부 포함시킬 수 있는지 양식의? 다시 말하지만, 이것이 기본이라면 나는 미안하다. 귀하의 의견을 보내 주셔서 감사합니다. 도움이되는 튜토리얼 등의 리드는 굉장합니다. 나는 잠시 동안 찾고 있었지만 정말로 내가 무엇을 찾고 있는지를 발견하지 못했습니다.

Answer 1

불행히도 입력 양식으로 <canvas>을 사용할 수 없지만 캔버스에 그려 넣은 다음 도면 작업을 완료 한 후 내용을 <image>으로 "내보내기"하십시오. 다행스럽게도 이미지를 양식으로 사용할 수 있습니다.

이미지에 캔버스 내용을 그리는 표준 방법은 canvas.toDataURL("image/png"); 방법을 사용하는 것입니다. 코드로 번역

는

, 이것은 아래의 조각 같은 것 :

var canvasURL = canvas.toDataURL("image/png"); 
var img = document.getElementById("image").src = canvasURL; 

및 HTML에 당신은 단 하나의 보안 우려가 image

<form> 
    <input type="image" id="image" onsubmit="submit();"> 
</form> 

아이디로 <input> 양식을 정의합니다 캔버스에 그려진 이미지는 동일한 웹 서버에서 실행되는 코드와 동일한 도메인으로 호스팅되어야합니다. 이 조건이 충족되지 않으면 SECURITY_ERR 예외가 발생합니다.

당신은 이미지와 캔버스 조작을위한 더 강력한 라이브러리가 필요하면 내가 캔버스와 이미지로 작업을 용이하게이 라이브러리를 추천 할 수 있습니다 : http://www.nihilogic.dk/labs/canvas2image/