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

发布于 2024-11-26 11:44:52 字数 839 浏览 0 评论 0原文

我有一张用户可以在浏览器上注释的图像。我可以使用...访问图像

canvas.toDataURL()

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

这个问题已经为 php 解答...

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

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

在海边有办法做到这一点吗？

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

原文

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()')

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

似狗非友 2024-12-03 11:44:52

根据您希望网站的行为方式，我想有多种方法可以实现。这是我能想到的使用 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 文件。如果有麻烦请告诉我。

希望有帮助。

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.

回复收藏 0 原文

指尖上的星空 2024-12-03 11:44:52

《Seaside》书中的文件上传部分是否可以解决您的问题？从书中获取代码：

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 ]

我还发布了博客文章有关如何使用 Seaside 和 Nginx 在生产环境中管理文件上传的信息，您可能会感兴趣。

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.

回复收藏 0 原文

~没有更多了~