用jQuery PanZoom拖动2页图像

Question

我有一个2页的图像，我想显示在一个空间意味着一页一次显示。我也希望允许摇摄和缩放。因此，用户可以通过拖动来查看整个2页图像。

我已经使用泛变焦来做这个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
        });
    });

这是一把小提琴

https://jsfiddle.net/LzwLmc94/

图片的第一页上有“1A页，1B页，……1F页”，第二页上有类似的文字。没有缩放，你将只能看到到2B页和更多。

Answer 1

这似乎是contain库的jquery.panzoom特性的一个特性。

移除线

 contain: 'invert',

有办法吗

但是，很明显，这样就有可能将图像从框架中拖出.