Vue3实现图片滚轮缩放和拖拽

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

1：用鼠标滚轮可对图片进行缩放处理

2：点击按钮可对图片进行缩放处理

3：可对图片进行拖拽处理

我在开发中通过自己实现与百度查看优秀的铁子进行了两种类型的使用

<template>
    <div ref="imgWrap" class="wrap" @mousewheel.prevent="rollImg">
        <img :src="url" alt ref="image" @mousedown.prevent="moveImg" />
    </div>
</template>
<script setup>
import { ref } from 'vue'
const url = ref("https://w.wallhaven.cc/full/8o/wallhaven-8oky1j.jpg")

const image = ref(null)
const rollImg = (e) => {
    let transform = image.value.style.transform
    let zoom = transform.indexOf("scale") != -1 ? +transform.split("(")[1].split(")")[0] : 1
    zoom += e.wheelDelta / 1200
    if (zoom > 0.1 && zoom < 2) {
        image.value.style.transform = "scale(" + zoom + ")"
    }
}

const imgWrap = ref(null)
const moveImg = (e) => {
    let wrap = imgWrap.value
    let img = image.value
    let x = e.pageX - img.offsetLeft
    let y = e.pageY - img.offsetTop
    // 添加鼠标移动事件
    wrap.addEventListener('mousemove', move)
    function move(e) {
        img.style.left = e.pageX - x + 'px'
        img.style.top = e.pageY - y + 'px'
    }
    // 添加鼠标抬起事件，鼠标抬起，将事件移除
    img.addEventListener('mouseup', () => {
        wrap.removeEventListener('mousemove', move)
    })
    // 鼠标离开父级元素，把事件移除
    wrap.addEventListener('mouseout', () => {
        wrap.removeEventListener('mousemove', move)
    })
}
</script>

<style lang='less' scoped>
.wrap {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
img {
    position: absolute;
    cursor: move;
}
</style>

顺便又写了个vue2 的

<template>
    <!-- 舆图库详情页 -->
    <div class="mainPage">

        <div class="watchMap">
            <div class="imgBox" ref="maskBox" @mousedown="onmousedownHandle">
                <img :src="data: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";
        // 为空间区域绑定鼠标滚轮事件 =》 处理函数是wheelHandle
        // 如果你监听了window的scroll或者touchmove事件，你应该把passive设置为true，这样滚动就会流畅很多
        this.$refs.maskBox.addEventListener(this.mousewheelevt, this.wheelHandle);
    },
    beforeDestroy() {
        //取消监听
        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对象
                    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);
            // 设置原始图片的大小
            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)`;
        },
        /**
         * 鼠标滚动 实现放大缩小
         */
        wheelHandle(e) {
            e.preventDefault();
            const ev = e || window.event; // 兼容性处理 => 火狐浏览器判断滚轮的方向是属性 detail，谷歌和ie浏览器判断滚轮滚动的方向是属性 wheelDelta
            // dir = -dir; // dir > 0 => 表示的滚轮是向上滚动，否则是向下滚动 => 范围 (-120 ~ 120)
            const dir = ev.detail ? ev.detail * -120 : ev.wheelDelta;
            //滚动的数值 / 2000 => 表示滚动的比例，用此比例作为图片缩放的比例
            this.imgScaleHandle(dir / 2000);
        },
        /**
         * 处理图片拖动
         */
        onmousedownHandle(e) {
            const that = this;
            this.$refs.maskBox.onmousemove = function (el) {
                const ev = el || window.event; // 阻止默认事件
                ev.preventDefault();
                that.left += ev.movementX;
                that.top += ev.movementY;
            };
            this.$refs.maskBox.onmouseup = function () {
                // 鼠标抬起时将操作区域的鼠标按下和抬起事件置为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>

写在最后，

图片的拖拽和缩放动态的给图片赋值宽高和位置