Vue實現(xiàn)簡單基礎(chǔ)的圖片裁剪功能
近日，在寫公司項目的時候接到一個需求：對已加載的大圖中可截取部分圖片用來入庫或者布控，說白了就是截圖嘛，于是我使用了vue-cropper來完成。完成后因為前邊也沒自己實現(xiàn)過，所以就想看看是如何實現(xiàn)的。因此本文寫的是最簡易基礎(chǔ)的實現(xiàn)方法用作學習，肯定有考慮不周的地方，還請大家諒解。工作中還是使用成熟的輪子為好。
一、準備工作
本文中我所使用的環(huán)境為vue2 ?，F(xiàn)在可以在隨便一個vue項目中新建一個vue文件開始了。
二、基本結(jié)構(gòu)
在本文中會使用到兩個canvas，一個用來繪制我們要加載的圖片，一個用來繪制矩形框選區(qū)域，就像下面這樣，并且在兩個canvas身上分別加上ref屬性。
html
<template>
<div>
<div class="wrap">
<canvas id="canvas" ref="imgCanvas"></canvas>
<canvas
id="drawCanvas"
ref="drawCanvas"
></canvas>
</div>
</div>
</template>下方樣式設(shè)置兩個canvas重疊
<style>
#drawCanvas {
position: absolute;
top: 0;
left: 0;
}
.wrap {
position: relative;
}
</style>三、添加功能
首先我們需要將兩個canvas的寬高都設(shè)置為相同的，由于上面沒有設(shè)置canvas的寬高，因此我們在data選項中添加好需要的寬高數(shù)據(jù) width: 500,height: 300，稍后將它設(shè)置為canvas的大小，請記住，不要用css設(shè)置canvas的大小，這其實是將canvas拉伸了。然后在data中添加 ctx 和 imgCtx兩個屬性用于保存上下文。 接著在mounted生命周期中對canvas進行操作，并且獲取到要加載的圖片
let imgCanvas = this.$refs.imgCanvas;//繪制圖片的canvas
let drawCanvas = this.$refs.drawCanvas;//繪制框選款的canvas
//設(shè)置兩個canvas的寬高
imgCanvas.width = this.width;
imgCanvas.height = this.height;
drawCanvas.width = this.width;
drawCanvas.height = this.height;
//獲取兩個canvas的上下文并且保存在data中
this.ctx = drawCanvas.getContext("2d");
this.imgCtx = imgCanvas.getContext("2d");
//加載圖片
let img = new Image();
img.src = "https://www.auok.ltd/background.jpg";
img.crossOrigin = "anonymous";
img.onload = () => {
console.log("加載完成", img);
//圖片加載完成后開始繪制圖片
this.imgCtx.drawImage(img, 0, 0, this.width, this.height);
};以上步驟搞定后現(xiàn)在的頁面中應(yīng)該如下面一樣了
接下來讓我們給drawCanvas添加事件監(jiān)聽。需要監(jiān)聽的事件有以下幾個
- 鼠標按下
- 鼠標抬起
- 鼠標移動
- 鼠標移出
我們來改寫一下模板結(jié)構(gòu)，像下面這樣
<template>
<div>
<div class="wrap">
<canvas id="canvas" ref="imgCanvas"></canvas>
<canvas
id="drawCanvas"
ref="drawCanvas"
@mousedown="onMouseDown"
@mousemove="onMouseMove"
@mouseup="onMouseUp"
@mouseleave="onMouseLeave"
></canvas>
</div>
<img :src="curSrc" alt="" style="margin: 10px 10px 0 0" />
<canvas id="outCanvas"></canvas>
</div>
</template>然后在methods中添加對應(yīng)的onMouseDown、onMouseUp、onMouseMove、onMouseLeave四個方法。然后我們來編寫這四個方法就好
onMouseDown
這個方法是鼠標按下事件的監(jiān)聽處理函數(shù)。主要負責以下幾點
- 清除drawCanvas
- 獲取鼠標按下時的位置
- 設(shè)置一下繪制線條的樣式
代碼如下： 編寫這個方法前我們要現(xiàn)在data中增加ddownPoint和down兩個屬性用來存儲點的位置和標識鼠標是否按下。
onMouseDown(e) {
console.log("鼠標按下", e.offsetX, e.offsetY);
this.downPoint = [e.offsetX, e.offsetY];
this.down = true;
this.ctx.strokeStyle = "#fff";
this.ctx.lineWidth = 2;
}onMouseMove
鼠標按下了，下面就要移動了。此方法是鼠標移動的監(jiān)聽處理函數(shù)。負責以下幾點
- 獲取鼠標移動的位置
- 繪制矩形選框
- 繪制遮罩層
onMouseMove(e) {
//鼠標未按下不執(zhí)行操作
if (!this.down) {
return;
}
console.log("鼠標移動", e.offsetX, e.offsetY);
//當前鼠標移動的位置
let movePoint = [e.offsetX, e.offsetY];
this.ctx.fillStyle = "rgba(0,0,0,.5)";//設(shè)置遮罩層填充顏色
//清空drawCanvas
this.ctx.clearRect(0, 0, this.width, this.height);
//使用設(shè)置的填充顏色來設(shè)置drawCanvas的顏色
this.ctx.fillRect(0, 0, this.width, this.height);
//清除指定區(qū)域的顏色，因為需要繪制的選框中間是沒有顏色的，不然的話選框區(qū)域都是遮罩層的顏色。如下圖
this.ctx.clearRect(
downPoint[0],
downPoint[1],
movePoint[0] - this.downPoint[0],
movePoint[1] - this.downPoint[1]
);
//繪制描邊矩形 四個參數(shù)是x坐標 ， y坐標 ， 矩形的長，矩形的寬
this.ctx.strokeRect(
downPoint[0],
downPoint[1],
movePoint[0] - this.downPoint[0],
movePoint[1] - this.downPoint[1]
);
},
onMouseUp
這個方法是鼠標松開按鍵的事件處理函數(shù)，主要負責
- 獲取鼠標松開的坐標
- 獲取框選部分的圖片 上面的步驟中截圖區(qū)域已經(jīng)選擇完成。接下來就是要獲取截圖部分的圖片了。
代碼如下
onMouseUp(e) {
console.log("鼠標抬起", e.offsetX, e.offsetY);
//獲取坐標
let upPoint = [e.offsetX, e.offsetY];
//重置鼠標按下狀態(tài)
this.down = false;
//獲取指定區(qū)域的圖片數(shù)據(jù)
let cutImgData = this.imgCtx.getImageData(
this.downPoint[0],
this.downPoint[1],
upPoint[0] - this.downPoint[0],
upPoint[1] - this.downPoint[1]
);
//獲取返回的圖片數(shù)據(jù)中的寬高
let { width, height } = cutImgData;
console.log(cutImgData);
//創(chuàng)建一個用于放置圖片的canvas用來輸出圖片
let outCanvas = document.createElement("canvas");
let outCtx = outCanvas.getContext("2d");
outCanvas.height = height;
outCanvas.width = width;
//將圖片放置到canvas上
outCtx.putImageData(cutImgData, 0, 0);
//以blob的形式輸出圖片
outCanvas.toBlob((blob) => {
this.curSrc = URL.createObjectURL(blob);
}通過調(diào)用getImageData獲取了圖片指定區(qū)域的數(shù)據(jù)，然后將獲取到的圖片數(shù)據(jù)使用putImageData放到創(chuàng)建好的canvas中，再通過canvas的toBlob或者toDataURL方法就可以輸入圖片的二進制數(shù)據(jù)或者base64字符串了，這里我用的是blob，再通過URL.createObjectURL獲取到圖片的本地地址，這種形式：blob:http://localhost:8080/e835d581-cdfe-48ff-b562-743bfcd4970d，可以用來顯示或者上傳。 在模板中添加一個img標簽，并且在data中添加cruSrc屬性，最后就如下圖
<img :src="curSrc" alt="" style="margin: 10px 10px 0 0" />
onMouseLeave
這個方法是在鼠標移出canvas區(qū)域后重置canvas的狀態(tài)的。將鼠標狀態(tài)down重置為false，然后再清除canvas。
四、總結(jié)
如果要實際的實現(xiàn)一個和vue-cropper功能差不多的是比較復雜，要考慮很多東西，比如圖像的縮放比例、選框的移動及大小調(diào)整之類的。這些部分還沒有寫。
以上就是Vue實現(xiàn)簡單基礎(chǔ)的圖片裁剪功能的詳細內(nèi)容，更多關(guān)于Vue圖片裁剪的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了vue如何遍歷data所有變量并賦值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue2響應(yīng)式的缺點影響，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-05-05
Vue的生命周期就是vue實例從創(chuàng)建到銷毀的全過程,也就是new Vue()開始就是vue生命周期的開始。Vue實例有?個完整的?命周期,也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模版、掛載Dom->渲染、更新->渲染、卸載等?系列過程,稱這是Vue的?命周期2022-11-11
利用Vue實現(xiàn)一個markdown編輯器實例代碼
這篇文章主要給大家介紹了關(guān)于如何利用Vue實現(xiàn)一個markdown編輯器的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用Vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-05-05
在Vue項目中用fullcalendar制作日程表的示例代碼
這篇文章主要介紹了在Vue項目中用fullcalendar制作日程表，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
基于vue-cli創(chuàng)建的項目的目錄結(jié)構(gòu)及說明介紹
下面小編就為大家分享一篇基于vue-cli創(chuàng)建的項目的目錄結(jié)構(gòu)及說明介紹，具有很好的參考價值，希望對大家有所幫助2017-11-11
這篇文章主要介紹了vue中$refs的三種用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了Vue CLI3 如何支持less的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家詳細介紹了vue+antd實現(xiàn)折疊與展開組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
這篇文章主要介紹了vue props數(shù)據(jù)傳遞類型限制方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10