忘れないように記録しとこ

カバの樹

Canvasで書いたものを画像に変換する

2016年8月1日

環境

ブラウザ:vivald・iPhone safari

 

前回に引き続き

クライアントが要望している手書きの署名機能を実装するための第一弾を前回行ないました。

参考
Canvasを使って手書きの署名機能を実装する

ルート営業を行うクライアントから、タブレットの契約書に手書きで署名できる機能が欲しいと言われました。
アプリで作ろうか悩みましたが、試しにHTML5で実装したものを提案してみました。

続きを見る

 

 

署名を画像にして保存する

署名したものを画像に変換します。
そして、書いたものを消せるように消しゴム機能も実装しました。

 

 

ソース


<canvas id="canvassample" width="500" height="300"></canvas>
<div>
  <button type="button" onclick="colorCange(0)">ペン</button>
  <button type="button" onclick="colorCange(1)" >消しゴム</button>
</div>
<h2>画像出力<h2>  
<div id="img-box"><img id="newImg"></div>
<div id="btn-box">
	<button type="button" onclick="chgImg()" value="1">保存</button>
</div>

 


var canvas = document.getElementById('canvassample'),
    ctx = canvas.getContext('2d'),
    moveflg = 0,
    Xpoint,
    Ypoint;

//初期値(サイズ、色、アルファ値)の決定
var defSize = 7,
    defColor = "#555";



// PC対応
canvas.addEventListener('mousedown', startPoint, false);
canvas.addEventListener('mousemove', movePoint, false);
canvas.addEventListener('mouseup', endPoint, false);
// スマホ対応
canvas.addEventListener('touchstart', startPoint, false);
canvas.addEventListener('touchmove', movePoint, false);
canvas.addEventListener('touchend', endPoint, false);

function startPoint(e){
  e.preventDefault();
  ctx.beginPath();
  
  // 矢印の先っぽから始まるように調整
  Xpoint = e.layerX;
  Ypoint = e.layerY;
  
  ctx.moveTo(Xpoint, Ypoint);
}

function movePoint(e){
  if(e.buttons === 1 || e.witch === 1 || e.type == 'touchmove')
  {
    Xpoint = e.layerX;
   Ypoint = e.layerY;
    moveflg = 1;
    
    ctx.lineTo(Xpoint, Ypoint);
    ctx.lineCap = "round";
    ctx.lineWidth = defSize * 2;
    ctx.strokeStyle = defColor;
    ctx.stroke();
    
  }
}

function endPoint(e)
{

    if(moveflg === 0)
    {
       ctx.lineTo(Xpoint-1, Ypoint-1);
       ctx.lineCap = "round";
       ctx.lineWidth = defSize * 2;
       ctx.strokeStyle = defColor;
       ctx.stroke();
       
    }
    moveflg = 0;
}

function chgImg()
{
  var png = canvas.toDataURL();

  document.getElementById("newImg").src = png;
}

 


canvas {
	position: relative;
	border:3px solid #000;
}

div#img-box{
  border:3px solid #000;
  width:500px;
}

 

 

実装した

 

関連

参考
Canvasを使って手書きの署名機能を実装する

ルート営業を行うクライアントから、タブレットの契約書に手書きで署名できる機能が欲しいと言われました。
アプリで作ろうか悩みましたが、試しにHTML5で実装したものを提案してみました。

続きを見る

参考
Canvasで書いたものを初期状態に戻す

以前に消しゴム機能うんぬんの記事を書きましたが、今回は、丸ごと全部初期化してしまう方法を書こうかと思います。

続きを見る

 

  • B!