如何使用imgViewer插件设计图片的缩放功能

如何使用imgViewer插件设计图片的缩放功能

在这篇文章中,我们将学习如何使用jQuery imgViewer插件实现图像的缩放和平移。从这个链接下载该插件,并在你的工作文件夹中收集所有预编译的文件。

CDN 链接:

<script type=”text/javascript” src=”https://code.jquery.com/jquery-1.12.4.min.js”> </script>
<script type=”text/javascript” src=”https://code.jquery.com/ui/1.12.1/jquery-ui.min.js”></script>
<script type=”text/javascript” src= “https://unpkg.com/jquery-mousewheel@3.1.13”></script>
<script type=”text/javascript” src= “lib/hammer.min.js”></script>
<script type=”text/javascript” src= “https://unpkg.com/jquery-hammerjs@2.0.0”></script>
<script type=”text/javascript” src= “lib/imgViewer.js”></script>

注意:开发人员应注意将依赖关系(文件)按要求放在适当的文件夹路径中。

例子1:在这个例子中,在代码的HTML部分放置一个图像元素,并使用JavaScript块将插件附加到图像上。

<!DOCTYPE html>
<html>
 
<head>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0,
                   maximum-scale=1.0, user-scalable=yes" />
    <script type="text/javascript"
            src=
"https://code.jquery.com/jquery-1.12.4.min.js">
    </script>
    <script type="text/javascript"
            src=
"https://code.jquery.com/ui/1.12.1/jquery-ui.min.js">
    </script>
    <script type="text/javascript"
            src=
"https://unpkg.com/jquery-mousewheel@3.1.13">
    </script>
    <script type="text/javascript"
            src="lib/hammer.min.js">
    </script>
    <script type="text/javascript"
            src=
"https://unpkg.com/jquery-hammerjs@2.0.0">
    </script>
    <script type="text/javascript"
            src="lib/imgViewer.js">
    </script>
 
</head>
 
<body>
    <table cellspacing="0" cellpadding="0"
           border="0" style="width:100%; min-width:320px;">
        <tr>
            <td style="padding: 10px">
                <h2 align="center" style="color:green">
                    GeeksforGeeks
                </h2>
                <div align="center">
                    <img id="image1"
                        src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220109233330/background2-298x300.jpg"
                        width="80%" />
                     
<p></p>
 
                    <button id="toggleZoom">Zoom On</button>
                     
<p></p>
 
                    Zoom:
                    <input id="zoom" type="number"></input>
                    <br />
                    Maximum Zoom:
                    <input id="mxzoom" type="number" min="1"></input>
                </div>
            </td>
        </tr>
    </table>
 
    <script type="text/javascript">
        ; (function () {
            (window).on("load", function () {
                (document).ready(function () {
 
                    varzoom = ('#zoom');
 
                    varimg = ("#image1").imgViewer({
                        zoomMax: 2,
                        zoomable: false,
                        draggable: false,
                        onReady: function () {
                            this.options.zoom = 2;
                            this.panTo(1, 1);
                        },
                        onUpdate: function () {
                            zoom.val(this.options.zoom);
                        }
                    });
 
                    var toggleZ =("#toggleZoom");
                    if (img.imgViewer("option", "zoomable"))
                        toggleZ.text("Zoom Off");
                    else
                        toggleZ.text("Zoom On");
 
                    toggleZ.on("click", function () {
                        var this =(this);
                        if (this.text() == "Zoom On") {
                            this.text("Zoom Off");
                            img.imgViewer("option", "zoomable", true);
                        } else {
                            this.text("Zoom On");
                            img.imgViewer("option", "zoomable", false);
                        }
                    });
                    zoom.on('change', function (e) {
                        img.imgViewer("option", "zoom",(this).val());
                    });
                    var mxZoom = img.imgViewer("option", "zoomMax");
                    if (mxZoom !== null) {
                        ('#mxzoom').val(mxZoom);
                    }
                    ('#mxzoom').on('change', function (e) {
                        img.imgViewer("option",
                        "zoomMax", $(this).val());
                    });
                });
            });
 
        })(jQuery);
    </script>
</body>
 
</html>

输出:

如何使用imgViewer插件设计图片的缩放功能?

例子2:下面的代码演示了onclick事件。

<!DOCTYPE html>
<html>
 
<head>
    <title>imgViewer Plugin</title>
    <link rel="stylesheet"
          href=
"https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"
          media="screen">
 
    <script type="text/javascript"
            src=
"https://code.jquery.com/jquery-1.12.4.min.js">
    </script>
    <script type="text/javascript"
            src=
"https://code.jquery.com/ui/1.12.1/jquery-ui.min.js">
    </script>
    <script type="text/javascript"
            src=
"https://unpkg.com/jquery-mousewheel@3.1.13">
    </script>
    <script type="text/javascript"
            src="lib/hammer.min.js">
    </script>
    <script type="text/javascript"
            src=
"https://unpkg.com/jquery-hammerjs@2.0.0">
    </script>
    <script type="text/javascript"
            src="lib/imgViewer.js">
    </script>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0,
                   maximum-scale=1.0, user-scalable=yes" />
</head>
 
<body>
    <h1 align="center">imgViewer Plugin onclick event</h1>
    <div align="center">
        <img id="image1"
             src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220109233330/background2-298x300.jpg"
            width="40%" />
    </div>
 
    <script type="text/javascript">
        ; (function () {
            (window).on("load", function () {
                (document).ready(function () {
                    varimg = ("#image1").imgViewer({
                        onClick: function (e) {
                            varmessage =
                                ("<div id='dialog-modal'></div>").dialog({
                                    modal: true,
                                    title: "You clicked at:",
                                });
                            var pos = this.cursorToImg(e.pageX, e.pageY);
                            var imgpos = this.relposToImage(pos);
                            message.html("Page X: " + e.pageX +
                                "<br/>Page Y: " + e.pageY +
                                "<br/>Image Pixel X: " + imgpos.x +
                                "<br/>Image Pixel Y: " + imgpos.y +
                                "<br/>Image Rel X: " + pos.x.toFixed(3) +
                                "<br/>Image Rel Y: " + pos.y.toFixed(3));
                        }
                    });
                });
            });
        })(jQuery);
    </script>
</body>
 
</html>

输出:

如何使用imgViewer插件设计图片的缩放功能?

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程