CANVAS를 이용한 모바일에서 사인처리

CANVAS를 이용한 모바일에서 사인처리

1. 참고가 되었던 유튜브

https://www.youtube.com/watch?v=P6SLf6jmXS0

2. 캔버스에 관한 튜토리얼정보

https://www.html5canvastutorials.com/

3. 파일전송을위한 Blob

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob

https://stackoverflow.com/questions/18253378/javascript-blob-upload-with-formdata

--------------

터치이벤트 다른걸로 처리가능한데 framework7에 있는 돔조작부분을 활용했다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/framework7/3.3.2/js/framework7.min.js"></script>

--

<canvas width="500px;" height="500px;" style="background: #ffffff;border: 1px solid;" id="myCanvas"></canvas>

<img src="" id="canvasImg">

--

<script>

var app = new Framework7();

var $$ = Dom7;

//캔버스 테스트

var lastX = "";

var lastY = "";

var flag = false;

$$("#myCanvas").touchstart(function (e) {

    flag = !flag

    var canvas = document.getElementById('myCanvas');

    var rect = canvas.getBoundingClientRect();

    this.lastX = e.touches[0].clientX - rect.left;

    this.lastY = e.touches[0].clientY - rect.top;

})

$$("#myCanvas").touchmove(function (e) {

    if (flag == true) {

        var canvas = document.getElementById('myCanvas');

        var ctx = canvas.getContext('2d');

        var rect = canvas.getBoundingClientRect();

        var currentX = e.touches[0].clientX - rect.left;

        var currentY = e.touches[0].clientY - rect.top;

        ctx.beginPath();

        ctx.moveTo(this.lastX, this.lastY);

        ctx.lineTo(currentX, currentY);

        ctx.closePath();

        ctx.strokeStyle = "#000";

        ctx.lineWidth = 5;

        ctx.stroke();

        this.lastX = e.touches[0].clientX - rect.left;

        this.lastY = e.touches[0].clientY - rect.top;

    }

})

$$("#myCanvas").touchend(function (e) {

    flag = !flag

    var canvas = document.getElementById('myCanvas');

    $$("#canvasImg").attr("src",canvas.toDataURL("image/png"));

    //$("#base64").val(canvas.toDataURL());

uploadCanvasData();

    //console.log(canvas.toDataURL("image/png"));

})

function uploadCanvasData()

{

    var canvas = document.getElementById('myCanvas');

    var dataUrl = canvas.toDataURL("image/png");

    var file = dataURItoBlob(dataUrl);

    //console.log(file);

    var formData = new FormData();

    formData.append("file", file,"singimg.png");

    

    var xhr = new XMLHttpRequest();

    xhr.open("POST", "주소");  

    xhr.send(formData);

    //var request = new XMLHttpRequest();

    //request.onload = completeRequest;

    //request.open("POST", "IdentifyFood");

    //request.send(formData);

}

function dataURItoBlob(dataURI)

{

    var byteString = atob(dataURI.split(',')[1]);

    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]

    var ab = new ArrayBuffer(byteString.length);

    var ia = new Uint8Array(ab);

    for (var i = 0; i < byteString.length; i++)

    {

        ia[i] = byteString.charCodeAt(i);

    }

    var bb = new Blob([ab], { "type": mimeString });

    return bb;

}

</script>

---

이것저것 짬뽕해서 기능구현쪽으로만 적용해놨는데

실제사용시 조금더 튜닝좀 하긴해야겠다.