Preface

openseadragon is a tool with many functions for zooming and rotating image navigation;

Open the .html file in vs code, enter it <script src='openseadragon.min.js'></script>, and you can reference the functions inside;

Preview the complete program:

Insert picture description here

The environment is fully set up

The blogger builds the environment step by step from Xiaobai to the successful operation, which is only for record.

Download and install Microsoft's deep zoom composer for making zoomable pictures

Official website portal: https://www.microsoft.com/en-us/download/details.aspx?id=24819

Insert picture description here

After the download is complete, get the .msi file, double-click to install

Insert picture description here

Official website download openseadragon

Official website portal: http://openseadragon.github.io/

Insert picture description here

No need to install, just copy and paste the images文件夹sum inside openseadragon.min.js文件to the same folder where the newly created .html file is located:

Insert picture description here

Official website download and install vs code

Free, please refer to the blogger’s article for specific installation. Use vs code to create the first introductory html [Successful measurement]

demo example

A complete example, from picture making to complete code to running

First use deep zoom composer to convert the image

The original image blogger adopts:

Insert picture description here
Open the deep zoom composer software and operate the portal according to the blogger’s article below

Insert picture description here
Get the required conversion map, in the Exported Datafolder:

Insert picture description here

Write html code

Directly upload the complete code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <title>openseadragon_demoo</title>
    <script src='openseadragon.min.js'></script>
</head>
<body>
    <div id="openseadragon1" style="width: 800px; height: 600px;"></div>
</body>

<script type="text/javascript">

OpenSeadragon({
     
     

    id:'openseadragon1',
    
 
    prefixUrl: './images/',
 
    tileSources: {
     
     
 
    Image: {
     
     
 
        xmlns:  'http://schemas.microsoft.com/deepzoom/2009',
 
        Url: './9650255412_11de14e4aa_z_files/',
 
        Overlap: '1',
 
        TileSize: '256',
 
        Format : 'jpg',
 
        Size:{
     
     
 
           Height: '512',
 
              Width:  '768'
 
           }
 
        }
 
    }

})

</script>

</html>

Among them:
Insert picture description here
the contents of the folder:

Insert picture description here

run

Use the shortcut key alt和bto open it in the browser (provided that the open in brower plug-in has been installed in the vs code, you can refer to the blogger's article using vs code to create the first introductory html [measured successfully] ):

Insert picture description here

Add a few lines of code to achieve navigation and rotation functions

Insert picture description here
The expanded complete code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <title>openseadragon_demoo</title>
    <script src='openseadragon.min.js'></script>
</head>
<body>
    <div id="openseadragon1" style="width: 800px; height: 600px;"></div>
</body>

<script type="text/javascript">

OpenSeadragon({
     
     

    id:'openseadragon1',
    
 
    prefixUrl: './images/',
 
    tileSources: {
     
     
 
    Image: {
     
     
 
        xmlns:  'http://schemas.microsoft.com/deepzoom/2009',
 
        Url: './9650255412_11de14e4aa_z_files/',
 
        Overlap: '1',
 
        TileSize: '256',
 
        Format : 'jpg',
 
        Size:{
     
     
 
           Height: '512',
 
              Width:  '768'
 
           }
 
        }
 
    },

    showNavigator:true,

    // Initial rotation angle
    degrees: 90,
    // Show rotation buttons
    showRotationControl: true,
    // Enable touch rotation on tactile devices
    gestureSettingsTouch: {
     
     
        pinchRotate: true
    }

})

</script>

</html>