Js如何实现控制图片的放大和缩小

# Js如何实现控制图片的放大和缩小

# 快速导航

# 前言

实现图片的放大和缩小,可以通过计算图片的宽度和高度来实现,在css3中提供了一种更为简洁的方法来实现图片的等比例缩放

# 示例展示

# 原生js实现如下

如下是简易的原生js实现

// 缩小与放大
var x = 1;   // 当前的x
var y = 1;   // 当前的y
function handleImg() {
   var d = document.getElementById("demo");  // 获取DOM
   if(r > 0) {
        x +=0.1;   // x坐标自加0.1
        y +=0.1;   // y坐标自加0.1
   }else {
     x -= 0.1;     // x坐标自减0.1
     y -= 0.1;     // y坐标自减0.1
   }
   // 改变现状的移动位置
   d.style.transform = 'scale('+x+','+y+')'
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

如下是html

<img src="xxx.jpg" id="demo" />
<input type="button" value="缩小" onclick="handleImg(-1)" />
<input type="button" value="放大" onclick="handleImg(1)" />

1
2
3

# Vue版本实现

用vue实现也很简单,与原生js实现的逻辑是一样的

<template>
  <div class="control-img-wrap">
        <div>
            <img :style="stylesObj" class="scale-img" src="https://img0.baidu.com/it/u=507185353,2128878975&fm=253&fmt=auto&app=120&f=JPEG?w=200&h=100" />
        </div>
        <div class="btn">
                 <el-button type="primary" @click="handleImg(-1)">缩小</el-button>
                 <el-button type="success" @click="handleImg(1)">放大</el-button>
        </div>
  </div>
</template>

<script>
  export default {
    data() {
        return {
          x: 1, // 当前的x
          y: 1, // 当前的y
          stylesObj: {
            width:"200px",
            height: "100px",
            transform: "scale(1,1)"
          }
        }
    },

    methods: {
        // 缩小与放大
        handleImg(scale) {
            if(scale > 0) {  // 向右 
                this.x += 0.1; // x坐标自加0.1
                this.y += 0.1; // y坐标自加0.1 
                console.log(this.x,this.y);
                if(this.x >= 1.5 && this.y >=1.5) {
                    this.x = 1.5;
                    this.y = 1.5;
                    this.$message({
                        message: '图片已经很大了,不能再放大了',
                        type: 'warning'
                    });
                }
            } else {
                this.x -= 0.1; // x坐标自减0.1
                this.y -= 0.1; // y坐标自减0.1
                if(this.x <= 0.1 && this.y <=0.1) {
                    this.x = 0.1;
                    this.y = 0.1;
                    this.$message({
                        message: '已经缩小到很小了,不能再小了',
                        type: 'warning'
                    });
                }
            }
           this.stylesObj.transform = `scale(${this.x},${this.y})`;
        }
    }
}
</script>
<style>
  .control-img-wrap {
    text-align: center;
    margin-top: 10px;
  }

  .scale-img {
    transform: scale(1,1);
  }

  .btn {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75