vue项目实现图片缩放与拖拽功能

在项目开发中遇到一个需求：

   1：用鼠标滚轮可对图片举行缩放处理处罚
   2：点击按钮可对图片举行缩放处理处罚
   3：可对图片举行拖拽处理处罚
  
  我在开发中通过本身实现与百度检察良好的铁子举行了两种范例的利用
  
  1：个人举行实现：

  
  源码：

1. <template>
2.     <div class="pictureDetails">
3.         <div class="pictureDetails-box">
5.             <!-- 图片区 -->
6.             <div class="box-img">
8.                 <div style="width: 100%" class="left" @mousewheel.prevent="rollImg">
9.                     <img :src="imgSrc" class="img" ref="imgDiv" :style="{ transform: 'scale(' + zoomD + ')' }"
10.                         @mousedown="move" />
11.                 </div>
13.                 <!-- 按钮 -->
14.                 <div class="Button-area">
15.                     <ol>
16.                         <li @click="zoomMax">
17.                             大
18.                         </li>
19.                         <li @click="zoomMin">
20.                             小
21.                         </li>
22.                         <li v-if="love" @click="btnLoveFlage">
23.                             未赞
24.                         </li>
25.                         <li v-else @click="btnLoveFlage">
26.                             已赞
27.                             <!-- <img src="@/assets/images/pictureDetails/Collection.png" alt="点赞icon"> -->
28.                         </li>
29.                         <li @click="downloadImg(imgSrc, '哇哈哈')
30.                         ">
31.                             下载
32.                         </li>
33.                     </ol>
34.                 </div>
35.             </div>
36.         </div>
38.     </div>
39. </template>
41. <script>
43. export default {
45.     data() {
46.         return {
47.             zoomD: 1,
48.             love: false,
49.             imgSrc: 'https://img2.baidu.com/it/u=1395980100,2999837177&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675',  //横图
50.             // 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',  //竖图
53.         }
54.     },
55.     created() {
56.         //根据接口判断当前详情是否已经收藏
57.         this.love = true;
58.     },
59.     mounted() {
61.     },
62.     methods: {
63.         //移动demo
64.         move(e) {
65.             e.preventDefault();
66.             // 获取元素
67.             var personBox = document.querySelector(".left");
68.             var img = document.querySelector(".img");
69.             var x = e.pageX - img.offsetLeft;
70.             var y = e.pageY - img.offsetTop;
72.             // 添加鼠标移动事件
73.             personBox.addEventListener("mousemove", move);
74.             function move(e) {
75.                 img.style.left = e.pageX - x + "px";
76.                 img.style.top = e.pageY - y + "px";
77.             }
78.             // 添加鼠标抬起事件，鼠标抬起，将事件移除
79.             img.addEventListener("mouseup", function () {
80.                 personBox.removeEventListener("mousemove", move);
81.             });
82.             // 鼠标离开父级元素，把事件移除
83.             personBox.addEventListener("mouseout", function () {
84.                 personBox.removeEventListener("mousemove", move);
85.             });
86.         },
87.         // 缩放图片
88.         rollImg(e) {
89.             let direction = e.deltaY > 0 ? 'down' : 'up'
90.             if (direction === 'up') {
91.                 // 滑轮向上滚动
92.                 this.large();
93.             } else {
94.                 // 滑轮向下滚动
95.                 this.Small();
96.             }
97.         },
98.         //缩小按钮方法
99.         zoomMin() {
100.             this.Small();
101.         },
102.         //放大按钮方法
103.         zoomMax() {
104.             this.large();
105.         },
107.         //大
108.         large() {
109.             this.$nextTick(() => {
110.                 if (this.zoomD < 6) {
111.                     this.zoomD += 0.10
112.                 }
113.                 document.querySelector('.img').style.transform = `matrix(${this.zoomD}, 0, 0,${this.zoomD}, 0, 0)`
114.             })
115.         },
116.         // 小
117.         Small() {
118.             this.$nextTick(() => {
119.                 if (this.zoomD > 0.3) {
120.                     this.zoomD -= 0.10
121.                 }
122.                 document.querySelector('.img').style.transform = `matrix(${this.zoomD}, 0, 0, ${this.zoomD}, 0, 0)`
123.             })
124.         },
125.         //点击下载图片
126.         downloadImg(url, name) {
127.             let image = new Image();
128.             image.setAttribute("crossOrigin", "anonymous");
129.             image.src = url;
130.             image.onload = () => {
131.                 let canvas = document.createElement("canvas");
132.                 canvas.width = image.width;
133.                 canvas.height = image.height;
134.                 let ctx = canvas.getContext("2d");
135.                 ctx.drawImage(image, 0, 0, image.width, image.height);
136.                 canvas.toBlob((blob) => {
137.                     let url = URL.createObjectURL(blob);
138.                     this.download(url, name);
139.                     // 用完释放URL对象
140.                     URL.revokeObjectURL(url);
141.                 });
142.             };
143.         },
144.         download(href, name) {
145.             let eleLink = document.createElement("a");
146.             eleLink.download = name;
147.             eleLink.href = href;
148.             eleLink.click();
149.             eleLink.remove();
150.         },
152.         //点赞收藏
153.         btnLoveFlage() {
154.             this.love = this.love == true ? false : true;
155.             console.log(this.love);
156.         }
157.     }
158. }
159. </script>
161. <style lang="scss" scoped>
162. .pictureDetails {
163.     width: 100%;
164.     height: auto;
165.     background-color: #F3F1EE;
166.     display: flex;
167.     align-items: center;
168.     flex-direction: column;
169.     justify-content: center;
171.     .pictureDetails-box {
172.         width: 1200px;
173.         // height: 800px;
174.         display: flex;
175.         flex-direction: column;
177.         .box-img {
178.             width: 1200px;
179.             height: 662px;
180.             margin-bottom: 20px;
181.             background: #DFDAD3;
182.             position: relative;
184.             .left {
185.                 position: absolute;
186.                 width: 660px;
187.                 height: 100%;
188.                 float: left;
189.                 overflow: hidden;
191.                 display: flex;
192.                 align-items: center;
193.                 justify-content: center;
194.             }
196.             .img {
197.                 position: absolute;
198.                 /* top: 5px; */
199.                 /* left: 7px; */
200.                 // max-width: 923px;
201.                 // max-height: 460px;
202.                 cursor: move;
203.             }
205.             .Button-area {
206.                 width: 42px;
207.                 height: 200px;
208.                 // background-color: pink;
209.                 position: absolute;
210.                 right: -50px;
211.                 top: 0px;
213.                 ol {
214.                     width: 100%;
215.                     height: 100%;
216.                     display: flex;
217.                     flex-direction: column;
218.                     justify-content: space-between;
220.                     li {
221.                         width: 43px;
222.                         height: 42px;
223.                         background: #A58773;
224.                         cursor: pointer;
225.                         // padding: 8px 8px;
226.                         box-sizing: border-box;
227.                         border-radius: 6px;
229.                       display: flex;
230.                       align-items: center;
231.                       justify-content: center;
232.                     }
234.                     li:hover {
235.                         background: #634d3f;
236.                     }
237.                 }
238.             }
239.         }
240.     }
241. }
242. </style>

