web浏览图片支持旋转，缩放功能

浏览图片使用了layer插件,旋转需要引用jquery.rotate.min.js 放大缩小是根据图片等比例缩放，下面是本人写的部分代码：在layer.ext.js这个插件的扩展js文件里需要加上如下代码，实现旋转，缩放功能： //旋转
        var value = 0;
        log.imgtit.find(‘a‘).on(‘click‘, function () {
            value += 90;
            log.bigimg.find(‘img‘).rotate({ animateTo: value })
        });
        var smallsize = log.bigimg.find(‘img‘).height();
        // 放大
        log.imgbar.find(‘.xubox_imgtit1 a‘).on(‘click‘, function () {
            var standard = log.bigimg.width() > log.bigimg.height() ? log.bigimg.height() : log.bigimg.width();
            if (standard - smallsize >= 100) {
                smallsize += 100;
            } else {
                smallsize = standard;
            }
            AutoResizeImage(smallsize, smallsize, log.bigimg.find(‘img‘));
        })

        //缩小
        log.imgbar.find(‘.xubox_imgtit2 a‘).on(‘click‘, function () {
            smallsize = log.bigimg.find(‘img‘).height();
            if (smallsize > 100) {
                smallsize -= 100;
            }
            AutoResizeImage(smallsize, smallsize, log.bigimg.find(‘img‘));
        })
function changesize(objImg) {
    var img = new Image();

    img.src = objImg.attr(‘src‘);
    var most = 200;        //设置最大宽度
    if (img.width > most) {
        var scaling = 1 - (img.width - most) / img.width;

        //计算缩小比例
        objImg.css({ width: img.width * scaling, height: img.height * scaling });
        //img元素没有设置高度时将自动等比例缩小

        //objImg.height = objImg.height*scaling;    //img元素设置高度时需进行等比例缩小
    }
}
function AutoResizeImage(maxWidth, maxHeight, objImg) {

    var img = new Image();

    img.src = objImg.attr(‘src‘);

    var hRatio;

    var wRatio;

    var Ratio = 1;
    var w = img.width;

    var h = img.height;

    wRatio = maxWidth / w;

    hRatio = maxHeight / h;

    if (maxWidth == 0 && maxHeight == 0) {

        Ratio = 1;

    } else if (maxWidth == 0) { //

        if (hRatio < 1)

            Ratio = hRatio;

    } else if (maxHeight == 0) {

        if (wRatio < 1)

            Ratio = wRatio;

    } else if (wRatio < 1 || hRatio < 1) {

        Ratio = (wRatio <= hRatio ? wRatio : hRatio);

    } else {
        Ratio = (wRatio <= hRatio ? wRatio : hRatio);
    }

    if (Ratio < 1) {
        w = w * Ratio;
        h = h * Ratio;
    }
    if (Ratio > 1) {

        w = w * Ratio;

        h = h * Ratio;

    }
    //根据图片大小变化定位图片位置
    var wd = $(window);
    var area1 = (wd.height() > 400 ? wd.height() - 50 : 400);
    if (area1 > h) {
        objImg.css({ top: (area1 - h) / 2 })
    } else {
        objImg.css({ top: (h - area1) / 2 })
    }

    objImg.css({ width: w, height: h });

}



这是前端代码：



<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8" />
    <link id="easyuiTheme" href="Content/themes/jquery-easyui/default/easyui.css" rel="stylesheet" />
    <script src="Scripts/jquery-easyui/jquery.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-easyui/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="Scripts/datagrid-detailview.js" type="text/javascript"></script>
    <script src="Scripts/jquery-easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"
        charset="utf-8"></script>
    <script src="Scripts/jquery.media.js" type="text/javascript"></script>
    <script src="Scripts/jwplayer/1.5/jwplayer.js" type="text/javascript"></script>
    <script src="layer/layer.min.js"></script>
    <script src="Scripts/jquery.rotate.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=tZPqYVqppsRdOD9ncyGRXsWy"></script>
    <style>

