Локальное сохранение data:url изображения PNG с помощью Google App Engine

Я использую Google App Engine (python) и имею данные: URL-адрес изображения PNG, доступного на сервере. Изображение PNG никогда не было в файле, так как оно было сгенерировано из некоторого кода холста с использованием toDataUrl() и отправлено на сервер с помощью ajax. Я хотел бы разрешить пользователю нажимать кнопку и иметь возможность выбрать имя файла и локально сохранить изображение PNG. Диалоговое окно «Сохранить как» предоставит имя файла по умолчанию.png. Целевой браузер — FireFox. Я предоставил пример кода, который не работает. В stackoverflow есть несколько вопросов, похожих на этот, но каждый из них немного отличается.

Я устанавливаю расположение содержимого как вложение с предложенным именем файла. Я установил тип содержимого заголовка в application/octet-stream. Но я не получаю диалоговое окно «Сохранить как». Что мне не хватает?

Файл app.yaml является стандартным

application: saveas
version: 1
runtime: python
api_version: 1

handlers:
- url: /.*
  script: main.py

index.html выглядит следующим образом:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8"/>

<script>

function saveAsPng()
{
var alldata;
var httpRequest;
var response;
var myheaders;

httprequest = new XMLHttpRequest();

if ( !httprequest )
   {
   alert("In saveAsPng, XMLHttpRequest failed.");
   return;
   }

/* Make this a json string */
alldata = JSON.stringify("no data");

try
   {
   httprequest.open('POST', '/handlebitmap', true);
   httprequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   httprequest.setRequestHeader("Content-length", alldata.length);
   httprequest.setRequestHeader("Connection", "close");
   httprequest.onreadystatechange = function() 
      {
      if ( httprequest.readyState == 4 )
         {
         if (httprequest.status == 200) 
            {
            /* a status of 200 is good. */
            response = null;
            try 
               {
               response = JSON.parse(httprequest.responseText); 
               } 
            catch (e) 
               {
               response = httprequest.responseText;
               }

            if ( response == "error" )
               {
               alert("In saveAsPng callback, response == error");
               return false;
               }
            else
               {
               /* This is the successful exit. */

               //alert("response = " +response);

               window.location.href = response;   

               return true;
               }
            }
         else
            {
            /* httprequest.status was not 200, so must be an error. */
            alert("saveAsPNG callback, status = " +httprequest.status);
            return false;
            }

         }   /* End of if where readyState was 4. */

      }   /* End of the callback function */

   /* Make the actual request */
   httprequest.send(alldata);
   }
catch(e)
   {
   alert("In saveAsPng, Can't connect to the server");
   }

}   /* End of the saveAsPng function */

Код питона выглядит следующим образом:

# !/usr/bin/env python

import os
import base64

from google.appengine.ext import webapp
from google.appengine.ext.webapp import template
from google.appengine.ext.webapp import util

class MainPage(webapp.RequestHandler):
    """ Renders the main template."""
    def get(self):
        template_values = { 'title':'Test Save As PNG', }
        path = os.path.join(os.path.dirname(__file__), "index.html")
        self.response.out.write(template.render(path, template_values))

class BitmapHandler(webapp.RequestHandler):
    """ Shows the Save As with a default filename. """
    def post(self):
        origdata = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
        urldata = "iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
        decodeddata = base64.b64decode(urldata) 
        self.response.headers['Content-Type'] = 'application/octet-stream'
        self.response.headers['Content-Disposition'] = 'attachment; filename="untitled.png"'
        self.response.out.write(decodeddata)

def main():
    app = webapp.WSGIApplication([
        ('/', MainPage),
        ('/handlebitmap',BitmapHandler),
        ], debug=True)
    util.run_wsgi_app(app)

if __name__ == '__main__':
    main()

{{title}}




Ответы (1)


Возможно, вы хотите изменить «пост определения» на «получение определения»? Я только что попробовал ваш образец, и после этого изменения он, похоже, работал, как и ожидалось (попробовал только /handlebitmap)

person Bemmu    schedule 24.04.2012
comment
Я попробовал GET вместо POST, но окончательный результат всегда такой: localhost:8080/%ED%BF%BDPNG HTTP/1.0 404 Not Found. Я не отправляю никаких данных на сервер, просто получаю data: url обратно. Должно быть, я делаю что-то принципиально неправильное. - person RFF; 24.04.2012