開篇
最近在做一個圖片截圖的功能。
因為工作時間很緊張，
當時是使用的是一個截圖外掛。
週末兩天無所事事，來寫一個簡單版本的截圖功能。
因為寫的比較簡單，如果寫的不好,求大佬輕一點噴
讀取圖片並獲取圖片的寬度和高度思路
首先讀取檔案我們使用input中型別是file。
我們需要對讀取的物件進行限制，必須是圖片型別。
這個可以使用這個屬性：accept="image/*" 來實現
但是這個屬性不可靠，最好還是透過正則來判斷。
我們要獲取圖片的寬和高，需要建立FileReader物件。
使用reader.readAsDataURL(file)非同步讀取檔案內容，
並將其編碼為一個Data URL（資料URL）
當檔案讀取完成之後，會觸發reader.onload事件。
這個時候我們還要建立一個圖片物件。
等待這個圖片讀取完成後,透過 img.width, img.height返回圖片的寬和高。
下面我們就來簡單實現一下
讀取圖片並獲取圖片的寬度
<div>
<input type="file" id="file" accept="image/*" />
</div>
<script>
// 獲取檔案節點
let fileNode = document.getElementById("file")
// 給檔案節點註冊事件
fileNode.addEventListener("change", readFile)
// 讀取檔案,然後返回寬度和高度
function readFile(e){
let file = e.target.files[0]
getImageWH(file, function(width, height) {
console.log('Width:', width, 'Height:', height);
});
}
// 返回檔案(圖片的寬和高)
function getImageWH(file, callback) {
// 建立一個FileReader例項
const reader = new FileReader();
// 當檔案讀取完成時觸發
reader.onload = function(e) {
// e 這個物件中包含這個圖片相關的屬性
console.log('e這個物件', e)
// 建立一個新的Image物件
const img = new Image();
// 設定Image的src為讀取到的檔案內容
img.src = e.target.result;
// 當圖片載入時觸發
img.onload = function() {
// 呼叫回撥函式，並傳入圖片的寬高
callback(img.width, img.height);
};
};
// 開始讀取檔案內容，以DataURL的形式
// reader.onload 方法的執行需要呼叫下面這個 reader.readAsDataURL
reader.readAsDataURL(file);
}
</script>
將圖片的寬高賦值給canvas
我們在獲取圖片的寬和高之後然後賦值給canvas。
並且將canvas給顯示出來就行。
這一步比較簡單
<style>
.canvas-box{
border: 1px solid red;
display: none;
}
</style>
<canvas id="canvas-node" class="canvas-box"></canvas>
// 獲取canvas節點
let canvasNode = document.getElementById("canvas-node")
// 讀取檔案
function readFile(e){
let file = e.target.files[0]
getImageWH(file, function(width, height) {
// 將寬度和高度傳給canvasSetWH函式，顯示在頁面上
canvasSetWH(canvasNode,width, height)
});
}
function canvasSetWH(canvasNode,width, height){
canvasNode.width = width
canvasNode.height = height
canvasNode.style.display = "block"
}
將圖片內容在canvas中顯示出來
想要將圖片繪製出來，此時我們需要藉助drawImage這個API。
這個API有三種形式的傳參
第1種:drawImage(image, x, y)
image: 繪製的影像源
x, y: 影像在畫布上的起始座標(x,y), 影像將以原始尺寸繪製
第2種:drawImage(image, x, y, width, height)
image: 繪製的影像源
x, y: 影像在畫布上的起始座標(x,y)
width, height(可選)：繪製到畫布上的影像的寬度和高度
第3種: drawImage(image, sx, sy, swidth, sheight, dx, dy, dwidth, dheight)
image： 繪製的影像源
sx, sy: 影像源中矩形區域的起始座標
swidth, sheight：影像源中矩形區域的寬度和高度，即要繪製的影像部分
dx, dy：繪製到畫布上的起始座標
dwidth, dheight：繪製到畫布上的矩形區域的寬度和高度，允許對繪製的影像進行縮放
也就是說:我們這裡繪製可以使用第1種方法和第2種方法。
影像源在getImageWH 這個方法中返回來。
// 返回檔案(圖片的寬和高和影像源)
function getImageWH(file, callback) {
// ....其他程式碼.....
// 當檔案讀取完成時觸發
reader.onload = function(e) {
// ....其他程式碼.....
// 當圖片載入時觸發
img.onload = function() {
// 呼叫回撥函式，返回影像源，圖片的寬度，高度
callback(img,img.width, img.height);
};
};
// 開始讀取檔案內容，以DataURL的形式
// reader.onload 方法的執行需要呼叫下面這個 reader.readAsDataURL
reader.readAsDataURL(file);
}
// 獲取canvas節點
let canvasNode = document.getElementById("canvas-node")
// 建立上下文
let ctx = canvasNode.getContext("2d")
function readFile(e){
let file = e.target.files[0]
getImageWH(file, function(img, width, height) {
// 將寬度和高度傳給canvasSetWH函式，顯示在頁面上
canvasSetWH(canvasNode,width, height)
// 將圖片繪製出來
ctx.drawImage(img, 0, 0,width, height );
});
}
繪製蒙層
繪製蒙層這一步相對比較簡單。
我們只需要在圖片上繪製一個跟圖片大小一樣的蒙層即可。
可以藉助fillStyle來填充顏色。fillRect繪製矩形。
下面我們簡單實現一下
// 呼叫繪製蒙層的方法(在繪製圖片完成後呼叫這個函式)
drawMask(0,0,width, height);
//繪製蒙層
function drawMask(x, y, width, height, opactity) {
ctx.fillStyle = "rgba(0,0,0,0.5)";
ctx.fillRect(x, y, width, height);
}
繪製截圖區域
我們需要給canvas繫結滑鼠按下事件。
在滑鼠按下的時候記錄上當前滑鼠的座標資訊(x,y)
在滑鼠按下的時候還要註冊移動事件和抬起事件。
在滑鼠移動的時候計算出蒙層的位置資訊(rectEndX,rectEndY)
然後計算出截圖區域的位置資訊
最後還需要滑鼠抬起的時候要移除移動事件和抬起事件
下面我們來簡單實現一下
.... 其他程式碼.....
// 影像源
let img = new Image();
// 註冊事件用於得到滑鼠按下時的偏移量
canvasNode.addEventListener("mousedown", mousedownInCanvasHandler)
let currentPoint = {}
// 滑鼠按下
function mousedownInCanvasHandler(e){
currentPoint= { x: e.offsetX, y: e.offsetY }
// 按下滑鼠的時候我們需要註冊移動事件和抬起事件
canvasNode.addEventListener('mousemove', mousemoveInCanvasHandler)
canvasNode.addEventListener('mouseup', mouseupInCanvasHandler)
}
// 繪製矩形
function mousemoveInCanvasHandler(e){
let rectEndX = e.offsetX
let rectEndY = e.offsetY
// 得到矩形的寬度和高度
let rectWidth = rectEndX - currentPoint.x
let rectHeight = rectEndY - currentPoint.y
let {width, height} = canvasNode
ctx.clearRect(0, 0, width, height)
// 繪製蒙層
drawMask(0,0,width, height);
drawScreenShot(width, height,rectWidth, rectHeight)
}
// 繪製截圖
function drawScreenShot( canvasWidth, canvasHeight,rectWidth,rectHeight){
// 在原圖形之外畫出一個矩形
ctx.globalCompositeOperation = "destination-out";
ctx.fillStyle='#000'
ctx.fillRect(currentPoint.x, currentPoint.y,rectWidth,rectHeight)
ctx.globalCompositeOperation ='destination-over'
// 繪製截圖區域的矩形
ctx.drawImage(img, 0, 0,canvasWidth, canvasHeight,0,0,canvasWidth, canvasHeight );
}
// 滑鼠抬起的時候要移除移動事件和抬起事件
function mouseupInCanvasHandler(e){
canvasNode.removeEventListener('mousemove', mousemoveInCanvasHandler)
canvasNode.removeEventListener('mouseup', mouseupInCanvasHandler)
}
.... 其他程式碼.....
把截圖的區域顯示出來
我們只需要在截圖完成後(滑鼠抬起時)
得到截圖區域的資訊ctx.getImageData()
然後把截圖區域的資訊寫入一個新的畫布即可。
在繪製前先清空畫布
<style>
.canvas-box,.canvas2-box{
display: none;
}
</style>
<body>
<!-- 檔案讀取 -->
<div>
<input type="file" id="file" accept="image/*" />
</div>
<canvas id="canvas-node" class="canvas-box"></canvas>
<!-- 截圖區域的影像顯示在下面這個新的畫布上 -->
<div class="canvas2-box">
<canvas id="canvas2"></canvas>
</div>
</body>
// 將截圖區域的資料儲存下來
screenshotData= [currentPoint.x, currentPoint.y, rectWidth, rectHeight]
// 滑鼠抬起的時候要移除移動事件和抬起事件
function mouseupInCanvasHandler(e){
canvasNode.removeEventListener('mousemove', mousemoveInCanvasHandler)
canvasNode.removeEventListener('mouseup', mouseupInCanvasHandler)
drawScreenShotImg(screenshotData)
}
// 繪製一個截圖區域的資訊在另外一個畫布上，並且將他顯示出來
function drawScreenShotImg(screenshotData){
// screenshotData是截圖的開始和結束座標
let drawData = ctx.getImageData(...screenshotData)
canvasSetWH(canvas2Box,screenshotData[2],screenshotData[3])
// 先清空畫布，注意清空的大小，否者會造成疊加（清除不乾淨）
ctx2.clearRect(0,0, currentPoint.x, currentPoint.y)
// 將截圖區域繪製到canvas2上
ctx2.putImageData(drawData,0,0)
}
將截圖區域的部分下載下來
將canvas下載下來時,需要藉助
語法:canvas.toDataURL(picType, encoderOptions)
引數:
picType:表示的是圖片的格式。預設為 image/png。
encoderOptions：從 0 到 1 的區間內選擇圖片的質量。
如果超出取值範圍，將會使用預設值 0.92。其他引數會被忽略。
獲取圖片的型別我們可以透過(file.type)來知道
let file = e.target.files[0]
// 得到圖片的型別，等會下載的時候需要
fileType = file.type
<button id="downBtn">down</button>
// 註冊下載事件
downBtn.addEventListener('click',()=>{
let {width, height} = canvas2
// toDataURL的第一個引數：圖片格式，預設為 image/png,
// 第2個引數：可以從 0 到 1 的區間內選擇圖片的質量。
let imgURL = canvas2.toDataURL( fileType, 1);
let link = document.createElement('a');
link.download = "截圖圖片";
link.href = imgURL;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
})
截圖功能全部程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>canvas實現截圖功能</title>
<style>
.canvas-box,.canvas2-box{
display: none;
}
</style>
</head>
<body>
<!-- 檔案讀取 -->
<div>
<input type="file" id="file" accept="image/*" />
</div>
<canvas id="canvas-node" class="canvas-box"></canvas>
<button id="downBtn">down</button>
<div class="canvas2-box">
<canvas id="canvas2"></canvas>
</div>
</body>
<script>
// 獲取canvas節點
let canvasNode = document.getElementById("canvas-node")
// 建立上下文
let ctx = canvasNode.getContext("2d")
let downBtn = document.getElementById("downBtn")
let canvas2Box = document.querySelector(".canvas2-box")
let canvas2 = document.getElementById("canvas2")
let ctx2 = canvas2.getContext("2d")
// 獲取檔案節點
let fileNode = document.getElementById("file")
// 給檔案節點註冊事件
fileNode.addEventListener("change", readFile)
// 影像源
let img = new Image();
// 截圖區域的資料
let screenshotData = []
let fileType = "" // 檔案的型別,下載的時候需要
// 註冊事件用於得到滑鼠按下時的偏移量
canvasNode.addEventListener("mousedown", mousedownInCanvasHandler)
let currentPoint = {}
// 註冊下載事件
downBtn.addEventListener('click',()=>{
let {width, height} = canvas2
// format:表示的是圖片的型別 "image/png"
// toDataURL的第一個引數：圖片格式，預設為 image/png,
// 第2個引數：可以從 0 到 1 的區間內選擇圖片的質量。如果超出取值範圍，將會使用預設值 0.92。其他引數會被忽略。
let imgURL = canvas2.toDataURL( fileType, 1);
let link = document.createElement('a');
link.download = "截圖圖片";
link.href = imgURL;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
})
// 滑鼠按下
function mousedownInCanvasHandler(e){
currentPoint= { x: e.offsetX, y: e.offsetY }
// 按下滑鼠的時候我們需要註冊移動事件和抬起事件
canvasNode.addEventListener('mousemove', mousemoveInCanvasHandler)
canvasNode.addEventListener('mouseup', mouseupInCanvasHandler)
}
// 繪製矩形
function mousemoveInCanvasHandler(e){
let rectEndX = e.offsetX
let rectEndY = e.offsetY
// 得到矩形的寬度和高度
let rectWidth = rectEndX - currentPoint.x
let rectHeight = rectEndY - currentPoint.y
let {width, height} = canvasNode
// 將截圖區域的資料儲存下來
screenshotData= [currentPoint.x, currentPoint.y, rectWidth, rectHeight]
ctx.clearRect(0, 0, width, height)
// 繪製蒙層
drawMask(0,0,width, height);
drawScreenShot(width, height,rectWidth, rectHeight)
}
// 繪製截圖
function drawScreenShot( canvasWidth, canvasHeight,rectWidth,rectHeight){
// 在原圖形之外畫出一個矩形
ctx.globalCompositeOperation = "destination-out";
ctx.fillStyle='#000'
ctx.fillRect(currentPoint.x, currentPoint.y,rectWidth,rectHeight)
ctx.globalCompositeOperation ='destination-over'
// 繪製截圖區域的矩形
ctx.drawImage(img, 0, 0,canvasWidth, canvasHeight,0,0,canvasWidth, canvasHeight );
}
// 滑鼠抬起的時候要移除移動事件和抬起事件
function mouseupInCanvasHandler(e){
canvasNode.removeEventListener('mousemove', mousemoveInCanvasHandler)
canvasNode.removeEventListener('mouseup', mouseupInCanvasHandler)
drawScreenShotImg(screenshotData)
}
// 繪製一個截圖區域的資訊在另外一個畫布上，並且將他顯示出來
function drawScreenShotImg(screenshotData){
// screenshotData是截圖的開始和結束座標
let drawData = ctx.getImageData(...screenshotData)
canvasSetWH(canvas2Box,screenshotData[2],screenshotData[3])
// 先清空畫布，注意清空的大小，否者會造成疊加（清除不乾淨）
ctx2.clearRect(0,0, currentPoint.x, currentPoint.y)
// 將截圖區域繪製到canvas2上
ctx2.putImageData(drawData,0,0)
}
// 讀取檔案
function readFile(e){
let file = e.target.files[0]
// 得到圖片的型別，等會下載的時候需要
console.log('file.type', file.type)
fileType = file.type
getImageWH(file, function(width, height) {
// 將寬度和高度傳給canvasSetWH函式，顯示在頁面上
canvasSetWH(canvasNode,width, height)
ctx.drawImage(img, 0, 0,width, height );
// 呼叫繪製蒙層的方法
drawMask(0,0,width, height);
});
}
// 返回檔案(圖片的寬和高)
function getImageWH(file, callback) {
// 建立一個FileReader例項
const reader = new FileReader();
// 當檔案讀取完成時觸發
reader.onload = function(e) {
// e 這個物件中包含這個圖片相關的屬性
console.log('e這個物件', e)
// 建立一個新的Image物件
// 設定Image的src為讀取到的檔案內容
img.src = e.target.result;
// 當圖片載入時觸發
img.onload = function() {
// 呼叫回撥函式，返回影像源，圖片的寬度，高度
callback(img.width, img.height);
};
};
// 開始讀取檔案內容，以DataURL的形式
// reader.onload 方法的執行需要呼叫下面這個 reader.readAsDataURL
reader.readAsDataURL(file);
}
function canvasSetWH(canvasNode,width, height){
canvasNode.width = width
canvasNode.height = height
canvasNode.style.display = "block"
}
// 繪製蒙層
function drawMask(x, y, width, height, opactity) {
ctx.fillStyle = "rgba(0,0,0,0.5)";
ctx.fillRect(x, y, width, height);
}
</script>
</html>
尾聲
終於寫完了，這周過得很充實。。。
如果覺得寫的不錯，求未來的老闆們點個贊，感謝！