Question

我有一个用户可以在浏览器上添加注释的图像。我可以使用

访问图像

canvas.toDataURL()

...我想为用户添加一个“保存”选项，以便将图像保存在服务器上。

这个问题已经回答了php ...

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

...我需要的是带有PNG文件内容的Seaside回调。

有没有办法在Seaside做到这一点？

Johan指出必须从值字符串中删除我的类型声明。这适用于大众...（使用字符串黑客删除'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()')

Answer 1

根据您希望网站的行为方式，我猜有多种方法可以实现。下面是我可以想到使用jQuery ajax回调的一种可能性的原始样本：

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

我自己没有测试过。可能需要向文件流发送#binary消息以生成正确的png文件。如果有麻烦，请告诉我。

希望它有所帮助。

Answer 2

Seaside书中的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。

如何使用Seaside将html5 canvas.toDataURL保存为服务器上的png文件

2 个答案: