Question

我需要动态地将画布图像数据上传到服务器（数据库），即我需要创建一个表单并使用input = file，并在没有任何用户交互的情况下发布图像数据。

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 Documentation for CanvasRenderingContext2D.getImageData()。

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

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

Answer 4

以下是我去年写的Canvas Signature Demo在线签名应用的演示。这具有仅将矢量数据发布到服务器的优点。使用所有路径信息，您还可以应用平滑算法或在持久化之前根据需要进行缩放。

<canvas id="signature" width="300" height="100"></canvas>
<form method="post" id="signature_form" action="signing.aspx">
<input type="hidden" name="paths" id="paths"/>
    <p><label>Cover #</label> <input type="text" id="covernumber" name="covernumber"/>
    <input type="submit" id="save" value="Save"/>
</form>

我将路径数据存储到隐藏字段中并将其发布到服务器。

signature.js核心逻辑如下：

mouseDown: function(event) {
    var point = this.getRelativePoint(event);
    this.paths.push( [ point ] ); 
    this.ctx.fillRect(point.x,point.y,1,1);
    this.penDown = true;
    this.updateField();
},
mouseUp: function(event) {
    this.penDown = false;
    this.ctx.closePath();
    if ( Prototype.Browser.IE && event.srcElement.tagName != "INPUT" ) {
        var ver = getInternetExplorerVersion();
        if ( ver >= 8 && ver < 9 && document.selection ) {
            document.selection.empty();
        }
    }
},
mouseMove: function(event) {
    if ( this.penDown ) {
        var lastPath = this.paths[ this.paths.length - 1 ];
        var lastPoint = lastPath[ lastPath.length - 1 ];
        var point = this.getRelativePoint(event);
        lastPath.push( point );
        this.ctx.strokeStyle = "#000000";
        this.ctx.beginPath();
        this.ctx.moveTo(lastPoint.x,lastPoint.y);
        this.ctx.lineTo(point.x, point.y);
        this.ctx.stroke();
        this.ctx.closePath();
        this.updateField();
    }
},
updateField: function() {
    if ( this.field ) {
        this.field.value = this.paths.toJSON();
    }
}

这是我的相关服务器端.Net代码（C＃）。

if ( Request("paths") ) {
    var objBitmap : Bitmap = new Bitmap(300, 100);
    var objGraphics : Graphics = Graphics.FromImage(objBitmap);
    objGraphics.Clear(Color.Transparent);
    objGraphics.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;

    var paths:Array = eval(Request("paths")) || [];
    var p : int;
    var q : int;
    var path : Array;

    for ( p = 0; p< paths.length; p++ ) {
        var path = paths[p];
        if ( path.length == 1 ) {
            objGraphics.DrawRectangle(new Pen(Color.Black), path[0].x, path[0].y, 1, 1);
        } else {
          for ( q = 1; q<path.length; q++ ) {
              var prev = path[q-1];
              var curr = path[q];
              objGraphics.DrawLine(new Pen(Color.Black), parseInt(prev.x),parseInt(prev.y),parseInt(curr.x),parseInt(curr.y));
          }
        }
    }
    objBitmap.Save("C:\\temp\\" + Request("covernumber") + ".png", ImageFormat.Png);
    objBitmap.Dispose();
    objGraphics.Dispose();
}

Answer 5

您可以以数据的形式获取图像数据：url，这仅适用于Firefox和Opera。

http://cow.neondragon.net/index.php/681-Canvas-Todataurl

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

5 个答案: