base64 이미지 캔버스에서 파일 업로드 HTML 컨트롤

Question

캔버스 (canvas.toDataURL("image/png"))를 통해 내 보낸 이미지를 서버 측 기술 (즉, 자바 스크립트)을 사용하지 않고 프로그래밍 방식으로 업로드 컨트롤 <input type="file" />에 바인딩 할 수 있습니까?

기본적으로 클라이언트에는 <form>이 있고 다른 필드에는 POST의 파일 업로드 HTML 컨트롤에 추가 할 수있는 편집 가능한 이미지 필드가 있어야합니다. 나는 기존의 <form>가 제 3 자이므로 서버 측 로직을 수정할 수없고 클라이언트가 제 3자를 유지해야한다고 주장하기 때문에 다른 방법으로는 할 수 없다. <form>.

그래서 저는 클라이언트로부터 특별한 소원이 있습니다. 그리고 이것이 가능하면 집회를하지 않습니다. 도움말/포인터/도움을 주시면 감사하겠습니다. 감사합니다.

편집 : 아마 솔루션은 아마 당신이 FormData을 사용하여 달성 할 수 IE7

포함한

Answer 1

까지 크로스 브라우저를 작동해야 함을 언급한다. BlobBuilder을 사용하여 캔버스 이미지를 이진 파일로 변환해야합니다. FormData로 당신은 할 수 있습니다 : 당신은이 방법에 대한 자세한 내용을보실 수 있습니다 여기에

var dataURL = canvas.toDataURL('image/jpeg', 0.5), 
    blob = dataURItoBlob(dataURL), 
    fd = new FormData(document.getElementById('form')); 
fd.append("canvasImage", blob); 

Convert Data URI to File then append to FormData