2011-07-26 2 views
1

사용자가 브라우저에 주석을 추가 할 수있는 이미지가 있습니다. 나는 서버에서 이미지를 저장하는 사용자에 대한 '저장'옵션을 추가 할 ...Seaside를 사용하여 서버에 html5 canvas.toDataURL을 png 파일로 저장하는 방법

canvas.toDataURL() 

사용하여 이미지에 액세스 할 수 있습니다. 내가 필요한

이 질문은 PHP에 대한 대답했습니다 ...

file_put_contents('test.png', base64_decode(substr($data, strpos($data, ",")+1))); 

은 ... PNG 파일의 내용으로 해변 콜백입니다.

Seaside에서이 작업을 수행 할 수있는 방법이 있습니까?

Johan은 광산 유형 선언을 값 문자열에서 제거해야한다고 지적했습니다. 이것은 ... VW에서 작동 (문자열을 제거하기 위해 해킹 '데이터 : 이미지/PNG, 64 기수를')

 
html jQuery ajax 
    callback: [:value | 
    | writestream string |   
    writestream := ('c:\data\sketchpad_image.png' asFilename withEncoding: #binary) writeStream. 
    string := value copyFrom: 23 to: value size. 
    [writestream nextPutAll: (Seaside.GRPlatform current base64Decode: string) asByteArray] 
     ensure: [writestream close] ] 
    value: (Javascript.JSStream on: 'sketchpadCanvas.toDataURL()') 

답변

1

을 당신이 당신의 웹 사이트가 작동하는 방법에 따라, 나는 그 일을 여러 가지 방법이 있습니다 생각 . 다음은 jQuery 아약스 콜백을 사용하여 생각할 수있는 하나의 가능성을 보여주는 샘플입니다.

html jQuery ajax 
    callback: [:value | (FileStream newFileNamed: 'test.png') 
           nextPutAll: (value copyFrom: ((value indexOf: $,) + 1 to: value size) base64Decoded ] 
    value: (JSStream on: 'canvas.toDataURL()') 

직접 테스트하지 않았습니다. 어쩌면 파일 스트림에 올바른 png 파일을 만들기 위해 #binary 메시지를 보내야 할 수도 있습니다. 문제가 있으면 알려주세요.

희망이 있습니다.

+0

또한 해변의 메일 링리스트에서 언급했듯이 MIME 선언 다음에 'value'부분 문자열을 가져와야합니다. 이를 반영하기 위해 위 코드 샘플을 수정했습니다. –

0

해변 도서의 file-upload 섹션에서 문제가 해결 되었습니까? 이 책의 코드를 촬영 :

UploadForm>>renderContentOn: html 
    html form multipart; with: [ 
     html fileUpload 
      callback: [ :value | self receiveFile: value ]. 
     html submitButton: 'Send File' ] 

UploadForm>>receiveFile: aFile 
    | stream | 
    stream := (FileDirectory default directoryNamed: 'uploads') 
     assureExistence; 
     forceNewFileNamed: aFile fileName. 
    [ stream binary; nextPutAll: aFile rawContents ] 
     ensure: [ stream close ] 

을 나는 또한 관심이있을 수있는 blog post about how to manage file uploads in a production environment using Seaside and Nginx을 발표했습니다.

+0

파일 업로드 코드가 적용되지 않는다고 생각합니다. #fileUpload 및 Canvas 콘텐츠가 다른 동물 인 것으로 보입니다. 캔버스 내용으로 fileUpload 콜백을 사용하는 방법이 있습니까? Johan의 jQuery 콜백 (JSStream on : 'canvas.toDataURL()')은 유망한 것처럼 보입니다 (일부 VW 인코딩 문제가 해결되면). –

+0

나는 오해했다 - 이제 클라이언트쪽에 비트가 있다는 것을 알았다. Johan이 언급 한 것처럼 jQuery를 사용하여 서버로 보낼 수 있습니다. 아마 위의'# receiveFile' 메소드는 파일에 이진 비트를 쓰는 템플릿 역할을 할 수 있습니다 –

관련 문제