您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这期内容当中小编将会给大家带来有关怎么在JavaScript中使用canvas实现一个前端截图工具,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
JavaScript是一种直译式的脚本语言,其解释器被称为JavaScript引擎,是浏览器的一部分,JavaScript是被广泛用于客户端的脚本语言,最早是在HTML网页上使用,用来给HTML网页增加动态功能。
代码如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } .clip-img-w{ position: relative; width: 100%; height: 100%; font-size: 0; } .clip-img-w img{ max-width: 100%; max-height: 100%; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } .clip-img-w canvas{ position: absolute; left: 0; top: 0; } .clip-img-w #clipcanvas{ z-index: 2; } .clip-img-w #drawcanvas{ background: #fff; z-index: 1; } #img{ display: block; margin: 0 auto; } .box-c{ width: 400px; height: 200px; border: 1px solid #F35252; margin: 20px auto; } </style> </head> <body> <div class="box-c"> <div class="clip-img-w" id="clip-img-w"> <canvas id="drawcanvas" ></canvas> <canvas id="clipcanvas" ></canvas> </div> </div> <!-- 结果 --> <img src="" id="img"> </body> <script type="text/javascript"> var img = document.getElementById("img"); var url = 'http://img.muchengfeng.cn/FvC7i-GkXYoHE7kGFlNfj7xEzvIQ'; var wrap = document.getElementById("clip-img-w"); var width = wrap.offsetWidth; var height = wrap.offsetHeight; var clipcanvas = document.getElementById("clipcanvas"); var drawcanvas = document.getElementById("drawcanvas"); clipcanvas.width = width; clipcanvas.height = height; drawcanvas.width = width; drawcanvas.height = height; var clipCtx = drawcanvas.getContext("2d"); var clipImg = document.createElement("img"); clipImg.crossOrigin = "anonymous"; clipImg.src = url; var timg = clipImg.cloneNode(); wrap.appendChild(clipImg); clipImg.onload = function(){ var x = Math.floor((width - this.width)/2); var y = Math.floor((height - this.height)/2); clipCtx.drawImage(this,0,0,timg.width,timg.height,x,y,this.width,this.height); } var ctx = clipcanvas.getContext("2d"); ctx.fillStyle = 'rgba(0,0,0,0.6)'; ctx.strokeStyle="green"; var start = null; var clipArea = {};//裁剪范围 clipcanvas.onmousedown = function(e){ start = { x:e.offsetX, y:e.offsetY }; } clipcanvas.onmousemove = function(e){ if(start){ fill(start.x,start.y,e.offsetX-start.x,e.offsetY-start.y) } } document.addEventListener("mouseup",function(){ if(start){ start = null; var url = startClip(clipArea); img.src= url; } }) function fill(x,y,w,h){ ctx.clearRect(0,0,width,height); ctx.beginPath(); //遮罩层 ctx.globalCompositeOperation = "source-over"; ctx.fillRect(0,0,width,height); //画框 ctx.globalCompositeOperation = 'destination-out'; ctx.fillRect(x,y,w,h); //描边 ctx.globalCompositeOperation = "source-over"; ctx.moveTo(x,y); ctx.lineTo(x+w,y); ctx.lineTo(x+w,y+h); ctx.lineTo(x,y+h); ctx.lineTo(x,y); ctx.stroke(); ctx.closePath(); clipArea = { x, y, w, h }; } function startClip(area){ var canvas = document.createElement("canvas"); canvas.width = area.w; canvas.height = area.h; var data = clipCtx.getImageData(area.x,area.y,area.w,area.h); var context = canvas.getContext("2d"); context.putImageData(data,0,0); return canvas.toDataURL("image/png"); } </script> </html>
上述就是小编为大家分享的怎么在JavaScript中使用canvas实现一个前端截图工具了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。