자바스크립트 라이브러리 펜으로 사인하는 signature_pad
signature_pad 라이브러리를 이용해서 캔버스에 사용자가 사인을 한것을 다른 이미지로 복사하는 샘플 입니다.
아래에서 PNG 이미지의 경우 투명한것 때문에 jpg 사용하지 않는 것이기 때문에 아래 부분의 끝에 반드시 0이 들어가야 합니다.
backgroundColor: 'rgb(255, 255, 255, 0)',
이 샘플에서는 PNG 저장을 클릭하게 되면 base64로 된 이미지가 img01의 id인 이미지로 들어가서 그대로 보이는 예제 입니다.
아래처럼 페이지가 로드된 다음 기본적인게 실행되게 해야 오류가 없는 페이지를 만날수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrapper {
position: relative;
width: 400px;
height: 200px;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.signature-pad {
position: absolute;
left: 0;
top: 0;
width:400px;
height:200px;
background-color: white;
}
</style>
</head>
<script src="https://cdn.jsdelivr.net/npm/signature_pad@4.0.0/dist/signature_pad.umd.min.js"></script>
<script>
$( function() {
var canvas = document.getElementById('signature-pad');
// 픽셀 비율을 고려하여 캔버스 좌표 공간을 조정합니다.
// 모바일 장치에서 선명하게 보이도록 합니다.
// 이것은 또한 캔버스가 지워지게 합니다.
function resizeCanvas() {
// 아주 이상한 이유로 100% 미만으로 축소하면,
// 일부 브라우저는 devicePixelRatio를 1 미만으로 보고합니다.
// 그러면 캔버스의 일부만 지워집니다.
var ratio = Math.max(window.devicePixelRatio || 1, 1);
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
canvas.getContext("2d").scale(ratio, ratio);
}
window.onresize = resizeCanvas;
resizeCanvas();
var signaturePad = new SignaturePad(canvas, {
backgroundColor: 'rgb(255, 255, 255, 0)',
penColor: "rgb(1, 2, 3)"
});
document.getElementById('save-png').addEventListener('click', function () {
if (signaturePad.isEmpty()) {
return alert("Please provide a signature first.");
}
var data = signaturePad.toDataURL('image/png');
// console.log(data);
// window.open(data);
$("#img01").attr('src', data);
});
document.getElementById('clear').addEventListener('click', function () {
signaturePad.clear();
});
document.getElementById('draw').addEventListener('click', function () {
var ctx = canvas.getContext('2d');
console.log(ctx.globalCompositeOperation);
ctx.globalCompositeOperation = 'source-over'; // default value
});
document.getElementById('erase').addEventListener('click', function () {
var ctx = canvas.getContext('2d');
ctx.globalCompositeOperation = 'destination-out';
});
});
</script>
<body>
<img src="" id="img01" src="" width=222 height="222" style="border: 1px solid red" />
<div class="wrapper">
<canvas id="signature-pad" class="signature-pad" width=400 height=200 style="border: 1px solid red"></canvas>
</div>
<button id="save-png">Save as PNG</button>
<button id="draw">Draw</button>
<button id="erase">Erase</button>
<button id="clear">Clear</button>
</body>
</html>
* 참고한곳
