How to save a html5 canvas.toDataURL as a png file on the server using Seaside

问题

I have an image that users can annotate on the browser. I can access the image using

canvas.toDataURL()

...I'd like to add a 'save' option for the user to save the image on the server.

This question has been answered for php...

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

...what I need is a Seaside callback with the PNG file content.

Is there a way to do this in Seaside?

Johan pointed out that the mine type declaration has to be removed from the value string. This works in VW... (with string hack to remove 'data:image/png;base64,')

  
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:

Depending on how you want your website to behave, I guess there are multiple ways of doing it. Here is the raw sample of one possibility I can think of using a jQuery ajax callback:

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

I did not test this myself. Maybe the filestream needs to be sent the #binary message to make a correct png file. Let me know if there are troubles.

Hope it helps.

回答2:

Does the file-upload section in the Seaside book solve your problem? Taking the code from the book:

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 ]

I've also published a blog post about how to manage file uploads in a production environment using Seaside and Nginx that may be of interest.

来源：https://stackoverflow.com/questions/6835837/how-to-save-a-html5-canvas-todataurl-as-a-png-file-on-the-server-using-seaside

标签

seaside