<script type="text/javascript">
var ctx, cnvs;
$(document).ready(function () {
cnvs = document.getElementById("cnvs");
ctx = cnvs.getContext("2d");
cnvs.onmousedown = function (e) {
ctx.beginPath();
ctx.moveTo(e.offsetX,
e.offsetY);
cnvs.onmousemove = function (e) {
ctx.lineWidth = 2;
ctx.lineTo(e.offsetX,
e.offsetY);
ctx.stroke();
}
}
cnvs.onmouseup = function (e) {
cnvs.onmousemove = null;
}
$("#btnSave").click(function () {
var imgUrl = cnvs.toDataURL("");
$("#imgSign")[0].src = imgUrl;
});
});
</script>
<div>
<canvas id="cnvs" width="300" height="200" style="border: 1px solid #808080"></canvas>
<input type="button" value="Save" id="btnSave"/>
<br />
<img id="imgSign" />
</div>
No comments:
Post a Comment