网页源码直接贴了：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文档标题</title> <style type="text/css"> .aaa { cursor: url("http://192.168.12.144:8080/drawimg/icon/erase111111111111.ico"),auto; } </style> <script src="js/jquery-1.8.3.min.js" ></script> <script src="js/html2canvas.min.js" ></script> <script src="js/printScreen.js" ></script> <script text="javascript"> var s; $(function(){ s = new PrintScreen(document.getElementById('myCanvas')); }); function imageData(str) { var img = new Image(); img.src=str; $('#ddd').append(img); } </script> </head> <body> <div align="center" id="ddd" > <canvas id="myCanvas" class="aaa" width="1000" height="650" style="border:2px solid #6699cc;background-image: url('http://192.168.12.144:8080/drawimg/movie.png');background-repeat:no-repeat;"></canvas> <div class="control-ops"> <button type="button" class="btn btn-primary" onclick="javascript:clearArea();return false;">清空画板</button> <button type="button" class="btn btn-primary" onclick="javascript:s.setEdit();">笔</button> <button type="button" class="btn btn-primary" onclick="javascript:s.setErase();">橡皮</button> <button type="button" class="btn btn-primary" onclick="javascript:s.getImage(imageData);">复制</button> Line width : <select id="selWidth"> <option value="1">1</option> <option value="3">3</option> <option value="5">5</option> <option value="7">7</option> <option value="9" selected="selected">9</option> <option value="11">11</option> </select> Color : <select id="selColor"> <option value="black">black</option> <option value="blue" selected="selected">blue</option> <option value="red">red</option> <option value="green">green</option> <option value="yellow">yellow</option> <option value="gray">gray</option> </select> </div> </div> </body> </html>
printScreen.js 源码：
function PrintScreen(canvas) { this.mousePressed = false; var lastX, lastY; var ctx; var isEdit = false; var isErase = false; this.InitThis = function(){ ctx = canvas.getContext("2d"); canvas.onmousedown = function (e) { this.mousePressed = true; console.log('down>>'+this.mousePressed); if (isEdit) Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, false); if (isErase) Clear(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top); } canvas.onmousemove= function (e) { console.log('over>>'+this.mousePressed+',edit='+isEdit); if (this.mousePressed) { if (isEdit) Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, true); if (isErase) Clear(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top); } } canvas.onmouseup = function (e) { this.mousePressed = false; } canvas.onmouseleave = function (e) { this.mousePressed = false; } } function Draw(x, y, isDown) { if (isDown) { ctx.beginPath(); ctx.strokeStyle = $('#selColor').val(); ctx.lineWidth = $('#selWidth').val(); ctx.lineJoin = "round"; ctx.moveTo(lastX, lastY); ctx.lineTo(x, y); ctx.closePath(); ctx.stroke(); } lastX = x; lastY = y; } function Clear(x, y) { ctx.clearRect(x-8, y-8, 16, 16); } function clearArea() { ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); } this.setEdit = function() { console.log('edit>>'); isErase=false;isEdit=true; } this.setErase = function() { isEdit = false; isErase = true; } // 从 canvas 提取图片 image function convertCanvasToImage(canv) { //新Image对象，可以理解为DOM var image = new Image(); // canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持 // 指定格式 PNG image.src = canv.toDataURL("image/png"); return image; } this.getImage = function(callBack) { html2canvas(canvas, { onrendered: function(canv) { callBack(canv.toDataURL("image/png")); } }); } this.InitThis(); }
html2canvas(canvas, {
onrendered: function(canv) {
callBack(canv.toDataURL("image/png"));
}
});
这段代码是 基于 html2canvas 库的截图功能 canv 是截图之后返回的canvas对象，
canv.toDataURL("image/png") 方法返回 涂改过后 图片的base64码