How do I pass the image created by todataurl.js to MySQL?

Question

I have a script that captures a signature via touch screen or mouse pad and I want to take that image that the todataurl.js creates and upload it to a folder on my server so I can store the path to the image. But I don't know how to get the image from the todataurl.js script.

here is the HTML and javascript I'm using. Also this is a prototype script and there is no documentation on it whatsoever! I tried to put this as a jsFiddle but couldn't get it to function on the site. The script works fine, I just can't figure out how to get the image to upload. All I get now when I click on the get signature button is the name of the the image field in MySQL.

HTML



  
    
    
    
  
  
    
      
        
      
      
      


      
      
      

      Saved Image

signature.js code:

function signatureCapture() {
  var canvas = document.getElementById("newSignature");
  var context = canvas.getContext("2d");
  canvas.width = 276;
  canvas.height = 180;
  context.fillStyle = "#fff";
  context.strokeStyle = "#444";
  context.lineWidth = 1.5;
  context.lineCap = "round";
  context.fillRect(0, 0, canvas.width, canvas.height);
  var disableSave = true;
  var pixels = [];
  var cpixels = [];
  var xyLast = {};
  var xyAddLast = {};
  var calculate = false;
  {   //functions
    function remove_event_listeners() {
      canvas.removeEventListener('mousemove', on_mousemove, false);
      canvas.removeEventListener('mouseup', on_mouseup, false);
      canvas.removeEventListener('touchmove', on_mousemove, false);
      canvas.removeEventListener('touchend', on_mouseup, false);
      document.body.removeEventListener('mouseup', on_mouseup, false);
      document.body.removeEventListener('touchend', on_mouseup, false);
    }
    function get_coords(e) {
      var x, y;
      if (e.changedTouches && e.changedTouches[0]) {
        var offsety = canvas.offsetTop || 0;
        var offsetx = canvas.offsetLeft || 0;
        x = e.changedTouches[0].pageX - offsetx;
        y = e.changedTouches[0].pageY - offsety;
      } else if (e.layerX || 0 == e.layerX) {
        x = e.layerX;
        y = e.layerY;
      } else if (e.offsetX || 0 == e.offsetX) {
        x = e.offsetX;
        y = e.offsetY;
      }
      return {
        x : x,
        y : y
      };
    };
    function on_mousedown(e) {
      e.preventDefault();
      e.stopPropagation();
      canvas.addEventListener('mouseup', on_mouseup, false);
      canvas.addEventListener('mousemove', on_mousemove, false);
      canvas.addEventListener('touchend', on_mouseup, false);
      canvas.addEventListener('touchmove', on_mousemove, false);
      document.body.addEventListener('mouseup', on_mouseup, false);
      document.body.addEventListener('touchend', on_mouseup, false);
      empty = false;
      var xy = get_coords(e);
      context.beginPath();
      pixels.push('moveStart');
      context.moveTo(xy.x, xy.y);
      pixels.push(xy.x, xy.y);
      xyLast = xy;
    };
    function on_mousemove(e, finish) {
      e.preventDefault();
      e.stopPropagation();
      var xy = get_coords(e);
      var xyAdd = {
        x : (xyLast.x + xy.x) / 2,
        y : (xyLast.y + xy.y) / 2
      };
      if (calculate) {
        var xLast = (xyAddLast.x + xyLast.x + xyAdd.x) / 3;
        var yLast = (xyAddLast.y + xyLast.y + xyAdd.y) / 3;
        pixels.push(xLast, yLast);
      } else {
        calculate = true;
      }
      context.quadraticCurveTo(xyLast.x, xyLast.y, xyAdd.x, xyAdd.y);
      pixels.push(xyAdd.x, xyAdd.y);
      context.stroke();
      context.beginPath();
      context.moveTo(xyAdd.x, xyAdd.y);
      xyAddLast = xyAdd;
      xyLast = xy;
    };
    function on_mouseup(e) {
      remove_event_listeners();
      disableSave = false;
      context.stroke();
      pixels.push('e');
      calculate = false;
    };
  }
  canvas.addEventListener('touchstart', on_mousedown, false);
  canvas.addEventListener('mousedown', on_mousedown, false);
}
function signatureSave() {
  var canvas = document.getElementById("newSignature");
  // save canvas image as data url (png format by default)
  var dataURL = canvas.toDataURL("image/png");
  document.getElementById("saveSignature").src = dataURL;
};
function signatureClear() {
  var canvas = document.getElementById("newSignature");
  var context = canvas.getContext("2d");
  context.clearRect(0, 0, canvas.width, canvas.height);
}

todataurl.js code:

Number.prototype.toUInt=function(){ return this<0?this+4294967296:this; };
Number.prototype.bytes32=function(){
  return [(this>>>24)&0xff,(this>>>16)&0xff,(this>>>8)&0xff,this&0xff];
};
Number.prototype.bytes32sw=function(){
  return [this&0xff,(this>>>8)&0xff,(this>>>16)&0xff,(this>>>24)&0xff];
};
Number.prototype.bytes16=function(){
  return [(this>>>8)&0xff,this&0xff];
};
Number.prototype.bytes16sw=function(){
  return [this&0xff,(this>>>8)&0xff];
};
Array.prototype.adler32=function(start,len){
  switch(arguments.length){ case 0:start=0; case 1:len=this.length-start; }
  var a=1,b=0;
  for(var i=0;i>> 1):c >>> 1;
      table[n] = c.toUInt();
    }
    arguments.callee.crctable=table;
  }
  var c = 0xffffffff;
  for (var i = 0; i < len; i++)
    c = table[(c ^ this[start+i]) & 0xff] ^ (c>>>8);
  return (c^0xffffffff).toUInt();
};
(function(){
  var toDataURL=function(){
    var imageData=Array.prototype.slice.call(this.getContext("2d").getImageData(0,0,this.width,this.height).data);
    var w=this.width;
    var h=this.height;
    var stream=[
      0x89,0x50,0x4e,0x47,0x0d,0x0a,0x1a,0x0a,
      0x00,0x00,0x00,0x0d,0x49,0x48,0x44,0x52
    ];
    Array.prototype.push.apply(stream, w.bytes32() );
    Array.prototype.push.apply(stream, h.bytes32() );
    stream.push(0x08,0x06,0x00,0x00,0x00);
    Array.prototype.push.apply(stream, stream.crc32(12,17).bytes32() );
    var len=h*(w*4+1);
    for(var y=0;y



UPDATED TO ADD BELOW CODE FOR SCRIPT THAT PROCESSES PAGE TO MYSQL:

slash197 · Accepted Answer

.toDataURL() creates a string from your canvas image, I'm guessing this is sent to your server to save it by that javascript. Are you processing this to save your image on the server?

The string sent starts with something like

data:image/png;base64,

followed by the actual image converted to Base 64.

Update

Sending the image string to your server:

$.ajax({
  type: "POST",
  url: "script.php",
  data: { 
     imageString: canvas.toDataURL("image/png");
  },
  success: function(response){ alert("image sent"); },
  error: function(xhr, status, error){ alert("there was an error sending the image" + error); },
});

You can put this in your signatureSave() function. On server side, in script.php you can simply grab the string with $_POST['imageString'], remove the identifying part from it (data:image/png;base64,) and Base64 decode the rest of the string then save it.

$image = imagecreatefromstring(base64_decode(str_replace("data:image/png;base64,", "", $_POST['imageData])));
imagepng("path/to/save/yourimage.png");

How do I pass the image created by todataurl.js to MySQL?

Answers (1)

Related Questions