Carga de datos de imagen 'canvas' en el servidor

Question

Necesito cargar los datos de imagen del lienzo en el servidor (base de datos) sobre la marcha, es decir, necesito crear un formulario y con una entrada = archivo, y publicar los datos de imagen sin ninguna interacción del usuario.

Answer 1

No es necesario un archivo de entrada, acaba de obtener los datos con ctx.getImageData() y que lo ponga al servidor con el Ajax.

Ver el MDN Documentation for CanvasRenderingContext2D.getImageData().

Pero no podrá obtener los datos de imagen en IE, incluso con ExCanvas.

Answer 2

Puede obtener los datos de la imagen en forma de datos: url, esto solo funciona en Firefox y Opera hasta ahora.

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

Answer 3

FWIW, así es como lo conseguí trabajando.

Mi servidor está en el motor de la aplicación de google. Envío el resultado de canvas.toDataURL() como parte de una solicitud posterior usando jQuery.post. La URL de datos es datos de imagen codificados en base64. Así en el servidor que descodificarlo y convertirlo en la imagen

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

Desde el cliente que envío los datos de la siguiente manera:

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

esto puede no ser la mejor manera de hacerlo, pero funciona.

Answer 4

Aquí hay una demostración de una aplicación de firma en línea que escribí el año pasado Canvas Signature Demo. Esto tiene la ventaja de publicar solo los datos vectoriales en el servidor. Con toda la información de ruta, también puede aplicar algoritmos de suavizado o escalarla según sea necesario antes de continuar.

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

Guardo los datos de la ruta en un campo oculto y los publico en el servidor.

signature.js lógica de la base de abajo:

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

Aquí está mi código .Net lado del servidor correspondiente (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

Así es como he resuelto esto. Publicando la imagen como una matriz base64 usando JavaScript y luego decodificándola y guardándola como una imagen usando PHP.

lado del cliente (JavaScript):

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

lado del servidor (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);