# picture-scaling

**Repository Path**: monkeyLi/picture-scaling

## Basic Information

- **Project Name**: picture-scaling
- **Description**: vue2 实现图片的拖拽、缩放、旋转等功能
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2022-11-27
- **Last Updated**: 2024-06-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# picture-scaling

vue2 实现图片的拖拽、缩放、旋转等功能

![效果图](./src/assets/picture-scaling.gif)

### 1. 获取图片的实际宽高

```
getImgSize(url) {
    return new Promise((resolve, reject) => {
    let imgObj = new Image();
    imgObj.src = url;
    imgObj.onload = () => {
        resolve({
        width: imgObj.width,
        height: imgObj.height,
        });
    };
    });
},
```

### 2. 根据盒子的大小、图片的大小来计算 要显示多大的图片

```
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;
    }
},
```

### 3.监听鼠标的滚动，进行缩放图片

在 mounted() 中监听鼠标的滚动事件

```
mounted() {
    // 兼容火狐浏览器
    this.mousewheelevt = /Firefox/i.test(navigator.userAgent)
        ? "DOMMouseScroll"
        : "mousewheel";
    // 为空间区域绑定鼠标滚轮事件 =》 处理函数是wheelHandle
    // 如果你监听了window的scroll或者touchmove事件，你应该把passive设置为true，这样滚动就会流畅很多
    this.$refs.maskBox.addEventListener(this.mousewheelevt, this.wheelHandle, {
        passive: true,
    });
},
```

处理鼠标的滚动事件

```
wheelHandle(e) {
    // 兼容性处理 => 火狐浏览器判断滚轮的方向是属性 detail，谷歌和ie浏览器判断滚轮滚动的方向是属性 wheelDelta
    const ev = e || window.event;
    // dir = -dir; // dir > 0 => 表示的滚轮是向上滚动，否则是向下滚动 => 范围 (-120 ~ 120)
    const dir = ev.detail ? ev.detail * -120 : ev.wheelDelta;
    //滚动的数值 / 2000 => 表示滚动的比例，用此比例作为图片缩放的比例
    this.imgScaleHandle(dir / 2000);
},
```

放大缩小图片

```
/**
 * 图片的缩放
 * zoom >0 放大
 * zoom <0 缩小
 */
imgScaleHandle(zoom) {
    this.size += zoom;
    if (this.size < -0.5) {
    this.size = -0.5;
    }
    this.scale = `scale(${1 + this.size}) rotateZ(${this.deg}deg)`;
},
```

页面销毁的时候 注意要取消鼠标的监听事件

```
beforeDestroy() {
    //取消监听
    this.$refs.maskBox.removeEventListener(
        this.mousewheelevt,
        this.wheelHandle,
        {
        passive: true,
        }
    );
},
```

### 4.拖拽图片

```
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;
    }
},
```

### 5.旋转图片

```
handleRotate() {
    this.deg += 90;
    if (this.deg >= 360) {
    this.deg = 0;
    }
    this.size = 0;
    this.scale = `scale(1) rotateZ(${this.deg}deg)`;
},
```