使用 jQuery PanZoom 拖动 2 页图像

Question

我有一张 2 页的图像，我想在 space 中显示，一次显示一页。我还想允许平移和缩放。因此用户可以通过拖动查看整个 2 页图像。

我已经使用 panzoom 来做到这一点 https://timmywil.github.io/jquery.panzoom/ 但是，如果不缩放，我无法拖动以查看整个图像，只能看到大约 75% 的图像。我放大图像越多，我能看到的就越多。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.panzoom/3.2.2/jquery.panzoom.js"></script>

<div class="buttons" id="myButtons" >
        <button class="zoom-in btn btn-primary btn-sm" type="button">Zoom In</button> 
        <button class="zoom-out btn btn-primary btn-sm" type="button">Zoom Out</button> 
        <button class="reset btn btn-primary btn-sm" type="button">Reset Size</button> 
</div>

<div style="max-height:none;padding:0px;height:300px;width:520px;">
   <img id="theCanvas" class="img-fluid"  draggable="false" width="516" height="730" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAA0NDQ0ODQ4QEA4UFhMWFB4bGRkbHi0gIiAiIC1EKjIqKjIqRDxJOzc7ST">
<div>

var $pz2 = $("#theCanvas");
var $buttons = $('#myButtons');
$pz2.panzoom({
        $zoomIn: $buttons.find(".zoom-in"),
        $zoomOut: $buttons.find(".zoom-out"),
        $reset: $buttons.find(".reset"),
        contain: 'invert',
        minScale: 1
    });
    $pz2.parent().on('mousewheel.focal', function(e) {
        e.preventDefault();
        var delta = e.delta || e.originalEvent.wheelDelta;
        var zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
        $pz2.panzoom('zoom', zoomOut, {
            increment: 0.1,
            focal: e
        });
    });

这是一个fiddle

https://jsfiddle.net/LzwLmc94/

图片第一页有文字"Page 1A, Page 1B, ... Page 1F"，第二页也有类似文字。如果不缩放，您最多只能看到第 2B 页，甚至更多。

Answer 1

这似乎是 jquery.panzoom 库的 contain 功能的一个功能。

删除线

 contain: 'invert',

成功了

但是，显然，然后可以将图像拖出框架...

使用 jQuery PanZoom 拖动 2 页图像

Dragging 2 page image with jQuery PanZoom

javascript

jquery

jquery.panzoom