溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這期內容當中小編將會給大家帶來有關怎么在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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
