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

Question

我需要在画布上的图像数据上传到服务器(数据库)上的苍蝇,也就是,我需要创建一个表单,并与输入=文件,无需任何用户交互后的图像数据.

Answer 1

FWIW,这就是我的工作方式.

我的服务器位于谷歌应用引擎中.我使用jQuery.post将canvas.toDataURL()的输出作为post请求的一部分发送.数据URL是base64编码的图像数据.所以在服务器上我解码它并将其转换为图像

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) {});

这可能不是最好的方法,但它确实有效.

Answer 2

您不需要文件输入,只需获取数据ctx.getImageData()并使用Ajax将其发布到服务器.

请参阅MDN文档CanvasRenderingContext2D.getImageData().

但即使使用,您也无法在IE中获取图像数据ExCanvas.

Answer 3

这是我解决这个问题的方法.使用JavaScript将图像作为base64数组发布,然后使用PHP解码并将其保存为图像.

客户端(JavaScript):

$.post('/ajax/uploadthumbnail',
    {
        id : id,
        img : canvas.toDataURL("image/png")
    }, function(data) {
        console.log(data);
    });

服务器端(PHP):

$img = $_POST['img'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = $_SERVER['DOCUMENT_ROOT'] . '/images/some_name.png';
file_put_contents($file, $data);