在項(xiàng)目開發(fā)中遇到一個(gè)需求：
1：用鼠標(biāo)滾輪可對(duì)圖片進(jìn)行縮放處理
2：點(diǎn)擊按鈕可對(duì)圖片進(jìn)行縮放處理
3：可對(duì)圖片進(jìn)行拖拽處理
我在開發(fā)中通過自己實(shí)現(xiàn)與百度查看優(yōu)秀的鐵子進(jìn)行了兩種類型的使用
1：個(gè)人進(jìn)行實(shí)現(xiàn)：
源碼：文章來源：http://www.zghlxwxcb.cn/news/detail-519207.html
<template>
<div class="pictureDetails">
<div class="pictureDetails-box">
<!-- 圖片區(qū) -->
<div class="box-img">
<div style="width: 100%" class="left" @mousewheel.prevent="rollImg">
<img :src="imgSrc" class="img" ref="imgDiv" :style="{ transform: 'scale(' + zoomD + ')' }"
@mousedown="move" />
</div>
<!-- 按鈕 -->
<div class="Button-area">
<ol>
<li @click="zoomMax">
大
</li>
<li @click="zoomMin">
小
</li>
<li v-if="love" @click="btnLoveFlage">
未贊
</li>
<li v-else @click="btnLoveFlage">
已贊
<!-- <img src="@/assets/images/pictureDetails/Collection.png" alt="點(diǎn)贊icon"> -->
</li>
<li @click="downloadImg(imgSrc, '哇哈哈')
">
下載
</li>
</ol>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
zoomD: 1,
love: false,
imgSrc: 'https://img2.baidu.com/it/u=1395980100,2999837177&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675', //橫圖
// imgSrc: 'https://img1.baidu.com/it/u=1518057857,2376515959&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1675530000&t=d847d2430e87d04936f7d07f38cf60c5', //豎圖
}
},
created() {
//根據(jù)接口判斷當(dāng)前詳情是否已經(jīng)收藏
this.love = true;
},
mounted() {
},
methods: {
//移動(dòng)demo
move(e) {
e.preventDefault();
// 獲取元素
var personBox = document.querySelector(".left");
var img = document.querySelector(".img");
var x = e.pageX - img.offsetLeft;
var y = e.pageY - img.offsetTop;
// 添加鼠標(biāo)移動(dòng)事件
personBox.addEventListener("mousemove", move);
function move(e) {
img.style.left = e.pageX - x + "px";
img.style.top = e.pageY - y + "px";
}
// 添加鼠標(biāo)抬起事件，鼠標(biāo)抬起，將事件移除
img.addEventListener("mouseup", function () {
personBox.removeEventListener("mousemove", move);
});
// 鼠標(biāo)離開父級(jí)元素，把事件移除
personBox.addEventListener("mouseout", function () {
personBox.removeEventListener("mousemove", move);
});
},
// 縮放圖片
rollImg(e) {
let direction = e.deltaY > 0 ? 'down' : 'up'
if (direction === 'up') {
// 滑輪向上滾動(dòng)
this.large();
} else {
// 滑輪向下滾動(dòng)
this.Small();
}
},
//縮小按鈕方法
zoomMin() {
this.Small();
},
//放大按鈕方法
zoomMax() {
this.large();
},
//大
large() {
this.$nextTick(() => {
if (this.zoomD < 6) {
this.zoomD += 0.10
}
document.querySelector('.img').style.transform = `matrix(${this.zoomD}, 0, 0,${this.zoomD}, 0, 0)`
})
},
// 小
Small() {
this.$nextTick(() => {
if (this.zoomD > 0.3) {
this.zoomD -= 0.10
}
document.querySelector('.img').style.transform = `matrix(${this.zoomD}, 0, 0, ${this.zoomD}, 0, 0)`
})
},
//點(diǎn)擊下載圖片
downloadImg(url, name) {
let image = new Image();
image.setAttribute("crossOrigin", "anonymous");
image.src = url;
image.onload = () => {
let canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
let ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0, image.width, image.height);
canvas.toBlob((blob) => {
let url = URL.createObjectURL(blob);
this.download(url, name);
// 用完釋放URL對(duì)象
URL.revokeObjectURL(url);
});
};
},
download(href, name) {
let eleLink = document.createElement("a");
eleLink.download = name;
eleLink.href = href;
eleLink.click();
eleLink.remove();
},
//點(diǎn)贊收藏
btnLoveFlage() {
this.love = this.love == true ? false : true;
console.log(this.love);
}
}
}
</script>
<style lang="scss" scoped>
.pictureDetails {
width: 100%;
height: auto;
background-color: #F3F1EE;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
.pictureDetails-box {
width: 1200px;
// height: 800px;
display: flex;
flex-direction: column;
.box-img {
width: 1200px;
height: 662px;
margin-bottom: 20px;
background: #DFDAD3;
position: relative;
.left {
position: absolute;
width: 660px;
height: 100%;
float: left;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.img {
position: absolute;
/* top: 5px; */
/* left: 7px; */
// max-width: 923px;
// max-height: 460px;
cursor: move;
}
.Button-area {
width: 42px;
height: 200px;
// background-color: pink;
position: absolute;
right: -50px;
top: 0px;
ol {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
li {
width: 43px;
height: 42px;
background: #A58773;
cursor: pointer;
// padding: 8px 8px;
box-sizing: border-box;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
}
li:hover {
background: #634d3f;
}
}
}
}
}
}
</style>效果：
2：通過借鑒他人優(yōu)秀帖子所修改實(shí)現(xiàn)
源碼：
<template>
<!-- 輿圖庫詳情頁 -->
<div class="mainPage">
<div class="watchMap">
<div class="imgBox" ref="maskBox" @mousedown="onmousedownHandle">
<img :src="imageUrl" alt="" :style="{
width: imgW + 'px',
height: imgH + 'px',
top: top + 'px',
left: left + 'px',
transform: scale,
}" />
</div>
<div class="Tools">
<div class="Tools-item" @click="imgScaleHandle(0.25)">
大
</div>
<div class="Tools-item" @click="imgScaleHandle(-0.25)">
小
</div>
<div class="Tools-item">
藏
</div>
<div class="Tools-item" @click="
downloadByBlob(
'https://img2.baidu.com/it/u=1395980100,2999837177&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675',
'name'
)
">
下載
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
imageUrl:
"https://img2.baidu.com/it/u=1395980100,2999837177&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675",
imgW: 0,
imgH: 0,
deg: 0,
top: 0,
left: 0,
scale: "scale(1)",
size: 0,
mousewheelevt: null,
};
},
mounted() {
//初始化圖片
this.initImage();
// 兼容火狐瀏覽器
this.mousewheelevt = /Firefox/i.test(navigator.userAgent)
? "DOMMouseScroll"
: "mousewheel";
// 為空間區(qū)域綁定鼠標(biāo)滾輪事件 =》 處理函數(shù)是wheelHandle
// 如果你監(jiān)聽了window的scroll或者touchmove事件，你應(yīng)該把passive設(shè)置為true，這樣滾動(dòng)就會(huì)流暢很多
this.$refs.maskBox.addEventListener(this.mousewheelevt, this.wheelHandle);
},
beforeDestroy() {
//取消監(jiān)聽
this.$refs.maskBox.removeEventListener(
this.mousewheelevt,
this.wheelHandle
);
},
created() {
this.handleReset();
},
methods: {
/**
*
* 下載圖片
* **/
downloadByBlob(url, name) {
let image = new Image();
image.setAttribute("crossOrigin", "anonymous");
image.src = url;
image.onload = () => {
let canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
let ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0, image.width, image.height);
canvas.toBlob((blob) => {
let url = URL.createObjectURL(blob);
this.download(url, name);
// 用完釋放URL對(duì)象
URL.revokeObjectURL(url);
});
};
},
download(href, name) {
let eleLink = document.createElement("a");
eleLink.download = name;
eleLink.href = href;
eleLink.click();
eleLink.remove();
},
/**
* 重置
*/
handleReset() {
this.imgW = 0;
this.imgH = 0;
this.top = 0;
this.left = 0;
this.deg = 0;
this.scale = "scale(1)";
this.size = 0;
this.initImage();
},
/**
* 獲取圖片的url
* @param {string} url
*/
getImgSize(url) {
return new Promise((resolve, reject) => {
let imgObj = new Image();
imgObj.src = url;
imgObj.onload = () => {
resolve({
width: imgObj.width,
height: imgObj.height,
});
};
});
},
/**
* 初始化圖片
*/
async initImage() {
if (!this.imageUrl) {
return;
}
let { width, height } = await this.getImgSize(this.imageUrl);
// 設(shè)置原始圖片的大小
let realWidth = width;
let realHeight = height;
// 獲取高寬比例
const whRatio = realWidth / realHeight;
const hwRatio = realHeight / realWidth;
//獲取盒子的大小
const boxW = this.$refs.maskBox.clientWidth;
const boxH = this.$refs.maskBox.clientHeight;
if (realWidth >= realHeight) {
this.imgH = hwRatio * boxW;
const nih = this.imgH;
if (nih > boxH) {
this.imgH = boxH;
this.imgW = whRatio * boxH;
} else {
this.imgW = boxW;
}
this.top = (boxH - this.imgH) / 2;
this.left = (boxW - this.imgW) / 2;
} else {
this.imgW = (boxH / realHeight) * realWidth;
this.imgH = boxH;
this.left = (boxW - this.imgW) / 2;
}
},
imgScaleHandle(zoom) {
this.size += zoom;
if (this.size < -0.5) {
this.size = -0.5;
}
this.scale = `scale(${1 + this.size}) rotateZ(${this.deg}deg)`;
},
/**
* 鼠標(biāo)滾動(dòng) 實(shí)現(xiàn)放大縮小
*/
wheelHandle(e) {
e.preventDefault();
const ev = e || window.event; // 兼容性處理 => 火狐瀏覽器判斷滾輪的方向是屬性 detail，谷歌和ie瀏覽器判斷滾輪滾動(dòng)的方向是屬性 wheelDelta
// dir = -dir; // dir > 0 => 表示的滾輪是向上滾動(dòng)，否則是向下滾動(dòng) => 范圍 (-120 ~ 120)
const dir = ev.detail ? ev.detail * -120 : ev.wheelDelta;
//滾動(dòng)的數(shù)值 / 2000 => 表示滾動(dòng)的比例，用此比例作為圖片縮放的比例
this.imgScaleHandle(dir / 2000);
},
/**
* 處理圖片拖動(dòng)
*/
onmousedownHandle(e) {
const that = this;
this.$refs.maskBox.onmousemove = function (el) {
const ev = el || window.event; // 阻止默認(rèn)事件
ev.preventDefault();
that.left += ev.movementX;
that.top += ev.movementY;
};
this.$refs.maskBox.onmouseup = function () {
// 鼠標(biāo)抬起時(shí)將操作區(qū)域的鼠標(biāo)按下和抬起事件置為null 并初始化
that.$refs.maskBox.onmousemove = null;
that.$refs.maskBox.onmouseup = null;
};
if (e.preventDefault) {
e.preventDefault();
} else {
return false;
}
},
},
};
</script>
<style lang="scss" scoped>
.world_map {
width: 1200px;
margin: 41px auto;
.name {
width: 95px;
margin: 0 auto;
font-size: 22px;
font-family: "st";
font-weight: bold;
color: pink;
line-height: 30px;
letter-spacing: 1px;
}
}
.watchMap {
width: 1200px;
height: 662px;
background: pink;
position: relative;
// overflow: hidden;
margin-left: 360px;
.imgBox {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
img {
cursor: move;
position: absolute;
}
}
.Tools {
width: 43px;
min-height: 100px;
position: absolute;
right: -50px;
top: 0;
user-select: none;
.Tools-item {
width: 100%;
height: 44px;
background: pink;
margin-bottom: 5px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.Tools-item:hover{
background-color: red;
color: #fff;
}
}
}
</style>效果：@韓桑文章來源地址http://www.zghlxwxcb.cn/news/detail-519207.html
到了這里，關(guān)于vue項(xiàng)目實(shí)現(xiàn)圖片縮放與拖拽功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
