web大作业（7）图片涂鸦功能的实现

本文主要是介绍web大作业（7）图片涂鸦功能的实现，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

作业要求能上传一张图片并在图片上进行b标注或绘画，可以用HTML5自带的canvas实现，首先是body部分：

<div class="paint"><canvas id="canvas" width="500" height="400" style="border:1px solid #c3c3c3;"></canvas>
</div>
<input accept="image/*"  type="file" id="uploadIMG"  onchange="btnUploadFile(event)"/>

首先我们要上传一张照片，并在canvas中显示，以下为js代码：

function btnUploadFile(e,type){var files = e.target.files;var file = files[0];if (!/\/(?:jpeg|jpg|png)/i.test(file.type)){return;}var reader = new FileReader();reader.onload = function() { var result = this.result;  var img=new Image()img.src=result;var canvas = document.getElementById("canvas");var context = canvas.getContext("2d");//console.log(result)img.onload = function(){context.drawImage(img,0,0,500,400);}};reader.readAsDataURL(file);    }

然后是涂鸦功能的实现：

window.onload=function(){var canvas = document.getElementById("canvas");var context = canvas.getContext("2d");paint(context);}function paint(context){var temp = false;$("canvas").mousedown(function(event){temp=true;var x = e.pageX-8;var y = e.pageY-8;context.moveTo(x,y);})$("canvas").mousemove(function(e){var x = e.pageX-8;var y = e.pageY-8;//$("#info").html("( "+x+" , "+y+" )");if(temp){context.lineTo(x,y);context.stroke();}else{context.beginPath()}})$("canvas").mouseup(function(e){temp=false;})}