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

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

canvas.toDataURL()

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

На этот вопрос был дан ответ для php...

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

... что мне нужно, так это обратный вызов Seaside с содержимым файла PNG.

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

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

seaside
person Bob Nemec    schedule 26.07.2011    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

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

person Johan B    schedule 27.07.2011
comment
Кроме того, как мы отметили в списке рассылки seaside, вам нужно взять подстроку value после объявления mime. Я адаптировал пример кода выше, чтобы отразить это. - person Johan B; 28.07.2011

arrow_upward
0
arrow_downward

Решит ли вашу проблему раздел загрузка файлов в книге 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, которая может представлять интерес.

person Nick Ager    schedule 27.07.2011
comment
Я не думаю, что код загрузки файла применим. Кажется, что #fileUpload и содержимое холста — разные животные. Есть ли способ использовать обратный вызов fileUpload с содержимым холста? Обратный вызов jQuery Йохана с (JSStream on: 'canvas.toDataURL()') кажется многообещающим (после того, как будут решены некоторые проблемы с кодировкой VW). - person Bob Nemec; 27.07.2011
comment
Я неправильно понял - теперь я вижу, что у вас есть биты на стороне клиента. Как упоминает Йохан, вы можете отправить их на сервер с помощью jQuery. Возможно, описанный выше метод #receiveFile мог бы служить шаблоном для записи двоичных битов в файл. - person Nick Ager; 27.07.2011