原生js基于canvas实现一个简单的前端截图工具代码实例
程序员文章站
2022-05-25 10:57:46
这篇文章主要介绍了原生js基于canvas实现一个简单的前端截图工具代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考...
这篇文章主要介绍了原生js基于canvas实现一个简单的前端截图工具代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
先看效果
代码如下
<!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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： 超好用微博推广引流的技巧