Téléchargement de "toile" les données de l'image sur le serveur

Question

J'ai besoin de télécharger le canevas de l'image au serveur de données (base de données) à la volée, c'est à dire, j'ai besoin de créer un formulaire avec un input=fichier, et d'afficher les données d'image sans aucune interaction de l'utilisateur.

Answer 1

FWIW, c'est comment je l'ai eu à travailler.

Mon serveur est dans google app engine. - Je envoyer de la toile.toDataURL()'s de sortie dans le cadre de la requête post à l'aide de jQuery.post. Les données de l'URL est encodé en base64 des données d'image. Donc sur le serveur je le décoder et le convertir en image

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

Client-je envoyer les données comme ceci:

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

Cela peut ne pas être la meilleure façon de le faire, mais il fonctionne.

Answer 2

Vous n'avez pas besoin d'un fichier d'entrée, juste obtenir les données avec ctx.getImageData() et de les publier sur le serveur avec l'Ajax.

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#getImageData%28%29

Mais je dois vous dire que vous ne serez pas en mesure d'obtenir les données d'image dans IE, même avec ExCanvas.

Answer 3

Voici une démo en ligne de la signature de l'app que j'ai écrit l'année dernière Toile Signature de Démonstration. Cela a l'avantage d'afficher seulement le vecteur de données sur le serveur. Avec toutes les informations de chemin, vous pouvez également appliquer des algorithmes de lissage ou le redimensionner si nécessaire, avant de la persistance.

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

Je stocker le chemin d'accès des données dans un champ caché, et après que le serveur.

signature.js la logique de Base ci-dessous:

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

Voici mon pertinentes côté serveur .Net code (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 4

Vous pouvez obtenir les données d'image dans le formulaire de données: url, cela ne fonctionne que sous Firefox et Opéra jusqu'à présent cependant.

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