复制代码

  效果：
                         
  2：通过借鉴他人良好帖子所修改实现

  源码：

1. <template>
2.     <!-- 舆图库详情页 -->
3.     <div class="mainPage">
5.         <div class="watchMap">
6.             <div class="imgBox" ref="maskBox" @mousedown="onmousedownHandle">
7.                 <img :src="imageUrl" alt="" :style="{
8.                     width: imgW + 'px',
9.                     height: imgH + 'px',
10.                     top: top + 'px',
11.                     left: left + 'px',
12.                     transform: scale,
13.                 }" />
14.             </div>
16.             <div class="Tools">
17.                 <div class="Tools-item" @click="imgScaleHandle(0.25)">
18.                     大
19.                 </div>
20.                 <div class="Tools-item" @click="imgScaleHandle(-0.25)">
21.                     小
22.                 </div>
23.                 <div class="Tools-item">
24.                     藏
25.                 </div>
26.                 <div class="Tools-item" @click="
27.     downloadByBlob(
28.         'https://img2.baidu.com/it/u=1395980100,2999837177&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675',
29.         'name'
30.     )
31.                 ">
32.                     下载
33.                 </div>
34.             </div>
35.         </div>
37.     </div>
38. </template>
40. <script>
41. export default {
43.     data() {
44.         return {
45.             imageUrl:
46.                 "https://img2.baidu.com/it/u=1395980100,2999837177&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675",
48.             imgW: 0,
49.             imgH: 0,
50.             deg: 0,
51.             top: 0,
52.             left: 0,
53.             scale: "scale(1)",
54.             size: 0,
55.             mousewheelevt: null,
56.         };
57.     },
59.     mounted() {
60.         //初始化图片
61.         this.initImage();
63.         // 兼容火狐浏览器
64.         this.mousewheelevt = /Firefox/i.test(navigator.userAgent)
65.             ? "DOMMouseScroll"
66.             : "mousewheel";
67.         // 为空间区域绑定鼠标滚轮事件 =》 处理函数是wheelHandle
68.         // 如果你监听了window的scroll或者touchmove事件，你应该把passive设置为true，这样滚动就会流畅很多
69.         this.$refs.maskBox.addEventListener(this.mousewheelevt, this.wheelHandle);
70.     },
71.     beforeDestroy() {
72.         //取消监听
73.         this.$refs.maskBox.removeEventListener(
74.             this.mousewheelevt,
75.             this.wheelHandle
76.         );
77.     },
78.     created() {
79.         this.handleReset();
80.     },
81.     methods: {
82.         /**
83.          *
84.          * 下載圖片
85.          * **/
87.         downloadByBlob(url, name) {
88.             let image = new Image();
89.             image.setAttribute("crossOrigin", "anonymous");
90.             image.src = url;
91.             image.onload = () => {
92.                 let canvas = document.createElement("canvas");
93.                 canvas.width = image.width;
94.                 canvas.height = image.height;
95.                 let ctx = canvas.getContext("2d");
96.                 ctx.drawImage(image, 0, 0, image.width, image.height);
97.                 canvas.toBlob((blob) => {
98.                     let url = URL.createObjectURL(blob);
99.                     this.download(url, name);
100.                     // 用完释放URL对象
101.                     URL.revokeObjectURL(url);
102.                 });
103.             };
104.         },
105.         download(href, name) {
106.             let eleLink = document.createElement("a");
107.             eleLink.download = name;
108.             eleLink.href = href;
109.             eleLink.click();
110.             eleLink.remove();
111.         },
113.         /**
114.          * 重置
115.          */
116.         handleReset() {
117.             this.imgW = 0;
118.             this.imgH = 0;
119.             this.top = 0;
120.             this.left = 0;
121.             this.deg = 0;
122.             this.scale = "scale(1)";
123.             this.size = 0;
124.             this.initImage();
125.         },
126.         /**
127.          * 获取图片的url
128.          * @param {string} url
129.          */
130.         getImgSize(url) {
131.             return new Promise((resolve, reject) => {
132.                 let imgObj = new Image();
133.                 imgObj.src = url;
134.                 imgObj.onload = () => {
135.                     resolve({
136.                         width: imgObj.width,
137.                         height: imgObj.height,
138.                     });
139.                 };
140.             });
141.         },
142.         /**
143.          * 初始化图片
144.          */
145.         async initImage() {
146.             if (!this.imageUrl) {
147.                 return;
148.             }
149.             let { width, height } = await this.getImgSize(this.imageUrl);
150.             // 设置原始图片的大小
151.             let realWidth = width;
152.             let realHeight = height;
154.             // 获取高宽比例
155.             const whRatio = realWidth / realHeight;
156.             const hwRatio = realHeight / realWidth;
158.             //获取盒子的大小
159.             const boxW = this.$refs.maskBox.clientWidth;
160.             const boxH = this.$refs.maskBox.clientHeight;
162.             if (realWidth >= realHeight) {
163.                 this.imgH = hwRatio * boxW;
164.                 const nih = this.imgH;
165.                 if (nih > boxH) {
166.                     this.imgH = boxH;
167.                     this.imgW = whRatio * boxH;
168.                 } else {
169.                     this.imgW = boxW;
170.                 }
171.                 this.top = (boxH - this.imgH) / 2;
172.                 this.left = (boxW - this.imgW) / 2;
173.             } else {
174.                 this.imgW = (boxH / realHeight) * realWidth;
175.                 this.imgH = boxH;
176.                 this.left = (boxW - this.imgW) / 2;
177.             }
178.         },
179.         imgScaleHandle(zoom) {
180.             this.size += zoom;
181.             if (this.size < -0.5) {
182.                 this.size = -0.5;
183.             }
184.             this.scale = `scale(${1 + this.size}) rotateZ(${this.deg}deg)`;
185.         },
186.         /**
187.          * 鼠标滚动 实现放大缩小
188.          */
189.         wheelHandle(e) {
190.             e.preventDefault();
191.             const ev = e || window.event; // 兼容性处理 => 火狐浏览器判断滚轮的方向是属性 detail，谷歌和ie浏览器判断滚轮滚动的方向是属性 wheelDelta
192.             // dir = -dir; // dir > 0 => 表示的滚轮是向上滚动，否则是向下滚动 => 范围 (-120 ~ 120)
193.             const dir = ev.detail ? ev.detail * -120 : ev.wheelDelta;
194.             //滚动的数值 / 2000 => 表示滚动的比例，用此比例作为图片缩放的比例
195.             this.imgScaleHandle(dir / 2000);
196.         },
197.         /**
198.          * 处理图片拖动
199.          */
200.         onmousedownHandle(e) {
201.             const that = this;
202.             this.$refs.maskBox.onmousemove = function (el) {
203.                 const ev = el || window.event; // 阻止默认事件
204.                 ev.preventDefault();
205.                 that.left += ev.movementX;
206.                 that.top += ev.movementY;
207.             };
208.             this.$refs.maskBox.onmouseup = function () {
209.                 // 鼠标抬起时将操作区域的鼠标按下和抬起事件置为null 并初始化
210.                 that.$refs.maskBox.onmousemove = null;
211.                 that.$refs.maskBox.onmouseup = null;
212.             };
213.             if (e.preventDefault) {
214.                 e.preventDefault();
215.             } else {
216.                 return false;
217.             }
218.         },
219.     },
220. };
221. </script>
223. <style lang="scss" scoped>
224. .world_map {
225.     width: 1200px;
226.     margin: 41px auto;
228.     .name {
229.         width: 95px;
230.         margin: 0 auto;
231.         font-size: 22px;
232.         font-family: "st";
233.         font-weight: bold;
234.         color: pink;
235.         line-height: 30px;
236.         letter-spacing: 1px;
237.     }
238. }
240. .watchMap {
241.     width: 1200px;
242.     height: 662px;
243.     background: pink;
244.     position: relative;
245.     // overflow: hidden;
246.     margin-left: 360px;
248.     .imgBox {
249.         width: 100%;
250.         height: 100%;
251.         overflow: hidden;
252.         position: relative;
254.         img {
255.             cursor: move;
256.             position: absolute;
257.         }
258.     }
260.     .Tools {
261.         width: 43px;
262.         min-height: 100px;
263.         position: absolute;
264.         right: -50px;
265.         top: 0;
266.         user-select: none;
268.         .Tools-item {
269.             width: 100%;
270.             height: 44px;
271.             background: pink;
272.             margin-bottom: 5px;
273.             display: flex;
274.             justify-content: center;
275.             align-items: center;
276.             cursor: pointer;
278.         }
280.         .Tools-item:hover{
281.             background-color: red;
282.             color: #fff;
283.         }
284.     }
285. }
286. </style>

复制代码

  效果：@韩桑
              
来源：https://blog.csdn.net/qq_63310300/article/details/128872535
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！