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

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 回调：[：值| |写流字符串 | writestream := ('c:\data\sketchpad_image.png' asFilename withEncoding: #binary) writeStream. string := value copyFrom: 23 to: 值大小。 [writestream nextPutAll: (Seaside.GRPlatform current base64Decode: string) asByteArray] 确保：[writestream close] ] 值：（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。