0

タッチ スクリーンまたはマウス パッドを介して署名をキャプチャするスクリプトがあり、todataurl.js が作成した画像をサーバー上のフォルダーにアップロードして、画像へのパスを保存できるようにしたいと考えています。しかし、 todataurl.js スクリプトから画像を取得する方法がわかりません。

これが私が使用しているHTMLとjavascriptです。また、これはプロトタイプ スクリプトであり、ドキュメントは一切ありません。これを jsFiddle として配置しようとしましたが、サイトで機能させることができませんでした。スクリプトは正常に動作しますが、画像をアップロードする方法がわかりません。[署名を取得] ボタンをクリックすると、MySQL のイメージ フィールドの名前だけが表示されます。

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="signature/todataurl.js"></script>
    <script src="signature/signature.js"></script>
  </head>
  <body>
    <center>
      <div id="canvas">
        <canvas class="roundCorners" id="newSignature"
          style="position: relative; margin: 0; padding: 0;
          border: 1px solid #c4caac; left: 0px; top: 0px;" height="124" width="524">
        </canvas>
      </div>
      <script>signatureCapture();</script>
      <br/><br/>
      <button type="button" value="submit" onclick="signatureSave()">
        Save signature
      </button>
      <button type="button" onclick="signatureClear()">
        Clear signature
      </button>
      <br/>
      Saved Image
      <br/>
      <img  name="get_signature" id="saveSignature" alt="Saved image png"/>
    </center>
  </body>
</html>

signature.js コード:

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 コード:

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<len;i++) {
    a = (a+this[start+i])%65521; b = (b+a)%65521;
  }
  return ((b << 16) | a).toUInt();
};
Array.prototype.crc32=function(start,len){
  switch(arguments.length){ case 0:start=0; case 1:len=this.length-start; }
  var table=arguments.callee.crctable;
  if(!table){
    table=[];
    var c;
    for (var n = 0; n < 256; n++) {
      c = n;
      for (var k = 0; k < 8; k++)
        c = c & 1?0xedb88320 ^ (c >>> 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<h;y++)
      imageData.splice(y*(w*4+1),0,0);
    var blocks=Math.ceil(len/32768);
    Array.prototype.push.apply(stream, (len+5*blocks+6).bytes32() );
    var crcStart=stream.length;
    var crcLen=(len+5*blocks+6+4);
    stream.push(0x49,0x44,0x41,0x54,0x78,0x01);
    for(var i=0;i<blocks;i++){
      var blockLen=Math.min(32768,len-(i*32768));
      stream.push(i==(blocks-1)?0x01:0x00);
      Array.prototype.push.apply(stream, blockLen.bytes16sw() );
      Array.prototype.push.apply(stream, (~blockLen).bytes16sw() );
      var id=imageData.slice(i*32768,i*32768+blockLen);
      Array.prototype.push.apply(stream, id );
    }
    Array.prototype.push.apply(stream, imageData.adler32().bytes32() );
    Array.prototype.push.apply(stream, stream.crc32(crcStart, crcLen).bytes32() );
    stream.push(0x00,0x00,0x00,0x00,0x49,0x45,0x4e,0x44);
    Array.prototype.push.apply(stream, stream.crc32(stream.length-4, 4).bytes32() );
    return "data:image/png;base64,"+btoa(String.fromCharCode.apply(null,stream));
  };
  var tdu=HTMLCanvasElement.prototype.toDataURL;
  HTMLCanvasElement.prototype.toDataURL=function(type){
  var res=tdu.apply(this,arguments);
  if(res.substr(0,6)=="data:,") {
    HTMLCanvasElement.prototype.toDataURL=toDataURL;
    return this.toDataURL();
  } else {
    HTMLCanvasElement.prototype.toDataURL=tdu;
    return res;
  }
}
})();

ページを MYSQL に処理するスクリプトの以下のコードを追加するために更新されました。

    <?php

//This is the directory where images will be saved
$target = "sig/uploads/images/";
$target = $target . basename( $_FILES['imageData']['name']);
$image = imagecreatefromstring(base64_decode(str_replace("data:image/png;base64,", "", $_POST['imageData'])));
$customer_signature=( $_FILES['imageData']['name']);
//This gets all the other information from the form

// Connects to your Database
mysql_connect("localhost", "name", "password") or die(mysql_error()) ;
mysql_select_db("db") or die(mysql_error()) ;

//Writes the information to the database
mysql_query("INSERT INTO customer (customer_signature)
VALUES ('$customer_signature')") ;
echo mysql_error(); 
//Writes the photo to the server
if(move_uploaded_file($_FILES['imageData']['tmp_name'], $target))
{

//Tells you if its all ok
echo "The file ". basename( $_FILES['imageData']['name']). " has been uploaded, and your information has been added to the directory";
}
else {

//Gives and error if its not
echo "Sorry, there was a problem uploading your file.";
}
?>
4

1 に答える 1