原生js实现图片预览,旋转,放大,缩小,拖拽

效果图.png

HTML代码

  <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <link rel="stylesheet" type="text/css" href="upload.css"/>
    <script type="text/javascript" src="upload.js"></script>
</head>
<body>
        <img src="壁纸1.jpg" onclick="imgSee(this)" >
        <div class="imgSee" style="z-index: 999;">
            <div id="imgbox">
                <img  id="imgSeeimg">
            </div>
            <!--功能区-->
            <div class="function">
                <i class="imgEnlarge" onclick="enlarge()"></i>
                <i class="imgNarrowe" onclick="narrowe()"></i>
                <i class="imgIcon" onclick="imgRotate()"></i>
                <a onclick="imgDisappea(this)"></a>
            </div>
        </div>
        
</body>
</html>

CSS代码(有几个功能背景图，在最下面)

#prompt3 {
 width: 100px;
 height: 100px;
 /*z-index: 999;*/
 float: left;
 /*border: 1px solid black;*/
 text-align: center;
 position: relative;
}
#imgSpan {
 position: absolute;
 /*top: 25px;*/
 /*left:15px;*/
    /*background-color: #52a7f8;*/
    color: #ffffff;
    border-radius: 5px;
    width: 100px;
    height: 100px;
    /*padding-top: 36px;*/
}
#imgSpan:hover{
    background-color: #1879d4;
}

.filepath {
 width: 100%;
 height: 100%;
 opacity: 0;
}
#previewImg{
    float: left;
}
#previewImg p{
    width: 100px;
    height: 100px;
    margin-right: 5px;
    float: left;
    position: relative;
    padding-bottom:17px ;
}
#previewImg img{
    width: 100px;
    height: 100px;
    border: 1px solid #d4d4d4;
    padding: 5px;
}
#previewImg span{
    cursor:pointer;
    position: absolute;
    bottom:-10px;
    display: none;
    background: #999999;
    border-radius: 5px;
    color: #fff;
    padding: 2px 5px;
    left: 30px;
}
#previewImg p:hover .delSpan{
    display: inline-block;
}
.imgSee{
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: rgba(0,0,0,0.1);
    top: 0;
    left: 0;
    display: none;
}
#imgbox{
    width: 800px;
    height: 800px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -400px;
    margin-left: -400px;
    text-align: center;
}
#imgSeeimg{
    display: inline-block;
}
.function a{
    display: block;
    width: 32px;
    height: 32px;
    background-image: url(x.png);
    text-decoration: none;
    color: #000000;
    background-size: 100%;
}
.function{
    width: 150px;
    background-color: #FFFFFF;
    position: absolute;
    display: flex;
    justify-content: space-between;
    right: 6%;
    top: 50px;
}
.imgIcon{
    display: block;
    width: 32px;
    height: 32px;
    background-image: url(xuanzhuan.png);
    background-size: 100%;
}

.imgEnlarge{
    display: block;
    width: 32px;
    height: 32px;
    background-image: url(./fangda.png);
    background-size: 100%;
}
.imgNarrowe{
    display: block;
    width: 32px;
    height: 32px;
    background-image: url(./suoxiao.png);
    background-size: 100%;
}

JS代码

function changepic() {
           var file = document.getElementById('file')
           var reads = new FileReader();
           var preview = $('#file').parent().prev();
           var str = ''
           f = file.files[0];
           // 将图片存入
           reads.readAsDataURL(f);
           reads.onload = function() {
               str = "<p><img src='" + this.result +
                   "' onclick='imgSee(this)' title='点击查看图片'/><span class='delSpan' onclick='del(this)'>删除</span></p>"
               preview.append(str);
           }
           
           if (preview.children().length >= 2) {
               file.parentNode.style.cssText = 'display: none;'
               return
           }
           file.value = null
       };
       // 删除写法
       function del(e) {
           // 兼容IE的写法
       
           document.getElementById('file').value = null
           document.getElementById('prompt3').style.cssText = 'display: block;'
       
           e.parentNode.parentNode.removeChild(e.parentNode);
           // e.parentNode.remove()
       }
       // 查看图片函数
       // 先保存原始宽度
       var initialWith = 0
       // 显示图片
       function imgSee(e) {
           var imgDisplay = document.getElementsByClassName('imgSee')[0];
           document.onselectstart = function(){return false;}
           imgDisplay.style.cssText = 'display: block; z-index: 999'
           document.getElementById('imgSeeimg').src = e.src
           document.getElementById('imgSeeimg').style.cssText = "transform:rotate(0deg)"
           n=0
           document.getElementById('imgSeeimg').style.marginTop = (800-document.getElementById('imgSeeimg').height)/2 + 'px'
       }
       // 点击后图片消失
       function imgDisappea(e) {
           document.onselectstart = function(){return true;}
           e.parentNode.parentNode.style.cssText = 'display: none;'
           document.getElementById('imgSeeimg').style.cssText = ''
       }
       var n=0
       var i=1
       // 点击后图片旋转90度
       function imgRotate(){
           let img =  document.getElementById('imgSeeimg')
           var time = setInterval(function(){
               n +=5
               if(n==90*i){
                   i++
                   clearInterval(time)
               }
               img.style.transform= "rotate("+n+"deg)"
           },30)
           
       }
       window.onload = function(){
           var dv = document.getElementById('imgSeeimg');
           var x = 0;
           var y = 0;
           var l = 0;
           var t = 0;
           var isDown = false;
           //鼠标按下事件
           dv.onmousedown = function(e) {
               //获取x坐标和y坐标
               x = e.clientX;
               y = e.clientY;
               e.preventDefault();
               //获取左部和顶部的偏移量
               l = dv.offsetLeft;
               t = dv.offsetTop;
               //开关打开
               isDown = true;
               //设置样式  
               dv.style.position = 'absolute'
               document.getElementById('imgSeeimg').style.marginTop = '0px'
               var nx = e.clientX;
               var ny = e.clientY;
               var nx = e.clientX;
               var ny = e.clientY;
               var nl = nx - (x - l);
               var nt = ny - (y - t);
               dv.style.left = nl + 'px';
               dv.style.top = nt + 'px';
               dv.style.cursor = 'move';
           }
           //鼠标移动
           window.onmousemove = function(e) {
               if (isDown == false) {
                   return;
               }
               document.getElementById('imgSeeimg').style.marginTop = '0px'
               // dv.style.position = 'absolute'
               //获取x和y
               var nx = e.clientX;
               var ny = e.clientY;
               //计算移动后的左偏移量和顶部的偏移量
               var nl = nx - (x - l);
               var nt = ny - (y - t);
               dv.style.left = nl + 'px';
               dv.style.top = nt + 'px';
           }
           //鼠标抬起事件
           dv.onmouseup = function() {
               //开关关闭
               isDown = false;
               dv.style.cursor = 'default';
           }
       }
       // 放大图片功能
       function enlarge(){
           var width= document.getElementById('imgSeeimg').width
           var n = width
           var time = setInterval(function(){
               n = n+10
               if(n>width*1.2){
                   clearInterval(time)
               }
               document.getElementById('imgSeeimg').style.width = n+'px'
           },30)
       }
       function narrowe(){
           // if(initialWith!=0){
           //  document.getElementById('imgSeeimg').style.width = initialWith+'px'
           // }
           var width = document.getElementById('imgSeeimg').width
           var n = width
           var time = setInterval(function(){
               n = n-10
               if(n<width*0.8){
                   clearInterval(time)
               }
               document.getElementById('imgSeeimg').style.width = n+'px'
           },30)
       }