利用JS的transform对图像进行处理，实现图像的旋转、缩放与适应

成昆大侠

已于 2024-01-30 20:18:30 修改

阅读量1.4k

点赞数 11

文章标签：前端 javascript html5 jquery 图像处理 css

于 2024-01-27 02:12:59 首次发布

本文链接：https://blog.csdn.net/weixin_51858505/article/details/135877654

版权

本文介绍了如何使用JavaScript的CSStransform属性，配合jQuery，创建一个可以进行图像查看、旋转、放大缩小以及尺寸适应的图片查看器，根据图片与容器的比例动态调整布局。

摘要由CSDN通过智能技术生成

利用JS的transform，做一个图片查看器，对图像进行一些简单的处理，实现图像的查看、旋转、放大、缩小、宽适应、高适应、自适应……

HTML部分：

  <body >
    <div id="button">
      <input type="button" value="宽适应" onclick="adapt('w')" />
      <input type="button" value="高适应" onclick="adapt('h')" />
      <input type="button" value="自适应" onclick="adapt('a')" />
      <input type="button" value="右旋转" onclick="rotate(1)" />
      <input type="button" value="左旋转" onclick="rotate(-1)" />
      <input type="button" value="放大" onclick="scale(1)" />
      <input type="button" value="缩小" onclick="scale(-1)" />
    </div>
    <div id="parent" style="width: 900px;height: 500px;border: solid 1px red;overflow: scroll;display: flex;justify-content:center;align-items:center;">
        <img id="image" src="" alt="" />
    </div>
  </body>

