尝试提供最初由 canvas.toDataURL() 创建的 GAE 数据存储中存储的图像答案

【问题标题】：Trying to serve image stored in GAE Datastore originally created by canvas.toDataURL()尝试提供最初由 canvas.toDataURL() 创建的 GAE 数据存储中存储的图像
【发布时间】：2014-03-28 19:30:03
【问题描述】：

我有一个用户绘制的画布。

在我做的 JavaScript 中：

var data = canvas.toDataURL().substr(22);

// snipped code that sets up xhr POST to "d/"

var params = "img=" + encodeURIComponent(data);
xhr.send(params);

我用 substr(22) 去掉 "data:image/png;base64,"

然后在应用引擎中我这样做：

doodle.setProperty("img", new Text(req.getParameter("img")));

所以我将涂鸦实体的 img 属性设置为 canvas.toDataURL().substr(22)

现在，当我想检索图像时，我会这样做：

if (debugimg) {
    resp.setContentType("text/plain");
    resp.getWriter().print(((Text)groove.getProperty("img")).getValue());
}
else {
     resp.setContentType("image/png;base64");
     resp.getWriter().print(((Text)groove.getProperty("img")).getValue());
}

但对于我的一生，图像永远不会出现。

这是一个例子。这是我画的，可以保存并用 JavaScript 渲染。

https://yougotadoodle.appspot.com/d.jsp?id=1483002

如果我使用 debugimg，这就是正在保存的内容：

http://yougotadoodle.appspot.com/d?id=1483002&img=true&debugimg=true

但是当我尝试使用 setContentType("image/png;base64") 甚至只是 "image/png" 来提供它时，你会得到一张损坏的图片：

http://yougotadoodle.appspot.com/d?id=1483002&img=true

我尝试了一些不同的方法，包括不使用 substr(22)。有什么想法吗？

我尝试使用 Blob()，所以像这样存储它：

doodle.setProperty("img", new Blob(req.getParameter("img").getBytes()));

并像这样阅读它：

resp.getWriter().print(((Blob)groove.getProperty("img")).getBytes());

但这似乎吐出了这样的东西：

[B@1f11e0f

【问题讨论】：

标签： java javascript image google-app-engine canvas

【解决方案1】：

您必须先解码此字符串，然后才能将其用作image/png，因为它是 Base64 编码版本。

我在 Python 中对它进行了本地测试，您的 Hello SO! 在解码给定字符串后完美运行。我不确定如何在 Java 中执行此操作，但应该是 fairly easy。

【讨论】：

【解决方案2】：

这里有三个代码 sn-ps，它们通过 put 到 blob 属性在 JS 端 (jpg) 为我工作。可能不是最佳的，但它确实有效。 HTH。 -史蒂夫

创建画布渲染：

imgFinalData = canvas.toDataURL('image/jpg', 1.0);

POST 到 GAE 的设置变量：

f64 = imgFinalData.substr(imgFinalData.indexOf(',')+1).toString();

发布到 GAE（fd 是一个用于存储多个 POST 变量的数组）：

fd.push('bytes=' + escape(f64));
//Here is the call with fd that handles the post:
postXmlHttpRequest(url, fd.join('&'), handlePostFinal);

GAE 方面之一（Python）：

存储 POST 数据的属性（来自实体类的行）：

bytes = db.BlobProperty(required=True, indexed=False)

post 数据如何处理 b/4 put：

data = urllib.unquote(self.request.get('bytes'))

data = data.replace(' ','+')

bytes = base64.b64decode(data + '=' * (4 - len(data) % 4))

put 的实体语句内的属性行：

字节 = db.Blob(字节),

【讨论】：