Как сохранить html5 canvas.toDataURL в виде файла png на сервере с помощью Seaside - PullRequest
Новая
       14

Как сохранить html5 canvas.toDataURL в виде файла png на сервере с помощью Seaside

1 голос
/ 26 июля 2011

У меня есть изображение, которое пользователи могут комментировать в браузере.Я могу получить доступ к изображению, используя 

canvas.toDataURL()

... Я хотел бы добавить опцию «Сохранить», чтобы пользователь мог сохранить изображение на сервере.

Этот вопрос былответил за php ... 

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

... мне нужен Seaside callback с содержимым файла PNG.

Есть ли способ сделать это в Seaside?

Йохан указал, что объявление типа mine должно быть удалено из строки значения.Это работает в VW ... (со строкой взлома для удаления '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()')

Ответы [ 2 ]

1 голос
/ 27 июля 2011

В зависимости от того, как вы хотите, чтобы ваш сайт вел себя, я думаю, есть несколько способов сделать это.Вот пример одной возможности использования обратного вызова 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.Дайте мне знать, если есть проблемы.

Надеюсь, это поможет.

0 голосов
/ 27 июля 2011

Решает ли ваша проблема раздел 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 ]

Я также опубликовал пост в блоге о том, как управлять загрузкой файлов в производственной среде с использованием Seaside и Nginx , которые могут представлять интерес.

...