'キャンバス'画像データをサーバーにアップロード

Question

キャンバス画像データをサーバー（データベース）にアップロードする必要があります。つまり、フォームと入力=ファイルを作成して画像データをポストする必要がありますユーザーの介入なしに

Answer 1

あなただけのctx.getImageData()を使用してデータを取得し、Ajaxを使ってサーバーにそれを投稿し、ファイルの入力は必要ありません。

MDN Documentation for CanvasRenderingContext2D.getImageData()を参照してください。

ExCanvasであっても、IEで画像データを取得することはできません。

Answer 2

画像データをdata：urlの形式で取得できます。これは、これまでのところFirefoxとOperaでのみ機能します。

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

Answer 3

FWIW、これは私がそれを動作させる方法です。

私のサーバーはGoogleアプリケーションエンジンです。私はjQuery.postを使用してpost要求の一部としてcanvas.toDataURL（）の出力を送ります。データ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 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

これはどのように私がこれを解決したかです。 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);