将'canvas'图像数据上传到服务器

10 浏览
0 Comments

将'canvas'图像数据上传到服务器

我需要即时将画布图像数据上传到服务器（数据库），也就是说，我需要创建一个带有input=file的表单，并且在没有任何用户交互的情况下上传图像数据。

0

3 答案

0 Comments

问题出现的原因：

用户想要将Canvas图像数据上传到服务器，但是不清楚如何实现。尝试使用不同的选项进行Ajax请求，但是无法正确指定图像数据。

解决方法：

1. 使用ctx.getImageData()获取图像数据，并使用Ajax将其发送到服务器。

2. 在IE中，可以使用fxCanvas而不是ExCanvas来实现相同的功能。使用函数toDataURL("image/png", function (fxUrl) {...})。

3. 将图像数据转换为base64格式进行上传。

0
0 Comments

问题的原因是在将canvas的图像数据上传到服务器时，可能会遇到以下问题：

1. 图像数据过大，可能会被服务器限制或截断。

2. 直接发送原始图像数据不够带宽高效。

解决方法如下：

1. 使用base64编码对图像数据进行编码，以便在post请求中发送。

2. 在服务器端，接收到编码后的图像数据后，进行解码并转换为图像。

具体代码如下：

import re 
import base64
class TnUploadHandler(webapp.RequestHandler):
    dataUrlPattern = re.compile('data:image/(png|jpeg);base64,(.*)$')
    def post(self):
        uid = self.request.get('uid')
        img = self.request.get('img')
        imgb64 = self.dataUrlPattern.match(img).group(2)
        if imgb64 is not None and len(imgb64) > 0:
            thumbnail = Thumbnail(
                    uid = uid, img = db.Blob(base64.b64decode(imgb64)))
            thumbnail.put()

在客户端，发送数据的示例代码如下：

$.post('/upload',
        {
            uid : uid,
            img : canvas.toDataURL('image/jpeg')
        },
        function(data) {});

需要注意的是，服务器对post请求的数据长度可能有限制，可以参考服务器的配置或配额限制来解决。此外，可以将原始图像数据转换为dataUrl以提高带宽利用率。

最后，作者提到了之前使用类似方法将绘图数据发送到服务器并在服务器端重建的经验，并表示可以提供相关代码。另外，也某些情况下了发送原始图像数据的效率问题，建议转换为dataUrl再发送。

0
0 Comments

问题的原因是需要将画布（canvas）中的图像数据上传到服务器。解决方法是使用JavaScript将图像以base64数组的形式发送给服务器，然后使用PHP进行解码并保存为图像文件。

在客户端（JavaScript）中，使用canvas.toDataURL("image/png")将画布中的图像转换为base64数组，并通过$.post()方法将图像发送给服务器。

在服务器端（PHP）中，首先通过$_POST['img']获取接收到的图像数据，然后使用str_replace()方法去除base64数组中的头部信息。接着使用base64_decode()方法将base64数组解码为二进制数据，并将其保存为图像文件。

以上是解决将画布图像数据上传到服务器的方法。通过这种方式，可以将画布中的图像保存为服务器上的图像文件。

0