html{background-color:#E3E3E3; font-size:14px; color:#000; font-family:‘微软雅黑‘}
a,a:hover{ text-decoration:none;}
pre{font-family:‘微软雅黑‘}
.box{padding:20px; background-color:#fff; margin:50px 100px; border-radius:5px;}
.box a{padding-right:15px;}
#about_hide{display:none}
.layer_text{background-color:#fff; padding:20px;}
.layer_text p{margin-bottom: 10px; text-indent: 2em; line-height: 23px;}
.button{display:inline-block; *display:inline; *zoom:1; line-height:30px; padding:0 20px; background-color:#56B4DC; color:#fff; font-size:14px; border-radius:3px; cursor:pointer; font-weight:normal;}
.imgs img{width:300px;padding:0 30px 30px; cursor:pointer;}

    </style>
</head>
<body>
    <table id="grid1" title="接收文书证据列表" style="width: 700px; height: 300px" data-options="
                rownumbers:true,
                singleSelect:true,
                autoRowHeight:false,
                fit:true,
                fitColumns: true,
                pagination:true,
                pageSize:10">
        <thead>
            <tr>
                <th field="e_tjrdw" width="80">
                    提交人地位
                </th>
                <th field="e_tjrmc" width="100">
                    提交人姓名
                </th>
                <th field="e_wsbt" width="80" align="right">
                    文书名称
                </th>
                <th field="e_wslb" width="80" align="right">
                    类型
                </th>
                <th field="e_nrjzy" width="100" align="right">
                    证据目的
                </th>
                <th field="inserttime" width="110">
                    提交时间
                </th>
            </tr>
        </thead>
    </table>
    <div id="TV_div">
        <div id="container">
        </div>
    </div>
    <div id="certificate_dialog" class="easyui-dialog" style="width: 860px; height: 560px;
        padding: 10px 20px; background-color: White" closed="true">
        <form id="certificate_form" method="post">
        <div class="fitem" style="float: left;">
            <a class="media" href="#" id="PDFFile"></a>
        </div>
        </form>
    </div>
    <div id="imgs" class="imgs" style="display: none">
        <img id="img1" src="Content/Images/chrome.png" layer-pname="懒人之家 - 1">
    </div>
    <a id="hupload"></a>
    <script>
        ; !function () {
            layer.use(‘extend/layer.ext.js‘, function () {
                //初始加载即调用，所以需放在ext回调里
                layer.ext = function () {
                    layer.photosPage({
                        title: ‘旋转‘,
                        id: 100, //相册id，可选
                        parent: ‘#imgs‘
                    });
                };
            });
        } ();
        function getData() {
            var rows = [];
            for (var i = 1; i <= 800; i++) {
                var amount = Math.floor(Math.random() * 1000);
                var price = Math.floor(Math.random() * 1000);
                rows.push({
                    e_tjrdw: ‘法官‘ + i,
                    inserttime: $.fn.datebox.defaults.formatter(new Date()),
                    e_tjrmc: ‘开福区管理员‘ + i,
                    e_wsbt: "文书证券" + amount + "号",
                    e_wslb: "GT",
                    e_nrjzy: "GT" + i
                });
            }
            return rows;
        }

        function pagerFilter(data) {
            if (typeof data.length == ‘number‘ && typeof data.splice == ‘function‘) {    // is array
                data = {
                    total: data.length,
                    rows: data
                }
            }
            var dg = $(this);
            var opts = dg.datagrid(‘options‘);
            var pager = dg.datagrid(‘getPager‘);
            pager.pagination({
                onSelectPage: function (pageNum, pageSize) {
                    opts.pageNumber = pageNum;
                    opts.pageSize = pageSize;
                    pager.pagination(‘refresh‘, {
                        pageNumber: pageNum,
                        pageSize: pageSize
                    });
                    dg.datagrid(‘loadData‘, data);
                }
            });
            if (!data.originalRows) {
                data.originalRows = (data.rows);
            }
            var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
            var end = start + parseInt(opts.pageSize);
            data.rows = (data.originalRows.slice(start, end));
            return data;
        }

        $(function () {
            $(‘#grid1‘).datagrid({ view: detailview,
                detailFormatter: function (rowIndex, rowData) {
                    return ‘<div style="padding:2px"><table id="ddv-‘ + rowIndex + ‘"></table></div>‘;
                },
                onExpandRow: function (index, row) {
                    $(‘#ddv-‘ + index).datagrid({

                        singleSelect: true,
                        rownumbers: true,
                        fitColumns: true, //数据列自适应宽度
                        height: ‘auto‘,
                        columns: [[{
                            field: ‘c_ssdw‘,
                            title: ‘文书名称‘,
                            align: ‘center‘,
                            width: 100
                        }, {
                            field: ‘c_dsrxm‘,
                            title: ‘类别‘,
                            align: ‘center‘,
                            width: 100
                        }, {
                            field: ‘c_zjhm‘,
                            title: ‘递交时间‘,
                            align: ‘center‘,
                            width: 200
                        }, {
                            field: ‘c_sjhm‘,
                            title: ‘文件类型‘,
                            align: ‘center‘,
                            width: 150
                        }, {
                            field: ‘p_password‘,
                            title: ‘操作‘,
                            align: ‘center‘,
                            width: 150
                        }]],
                        onResize: function () {
                            $(‘#grid1‘).datagrid(‘fixDetailRowHeight‘, index);
                        },
                        onLoadSuccess: function () {
                            setTimeout(function () {
                                $(‘#grid1‘).datagrid(‘fixDetailRowHeight‘, index);
                            }, 0);
                        }

                    }).datagrid(‘loadData‘, getData1());
                },
                loadFilter: pagerFilter
            }).datagrid(‘loadData‘, getData());

        });

        function getData1() {
            var rows = [];
            for (var i = 1; i <= 10; i++) {
                var amount = Math.floor(Math.random() * 1000);
                var price = Math.floor(Math.random() * 1000);
                if (i <= 3) {
                    var buttontype = "下载";
                    var fileType = "文档";
                } else if (i > 3 & i <= 6) {
                    buttontype = "浏览";
                    fileType = "PDF";
                } else if (i > 6 & i <= 8) {
                    buttontype = "浏览";
                    fileType = "图片";
                } else if (i == 9) {
                    buttontype = "浏览";
                    fileType = "视频";
                } else {
                    buttontype = "浏览";
                    fileType = "音频";
                }
                rows.push({
                    c_ssdw: fileType,
                    c_zjhm: $.fn.datebox.defaults.formatter(new Date()),
                    c_dsrxm: fileType,
                    c_sjhm: "GT" + amount + "号",
                    p_password: "<a href=‘#‘ class=‘submenu‘ iconcls=‘icon-search‘ onclick=‘look(\"" + fileType + "\")‘><span>" + buttontype + "</span></a>"
                });
            }
            return rows;
        }

        function look(buttontype) {
            if (buttontype == "文档") {
                wdupload123();
            } else if (buttontype == "PDF") {
                lookPDF();
            }
            else if (buttontype == "图片") {
                lookPNG();
            }
            else if (buttontype == "视频" || buttontype == "音频") {
                lookTV();
            }

        }
        //下载文档
        function wdupload123() {
            $.messager.confirm(‘下载‘, ‘此文件无法在线查看，您确认下载文件吗？‘, function (r) {
                if (r) {
                    $("#hupload").attr("href", "http://192.168.0.100:8093/Media/ddff0b1286b040e88a5f07f591eebff6.flv");
                    document.getElementById("hupload").click();

                }
            });

        }
        //查看PDF
        function lookPDF() {

            $(‘#PDFFile‘).media({
                type: ‘html‘,
                width: 800, height: 490,
                src: "http://192.168.0.100:8099/doc/RECEIVE/f178a5aeee934511b912957635ad0132.pdf"
            });
            $(‘#certificate_dialog‘).show().dialog({
                title: ‘查看PDF‘,
                closed: false,
                modal: true
            });
        }
        //查看视频
        function lookTV() {
            $("#TV_div").show().dialog({
                title: ‘查看‘,
                closed: false,
                modal: true,
                height: 500,
                width: 670
            });
            var thePlayer = jwplayer("container").setup({
                flashplayer: "Scripts/jwplayer/1.5/player.swf",
                width: 640,
                height: 460,
                dock: false,
                provider: "http",
                file: "http://192.168.0.100:8093/Media/ddff0b1286b040e88a5f07f591eebff6.flv",
                autostart: true
            });
        }

        function lookPNG() {
            document.getElementById("img1").click();
        }

        //        $(document).ready(function () {
        //            var value2 = 0
        //            $("#img1").rotate({
        //                bind:{
        //         click: function () {
        //             value2 += 90;
        //             $(this).rotate({ animateTo: value2 })
        //         }
        //     }

        //            });
        //});

    </script>
</body>
</html>





源码，插件包下载：http://i.cnblogs.com/Files.aspx


 
				


				
时间： 2024-10-31 00:25:37 

		


		


	

	
	

		


		
web浏览图片支持旋转，缩放功能的相关文章


								

		

			

                S实现控制图片显示大小的方法【图片等比例缩放功能】
			

		

		

									

				S实现控制图片显示大小的方法[图片等比例缩放功能] [需求]:读取磁盘中的图片,展示在弹出框中,等比例缩放图片,使图片显示完全. (读取磁盘中的图片展示在前台,请参照我的另一篇文章:) [开发]: 调用说明: 直接调用js函数即可. 我测试是一个image 标签中直接调用,如下: <div> <img id="showImageimg"  src="/sirdifoa/applycorrection/getImage.do?imgName=2017001.j			

		

	

				

		

			

                PHP实例————图片等比例缩放功能
			

		

		

									

				在网站开发的过程中,经常要对一些图片进行一些处理,比如说缩放,裁剪,加水印等等.当然这些功能不仅仅可以用在开发网站的过程中,平时需要对图片做一些处理的时候,把这个功能封装到函数中去,要处理图片的时候,根据自己的要求在函数中添加需要的参数不就搞定了么.虽说这个对于小白来说可能一下子上来就点困难,但是一回生二回熟嘛.好了,进入正题.今天分享一个图像等比例缩放的函数.需要中的同学可以稍作修改,然后自己拿去用,就省的自己写了(大神请无视). 1.首先,了解一下图片缩放中多需要的函数 有不太明白的可以用p			

		

	

				

		

			

                图片移动旋转缩放（transform,center,bounds,frame）
			

		

		

									

				/**IOS中transform的使用*//**transform可以改变位置,尺寸,旋转角度*///frame可以改变位置,尺寸(控件所在的矩形框在父控件中的位置和尺寸,以父控件左上角为坐标原点)//center可以改变位置(控件中点的位置,以父控件的左上角为坐标原点)//bounds可以改变尺寸(控件所在矩形框的位置和尺寸,以自己左上角为坐标原点) ios7中,可以使用storyboard,可视化窗口,可手拉控件.storyboard可以实现的,代码一定可以实现. 而手写代码可以实现的,st			

		

	

				

		

			

                Vue图片浏览组件v-viewer，支持旋转、缩放、翻转等操作
			

		

		

									

				v-viewer 用于图片浏览的Vue组件,支持旋转.缩放.翻转等操作,基于viewer.js. 从0.x迁移 你需要做的唯一改动就是手动引入样式文件: 1 import 'viewerjs/dist/viewer.css' 安装 使用npm命令安装 1 npm install v-viewer 使用 引入v-viewer及必需的css样式,并使用Vue.use()注册插件,之后即可使用. 12345678910111213141516171819202122232425 <template>			

		

	

				

		

			

                android圆形旋转菜单，并支持移动换位功能
			

		

		

									

				LZ最近接手公司一个项目,需要写一个圆形的旋转菜单,并且支持菜单之间的移动换位,本来以为这种demo应该网上是很多的,想不到度娘也是帮不了我,空有旋转功能但是却不能换位置,所以LZ就只能靠自己摸索了. 最终LZ参考了网上的部分代码,重写了一个自定义的view终于实现了这个看似很吊,却没有实际意义的功能.在此贡献出来给广大码农们共享. 话不多说,先上代码: 自定义view类: public class RoundSpinView extends View { private Paint mPain			

		

	

				

		

			

                讲解一下iOS图片单指旋转缩放实现方法
			

		

		

									

				最近做一个项目,里边要做图片处理功能,其中就有图片单指旋转,缩放.由于之前还没做过这样的功能,于是乎找了下相关的资料,终于找到了一种好的实现方案.于是就仿照美图秀秀里边贴纸的功能做了一个demo...以下贴一些主要实现代码.... /*****头文件*********/ #import <UIKit/UIKit.h> @interface ImageEditView : UIView // 背景图片 @property (nonatomic, weak, readonly) UIImageVi			

		

	

				

		

			

                spring  文件上传 + 图片缩放 + 图片截取（头像功能）
			

		

		

									

				实现图片上传 用户必须能够上传图片,因此需要文件上传的功能.比较常见的文件上传组件有Commons FileUpload,这里我们选择Commons FileUpload. 首先是页面的form表单设置,记住要配method和enctype属性哦!! <form action="upload.do" method="post"            enctype="multipart/form-data">           &l			

		

	

				

		

			

                Android 中实现图片平移、缩放、旋转同步进行
			

		

		

									

				前言 之前因为项目需求,其中使用到了图片的单击显示取消,图片平移缩放功能,昨天突然想再加上图片的旋转功能,在网上看了很多相关的例子,可是没看到能同时实现我想要的功能的. 需求:(1)图片平移.缩放.旋转等一系列操作后,图片需要自动居中显示.(2)图片旋转后选自动水平显示或者垂直显示(3)图片在放大缩小的同时都能旋转 Demo实现部分效果截图 Demo主要代码 Java 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 2			

		

	

				

		

			

                Android----imageView实现图片的旋转和缩放
			

		

		

									

				import android.support.v7.app.ActionBarActivity; import android.util.DisplayMetrics; import android.annotation.SuppressLint; import android.graphics.Bitmap; import android.graphics.Matrix; import android.graphics.drawable.BitmapDrawable; import andro