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

问题描述

我有一张图片，用户可以在浏览器上注释.我可以使用

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.

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

This question has been answered for php...

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

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

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

在海边有办法吗?

Johan指出，必须从值字符串中删除地雷类型声明.这适用于大众...(使用字符串hack删除"data:image/png; base64")

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

推荐答案

根据您希望网站的行为方式，我猜有多种实现方式.这是我可以想到的使用jQuery ajax回调的一种可能性的原始示例:

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

我自己没有对此进行测试.可能需要向文件流发送#binary消息以制作正确的png文件.让我知道是否有麻烦.

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.

希望有帮助.

这篇关于如何使用Seaside在服务器上将html5 canvas.toDataURL保存为png文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！