web-dev-qa-db-ja.com

「キャンバス」画像データをサーバーにアップロードする

キャンバスイメージデータをその場でサーバー（データベース）にアップロードする必要があります。つまり、フォームを作成し、input = fileを使用して、ユーザーの操作なしでイメージデータをポストする必要があります。

javascripthtmlcanvas
38
user192318

ファイル入力は不要で、ctx.getImageData()でデータを取得し、Ajaxでサーバーに投稿するだけです。

CanvasRenderingContext2D.getImageData()のMDNドキュメント を参照してください。

ただし、ExCanvasを使用してもIEで画像データを取得することはできません。

11
Fabien Ménager

FWIW、これは私がそれを機能させた方法です。

私のサーバーはGoogle App Engineにあります。 canvas.toDataURL（）の出力をjQuery.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) {});

これは最善の方法ではないかもしれませんが、機能します。

35
Jayesh

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

これが昨年書いたオンライン署名アプリのデモです 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();
}
3
B2K

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

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

0
Jeffrey Aylesworth