精华内容
下载资源
问答
  • 图片在浏览器中上传图片之后被莫名其妙的反转了90度![图片说明](https://img-ask.csdn.net/upload/201703/10/1489153781_489473.png) 跪求大神帮忙哇。。。。
  • JS图片img旋转、放大、缩小

    千次阅读 2019-09-27 09:28:43
    <div id="outerdiv"> <div>...img id="bigimg" src="" /> </div> </div> JS代码: <script> $(function(){ $('#uploadImagefileLists').on('click', '.im...

    HTML代码:

    <div id="outerdiv">
      <div>
          <img id="bigimg" src="" />
      </div>
    </div>

    JS代码:

    <script>
    $(function(){
        $('#uploadImagefileLists').on('click', '.imgWrap img', function(){
            $('#outerdiv').unbind("click");
            $('#outerdiv').append(
                '<div id="imgButtons" style="padding-top:5px;">'
                    +'<input type="button" value="放大" οnclick="imgToSize(50)"> '
                    +'<input type="button" value="缩小" οnclick="imgToSize(-50)"> '
                    +'<input type="button" value="向左旋转45°" id="rotLeft" οnclick="imgRotateLeft()"> '
                    +'<input type="button" value="向右旋转45°" id="rotRight" οnclick="imgRotateRight()"> '
                    +'<input type="button" value="关闭" οnclick="closeOuterdivView()">'                
                +'</div>');
        });
    });

    var size = 0;
    //放大缩小图片
    function imgToSize(size) {
        var img = $("#bigimg");
        var oWidth = img.width(); //取得图片的实际宽度
        var oHeight = img.height(); //取得图片的实际高度
        img.width(oWidth + size);
        img.height(oHeight + size / oWidth * oHeight);
    };

    var r = 0;
    //向左旋转
    function imgRotateLeft() {
        var img = $("#bigimg");
        r -= 45;
        img.css('transform', 'rotate(' + r + 'deg)');
    };

    //向右旋转
    function imgRotateRight() {
        var img = $("#bigimg");
        r += 45;
        img.css('transform', 'rotate(' + r + 'deg)');
    };

    //关闭图片预览div层--outerdiv
    function closeOuterdivView(){
        $("#outerdiv").fadeOut("fast");
        $("#bigimg").css('width', 'auto');
        $("#bigimg").css('height', 'auto');
        $("#bigimg").css('transform', 'rotate(' + 0 + 'deg)');
        $("#imgButtons").remove();
    }
    </script>

    效果图:

    展开全文
  • 如何让图片旋转

    千次阅读 2019-05-08 08:20:09
    (1.)给他宽高(图片的宽高),给他定位(没有定位图片是不会动的),后面的宽高是图片的位置。最后面是动态的细节。动画效果,圆圈+1秒+无限循环+播放 ...(3)在里面放上图片,用img放,前面就是用img包裹的。 ...

    在这里插入图片描述
    (1.)给他宽高(图片的宽高),给他定位(没有定位图片是不会动的),后面的宽高是图片的位置。最后面是动态的细节。动画效果,圆圈+1秒+无限循环+播放
    2.
    在这里插入图片描述
    (2.)这个就是旋转了,从0%到100%,,从0到360,rotate是旋转,deg是度的意思。
    3.
    在这里插入图片描述

    (3)在里面放上图片,用img放,前面就是用img包裹的。

    展开全文
  • jQuery旋转插件jquery.rotate.js 让图片旋转  简介:今天介绍一款 jQuery 插件jqueryrotate,它可以实现旋转效果。jqueryrotate 支持所有主流浏览器,包括 IE6。 演示1 直接旋转一个角度 $('#img1')....

    jQuery旋转插件jquery.rotate.js 让图片旋转

     简介: 今天介绍一款 jQuery 插件jqueryrotate,它可以实现旋转效果。jqueryrotate 支持所有主流浏览器,包括 IE6。

    jQuery旋转插件,jqueryrotate, Rotate.js

    演示1 直接旋转一个角度

    $('#img1').rotate(45);


    演示2 鼠标移动效果

    $('#img2').rotate({ 
        bind : {
            mouseover : function(){
                $(this).rotate({animateTo: 180});
            }, mouseout : function(){
                $(this).rotate({animateTo: 0});
            }
        }
    });


    演示3 不停旋转

    var angle = 0;
    setInterval(function(){
        angle +=3;
        $('#img3').rotate(angle);
    }, 50);

    var rotation = function (){
        $('#img4').rotate({
            angle: 0, 
            animateTo: 360, 
            callback: rotation
        });
    }
    rotation();

    var rotation2 = function(){
        $('#img5').rotate({
            angle: 0, 
            animateTo: 360, 
            callback: rotation2,
            easing: function(x,t,b,c,d){
                return c*(t/d)+b;
            }
        });
    }
    rotation2();


    演示4 点击旋转

    $('#img6').rotate({ 
        bind: {
            click: function(){
                $(this).rotate({
                    angle: 0,
                    animateTo: 180,
                    easing: $.easing.easeInOutExpo
                });
            }
        }
    });

    var value2 = 0;
    $('#img7').rotate({ 
        bind: {
            click: function(){
                value2 +=90;
                $(this).rotate({
                    animateTo: value2
                });
            }
        }
    });

    如果觉得《jQuery旋转插件jquery.rotate.js 让图片旋转》不错,请把本站告诉您身边的朋友!

    转载注明本文地址:http://www.ablanxue.com/prone_21720_1.html


    注:需要案例和js的可以去下载,http://download.csdn.net/detail/lj88811498/8696185

    展开全文
  • flex图片旋转

    2011-12-02 15:14:44
    简单的图片旋转功能 详细的代码 图片按顺时针自动旋转
  • 图片旋转总结

    千次阅读 2016-07-09 19:23:37
    之前有做过一个浏览器上看到的图片效果正,需要旋转图片,于是就做了一下图片的旋转功能,图片旋转分成两个步骤。 1. 浏览器上先旋转,看效果 ; 2,确定旋转角度,后台原图片旋转。 那就先来说说浏览器上如何...
    之前有做过一个浏览器上看到的图片效果不正,需要旋转图片,于是就做了一下图片的旋转功能,图片旋转分成两个步骤。
    
    1. 浏览器上先旋转,看效果 ; 2,确定旋转角度,后台原图片旋转。

    那就先来说说浏览器上如何旋转图片吧:

    首先,看看样式

    .imgtest1{
        -moz-transform:rotate(90deg);
        -ms-transform:rotate(90deg);
        -webkit-transform:rotate(90deg);
        -o-transform:rotate(90deg);
       
    }
    .imgtest2{
        -moz-transform:rotate(180deg);
        -ms-transform:rotate(180deg);
        -webkit-transform:rotate(180deg);
        -o-transform:rotate(180deg);
       
    }
    .imgtest3{
        -moz-transform:rotate(270deg);
        -ms-transform:rotate(270deg);
        -webkit-transform:rotate(270deg);
        -o-transform:rotate(270deg);
       
    }
    .imgtest4{
        -moz-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        -o-transform:rotate(0deg);
       
    }

    接下来就是点击旋转按钮的事件啦,因为360度每次转90度,第四次的时候就回到原点了,所以用 取余的方式来判断要旋转的角度

    if(i%4==1){
             if(i>4){
             $(Img).removeClass("imgtest4");
             }
             $(Img).addClass("imgtest1");
             degree=90;
             // Img.style.MozTransform="rotate(90deg)";
            }
            else if(i%4==2){
              $(Img).removeClass("imgtest1");
              $(Img).addClass("imgtest2");
              degree=180;
             // Img.style.MozTransform="rotate(180deg)";
            }
            else if(i%4==3){
              $(Img).removeClass("imgtest2");
              $(Img).addClass("imgtest3");
              degree=270;
              // Img.style.MozTransform="rotate(270deg)";
            }
            else{
              $(Img).removeClass("imgtest3");
              $(Img).addClass("imgtest4");
              degree=0;
               //Img.style.MozTransform="rotate(360deg)";
            }

    以上方式,就可以在浏览器上看到图片旋转的效果了,而且支持了多浏览器的旋转哦,四个主流的浏览器: 谷歌,火狐,欧朋,还有苹果的浏览器!

    浏览器上的效果有了之后,就是后台真正的图片旋转了,百度了一个有用的图片旋转类:
    package com.erke.utils;
    import java.awt.Graphics2D; 
    import java.awt.Image; 
    import java.awt.Rectangle; 
    import java.awt.RenderingHints;
    import java.awt.image.BufferedImage;
    import java.awt.Dimension; 
     
    public class RotateImage {  //图片旋转
     
        public static BufferedImage Rotate(Image src, int angel) {   //传进来图片的路径,和旋转的角度,好像只能是90度90度这样旋转
            int src_width = src.getWidth(null); 
            int src_height = src.getHeight(null); 
            // calculate the new image size 
            Rectangle rect_des = CalcRotatedSize(new Rectangle(new Dimension( 
                    src_width, src_height)), angel); 
     
            BufferedImage res = null; 
            res = new BufferedImage(rect_des.width, rect_des.height, 
                    BufferedImage.TYPE_INT_RGB); 
            Graphics2D g2 = res.createGraphics(); 
            // transform 
            g2.translate((rect_des.width - src_width) / 2, 
                    (rect_des.height - src_height) / 2); 
            g2.rotate(Math.toRadians(angel), src_width / 2, src_height / 2); 
     
            g2.drawImage(src, null, null); 
            return res; 
        } 
     
        public static Rectangle CalcRotatedSize(Rectangle src, int angel) { 
            // if angel is greater than 90 degree, we need to do some conversion 
            if (angel >= 90) { 
                if(angel / 90 % 2 == 1){ 
                    int temp = src.height; 
                    src.height = src.width; 
                    src.width = temp; 
                } 
                angel = angel % 90; 
            } 
     
            double r = Math.sqrt(src.height * src.height + src.width * src.width) / 2; 
            double len = 2 * Math.sin(Math.toRadians(angel) / 2) * r; 
            double angel_alpha = (Math.PI - Math.toRadians(angel)) / 2; 
            double angel_dalta_width = Math.atan((double) src.height / src.width); 
            double angel_dalta_height = Math.atan((double) src.width / src.height); 
     
            int len_dalta_width = (int) (len * Math.cos(Math.PI - angel_alpha 
                    - angel_dalta_width)); 
            int len_dalta_height = (int) (len * Math.cos(Math.PI - angel_alpha 
                    - angel_dalta_height)); 
            int des_width = src.width + len_dalta_width * 2; 
            int des_height = src.height + len_dalta_height * 2; 
            return new java.awt.Rectangle(new Dimension(des_width, des_height)); 
        } 
       
       
        /**
         * 旋转图片的另一种方法  //该方法图片会有黑边出现,有点危险
         * @param bufferedimage
         * @param degree
         * @return
         */
        public static BufferedImage rotateImage(final BufferedImage bufferedimage,
                final int degree) {
            int w = bufferedimage.getWidth();
            int h = bufferedimage.getHeight();
            int type = bufferedimage.getColorModel().getTransparency();
            BufferedImage img;
            Graphics2D graphics2d;
            (graphics2d = (img = new BufferedImage(w, h, type))
                    .createGraphics()).setRenderingHint(
                    RenderingHints.KEY_INTERPOLATION,
                    RenderingHints.VALUE_INTERPOLATION_BILINEAR);
            graphics2d.rotate(Math.toRadians(degree), w / 2, h / 2);
            graphics2d.drawImage(bufferedimage, 0, 0, null);
            graphics2d.dispose();
            return img;
        }
    }


    有了这个工具类,就可以去获取图片来旋转了,代码如下:

            try{
                 src = ImageIO.read(new File(urlpath)); //从路径中读取到这张图片
             
            }catch(Exception e){
                 log.error("read的时候出错啦");
            }
             try{
            BufferedImage des = RotateImage.Rotate(src, degree);  //调用图片旋转的函数,返回des就是旋转后的图片
            
            ImageIO.write(des, "jpg", new File(urlpath));  //把旋转后的图片写回到原先的地址,相当于覆盖原图片啦
            }catch(Exception e){
                log.error("write的时候出错啦");
            }

    就这样,图片在浏览器上的旋转,和实际图片的物理旋转都实现了,感觉么么哒!
    展开全文
  • 1,opencv实现图片旋转: import cv2 import numpy as np img = cv2.imread('image0.jpg',1) cv2.imshow('src',img) imgInfo = img.shape height = imgInfo[0] width = imgInfo[1] # 2*3 matRotate = cv2....
  • CSS 图片旋转

    千次阅读 2016-12-11 11:58:04
    *" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <head><title>图片旋转-郭峰</title><meta http-equiv="pragma" content=
  • 大家好,最近博主在写一个音乐页面,突发想到播放音乐的时候让图片旋转是不错的功能,下面我介绍我实现的效果。 首先,先处理css运动。 要想用css写动画,就要先知道动画函数@keyframes定义一个动画。代码如下: ...
  • 在IOS那边拍照上传照片之后 默认会把图片旋转了90度 IOS的浏览器内核去处理照片的时候 会自动检测当前图片的Exif信息 的到角度信息 去自动旋转处理 Android某些的浏览器内核不会去处理图片的角度信息 所以导致了了H5...
  • img 图像旋转

    千次阅读 2013-04-16 07:11:52
    >> a=imread('1.jpg'); >> b=imrotate(a,30,'nearest','crop'); >> subplot(1,2,1);imshow(a); >> subplot(1,2,2),imshow(b); >>
  • 如何用CSS动画特效让图片旋转起来

    千次阅读 2020-02-23 20:55:38
    杜老师逆战班学员 2020.02.22 我们通常浏览网页,基本上看过去都是呈现着各种文字加图片的2D效果信息,作为一名前端开发工程师非常重要的工作就是要...今天要跟大家分享交流的是怎么用CSS动画特效实现图片旋转的效...
  • python图片旋转

    千次阅读 2016-01-09 12:23:30
    python图片旋转
  • js实现图片旋转

    千次阅读 2014-04-10 14:22:21
    1 使用jQueryRotate.js实现 示例代码: 测试结果:chrome下效果正常,旋转img对象仍为img对象;...如果图像旋转后,进行其它操作,则可用此方法。若进行其它操作,如放大、缩小图像,则此方法实现较复杂。  
  • javascript 实现的图片旋转功能!在业务开发功能中,往往用户需要对上传的图片进行适当的旋转!那么这个可能就是你需要的工具!
  • 图片旋转后保存base64

    千次阅读 2018-12-05 11:31:56
    图片旋转后保存base64——canvas 描述 图片旋转的如果不用保存的话,用css3就很简单了,至于用那些css3的属性和方法,自行在网上查。这里介绍用canvas 介绍图片旋转后保存base64。 思路 在canvas里进行图片旋转...
  • CSS3只背景图片旋转180度

    千次阅读 2021-02-04 11:39:05
    最近写驾驶舱的时候琢磨了一个问题,就是单纯的使背景图片旋转的一定的角度。 只通过CSS3的transfrom整个容器都翻转了一定的角度,达到我想要的效果。 然后通过研究和参考相关文章总算实现了这个效果,话多说...
  • css 实现 图片旋转

    万次阅读 2018-08-07 21:55:58
    鼠标放在图片旋转180度 可用在头像上 比较俏皮 效果如下: 代码如下: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8...
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>旋转练习</title> <style type="text/css"> /* S = 样式设置 */ ...
  • OpenCV: 图片旋转

    千次阅读 2019-06-05 23:03:50
    我们使用getRotationMatrix2D()函数来...参数2:图片旋转角度 参数3:缩放比例 import cv2 import numpy as np img = cv2.imread('test0.png',1) imgInfo = img.shape height = imgInfo[0] width = imgInfo[1] ...
  • html图片旋转动画

    千次阅读 2019-06-18 09:38:10
    实现效果:鼠标悬停在图片的一定范围内,红色箭头指向的圆圈会旋转,移出则停止 HTML源代码: <div class="case-item"> <div class="ih-item circle effect1"> <a href=...
  • flex 图片旋转

    千次阅读 2010-09-20 16:08:00
    flex 图片旋转
  • OpenCV图片旋转

    千次阅读 2018-10-12 16:20:51
    代码位置:6-ImageRotation.py ...img = cv2.imread('./res/aero3.jpg') print(img.shape[:2]) width, height = img.shape[:2] M = cv2.getRotationMatrix2D((width/2, height/2), 45, 1) img_ro = cv2.warpAf...
  • 并且照片竖怕才会有此问题,横拍存在。 原因分析: 手机拍照时,用相机拍摄出来的照片是含有EXIF信息的,在我们得到 UIImage时,可以查看此Image的imageOrientation属性,其实就是指的EXIF中的orientation信息...
  • python图片旋转去黑边

    千次阅读 2020-06-29 23:56:20
    python图片旋转去黑边 简单的图片旋转但是出现黑边 import cv2 #opencv-python库 import random import numpy as np for i in range(1, 10): img = cv2.imread('D:/xxx/'+str(i)+'.png') imginfo = img.shape ...
  • 小程序中解决图片旋转问题

    千次阅读 2019-10-16 21:19:14
    在一些相机设备中因手持方向的原因导致图片会有一个旋转角度,在图片加载后旋转角度被忽略了,导致图片看过去是旋转的, 小程序中需要借助任何工具获取图片信息,通过wx....小程序中处理图片旋转条件 需要在wxml...
  • QT图片旋转

    万次阅读 2013-07-03 10:27:18
    1、使用QPixmap的transformed函数旋转,这个函数默认是以图片中心为旋转点,能随意设置旋转点,使用如下: QMatrix leftmatrix;  leftmatrix.rotate(180); QLabel *pLabel= new QLabel(); pLabel->...
  • android图片处理:让图片一直匀速旋转

    万次阅读 多人点赞 2016-08-10 20:19:39
    让图片匀速旋转
  • hover 时图片旋转

    2016-11-03 17:29:00
    图片循环旋转 img{ transition:all .5s;} img:hover{  transform:rotate(30deg);//旋转的角度,可以是负数 }
  • JS实现图片旋转90度

    万次阅读 2018-05-29 17:41:56
    &lt;!DOCTYPE html&gt; &lt;html&gt; &...图片旋转&lt;/title&gt; &lt;script&gt; window.onload = function(){ var current = 0; document.getElement...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 38,775
精华内容 15,510
关键字:

img不让图片旋转