JS部分：

  <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
  <script type="text/javascript">
     //旋转度数
     var rotateNum=0;
     //放大缩小比例
     var scaleNum=1;
     $(function (){
        $("#image").on('load',function (){
           var parent=$("#parent");
           var image=$("#image");
           //清除所有变化
           image.css("transform","");
           //图片加载完成将旋转度数重置为0
           rotateNum=0;
           //图片加载完成将放大缩小比例重置为1
           scaleNum=1;
           if(image.height()/image.width()>=parent.height()/parent.width()){
              //图片高宽比大于父容器高宽比时（宽度一样时，图片比父容器高），图片高适应（将图片设置成和父容器一样高）
              image.css("height","100%");
              image.css("width","auto");
              
           }else{
              //图片高宽比小于父容器高宽比时（高度一样时，图片比父容器宽），图片宽适应（将图片设置成和父容器一样宽）
              image.css("width","100%");
              image.css("height","auto");
              
           }
        });
     });

     /**
     * 放大缩小图片
     * @param param 1=放大，-1=缩小
     */
    function scale(param){    

      if(scaleNum>10&&param>0){
        alert("已经放大到最大了！");
        return;
      }
      if(scaleNum<0.1&&param<0){
        alert("已经缩小到最小了！")
        return;
      }
      scaleNum=scaleNum+0.1*param
      //transform方法会取全局变量scaleNum
      transform();
    }

     /**
     * 旋转图片
     * @param param 1=右转90度，-1=左转90度
     */
     function rotate(param){
        rotateNum=rotateNum+90*param;
        if(rotateNum>=360){
            rotateNum=rotateNum-360;
        }
        if(rotateNum<=-360){
            rotateNum=rotateNum+360;
        }
        //旋转图片
        transform();
        //自适应
        adapt('a');
     }

     /**
     * 图片适应
     * @param param w=宽适度，h=高适应，其他值=自适应
     */
     function adapt(param){
        var parentDom=$("#parent");
        var img=$("#image");
       
        //图片处于左旋转或右旋转状态下时，
        if(rotateNum/90%2!==0){
           if(param.toLowerCase()==='w') {
              //宽适应：将图片旋转之后的宽度（即图片原来的高度），设置成父容器的宽度
              scaleNum = parentDom.width() / img.height();
           }else if(param.toLowerCase()==='h') {
              //高适应，将图片旋转之后的高度（即图片原来的宽度），设置成父容器的高度
              scaleNum=parentDom.height()/img.width();
           }else {
              // 注意：旋转之后的高是图片原来的宽，旋转之后的宽是图片原来的高
              if (img.width() / img.height() >= parentDom.height() / parentDom.width()) {
                 //图片旋转之后的高宽比大于父容器高宽比时（宽度一样时，旋转之后的图片比父容器高），图片高适应
                 adapt('h');
                 return;
              } else {
                 //图片旋转之后的高宽比小于父容器高宽比时（高度一样时，旋转之后的图片比父容器宽），图片宽适应
                 adapt('w');
                 return;
              }
           }
        }else{
           //未旋转或处于倒置状态下，
           if(param.toLowerCase()==='w') {
              //宽适应：图片的宽度等于父容器的宽度
              scaleNum = parentDom.width() / img.width();
           }else if(param.toLowerCase()==='h') {
              //高适应：图片的高度等于父容器的高度
              scaleNum=parentDom.height()/img.height();
           }else {
              if (img.height() / img.width() >= parentDom.height() / parentDom.width()) {
                 //图片高宽比大于父容器高宽比时（宽度一样时，图片比父容器高），图片高适应，代码同上
                 adapt('h');
                 return;
              } else {
                 //图片高宽比小于父容器高宽比时（高度一样时，图片比父容器宽），图片宽适应，代码同上
                 adapt('w');
                 return;
              }
           }
        }
        transform();
     }


    /**
     * 图片变化
     * */
    function transform(){
      var img=$("#image");
      var transform="";
      var parentDom=$("#parent");
      if(scaleNum!==1){
        if(scaleNum>1){
          //放大后图片左侧和右侧超过父容器处理，向右或向下移动到和父容器对齐  
          if(rotateNum/90%2===0){
            //未旋转或处于倒置状态下
            var offsetX=img.width()*scaleNum-parentDom.width();
            if(offsetX>0){                
              transform=transform+" translateX("+offsetX/2+"px) ";
            }
            var offsetY=img.height()*scaleNum-parentDom.height();
            if(offsetY>0){
              transform=transform+" translateY("+offsetY/2+"px) ";
            }
          }else{
            //处于左旋转或右旋转状态下
            var offsetX=img.height()*scaleNum-parentDom.width();
            if(offsetX>0){
              transform=transform+" translateX("+offsetX/2+"px) ";
            }
            var offsetY=img.width()*scaleNum-parentDom.height();
            if(offsetY>0){
              transform=transform+" translateY("+offsetY/2+"px) ";
            }
          }
        }
        //按全局变量缩放
        transform=transform+" scale("+scaleNum+") ";
      }
      //旋转
      if(rotateNum!==0) {
        transform = transform + "rotate(" + rotateNum + "deg) ";
      }
      img.css("transform",transform);
    }
  </script>

注意：jquery.js的版本不同，用$("#parent").height()和$("#parent").width()语法取父容器的高宽返回的值也不同，有的版本是包含滚动条的宽度的，有的则不包含。如果发现高适应（宽适应）后垂直（水平）方向仍有可滚动的滚动条，那么在计算父容器的高宽时，需要减去滚动条的宽度，即把代码中的$("#parent").height()全部换成($("#parent").height()-18)，$("#parent").width()全部换成($("#parent").width()-18)，注意加上括号。

成昆大侠

关注

11
点赞
踩
12

收藏

觉得还不错? 一键收藏
打赏
0
评论
利用JS的transform对图像进行处理，实现图像的旋转、缩放与适应

利用JS的transform，做一个图片查看器，对图像进行一些简单的处理，实现图像的查看、旋转、放大、缩小、宽适应、高适应、自适应……如果发现高适应（宽适应）后垂直（水平）方向仍有可滚动的滚动条，那么在计算父容器的高宽时，需要减去滚动条的宽度，即把代码中的$("#parent").height()全部换成($("#parent").height()-18)，$("#parent").width()全部换成($("#parent").width()-18)，注意加上括号。
复制链接

扫一扫