ZoomMarker

国际化，主分支说明文档调整为English，中文分支请移步这里
Internationalization, the main branch description document is adjusted to English, Chinese branch please click here

A jQuery plugin for image zoom in and out, customize tags and canvas are also supported.
You can zoom and drag image by using this plugin. What you have to do is just import this plugin to your project.
Feedback is welcome for any suggestions.

Preview

Click Here for an example with basic usages.
Click Here for an example with different region views. They can show images without disturbing each other.

Version

Require

I use an other plugin written by myself in the above sample: EasyLoading
This plugin should also using jQuery.
If you are interesting with EasyLoading, please add a little star.

Usages

1. Quick start

Import JavaScript and CSS files of ZoomMarker.

<link rel="stylesheet" href="css/zoom-marker.css"> <script src="js/zoom-marker.js"></script> 

Import 3rd libraries.

<script src="js/jquery-1.11.3.min.js"></script> <script src="js/jquery.mousewheel.min.js"></script> <script src="js/hammer.min.js"></script> 

The example above has used loading animation, so I also import an other plugin named EasyLoading. It can be used independently so importing is unnecessary if you do not need loading at all.
Import this loading animation plugin:

<link rel="stylesheet" href="css/easy-loading.css"> <script src="js/easy-loading.js"></script> 

Add the necessary html tags, ATTENTION!! img tag SHOULD has a unique id attribute for its own

<div id="zoom-marker-div" class="zoom-marker-div">     <img class="zoom-marker-img" id="zoom-marker-img" alt="..." name="viewArea"  draggable="false"/> </div> 

Triggering initialization function in ready()

$(document).ready(function () {     $('#zoom-marker-img').zoomMarker({         src: "img/mountain.jpg",         rate: 0.2,         width: 600,         max: 3000,         markers:[             {src:"img/marker.svg", x:500, y:500}             ]     }); }) 

As we can see, moutain.jpg is a sample image file that shown in this example, and marker.svg should be also placed in img/ folder as marker resource, these two files has already placed in their position.
Now you can see what ZoomMarker looks like. Just drag and zoom the image, click to add some tags above image.

2. Drawing with Canvas

I have placed a transparent layer above an image with same size to support canvas drawing.
To using Canvas drawing function, you should set up enable_canvas parameter to true in initialization method.

$('#zoom-marker-img').zoomMarker({     src: "img/mountain.jpg",     rate: 0.2,     width: 400,     max: 3000,     markers:[         {src:"img/marker.svg", x:200, y:200}     ],     enable_canvas: true }); 

The Canvas layer is same size to the real pixel size of image.
In the example below, I wrote a line start from [100, 100] to the position of mouse clicking.

item.on("zoom_marker_mouse_click", function(event, position){     // draw a line     const context = item.zoomMarker_Canvas();     if(context !== null) {         context.strokeStyle = 'red';         context.moveTo(position.x, position.y);         context.lineTo(100,100);         context.stroke();     } }); 

Parameters

The parameters below are supported in initialization method.

rate

Value 0.2 default.
The floating point parameter determines the rate at which the image is scrolled and enlarged. The larger the value, the faster the image is zoomed, the range {0, 1}.

src

null for default, will not load image.
Defining the path of image for loading.

width

Used to configure the width of the image after loading, please do not use relative width positioning such as 100%, which will affect ZoomMarker works.
If you want to make the image as width as its with parent, using jQuery method to get the width of its parent, or directly get the width of the "zoom-marker-div" tag, such as:

$("#zoom-marker-img").parent().width(); $("#zoom-marker-div").width(); 

min

Limit the minimum width of the image zoom, the default minimum width is 300px.

max

Limit the maximum width of the image zoom, no restrictions by default.

markers

Recorded the parameters of the marked point, including the following parameters:

{     src: "img/marker.png",   // (required) path for image loaded     x: 500,                  // (required) X axis of marker     y: 500,                  // (required) Y axis of marker     click: function(object){         // feed back function after click event happened, object is the jQuery instance of marker     } } 

marker_size

The point size can only be square. You can configure the size of the point by this parameter.
You can also configure the size of a single point by parameter in the "zoomMarker_AddMarker" add point method.

enable_drag

Draggable function is enabled for this image or not.

auto_index_z

Automatic management of image and point level information, automatically pin the current image and marker points when clicking and dragging.

enable_canvas

Add Canvas drawing layer, as it may affect performance so turned off by default.

zoom_lock

Zoom lock, turn on the point in the picture as the zoom midpoint, off by default.
In the off state, use the mouse or two-finger zoom center to zoom in or out as the midpoint of the picture.

move_limit

Drag the seam and open it to only drag the image inside the parent container.

Methods

ZoomMarker's methods all start with "zoomMarker_" and can be called directly on your image tag jQuery object using the jQuery plugin method, such as clearing all the mark points:

    $("#viewArea").zoomMarker_CleanMarker(); 

zoomMarker_LoadImage(src)

For image loading, src is the URL or local path of image file.

zoomMarker_Zoom(center, scale)

Zoom the image.

zoomMarker_Move(x, y)

Move the picture position, Cartesian coordinate system, the coordinates of the upper left corner are (0, 0).

zoomMarker_AddMarker(marker)

Add a marker point and return the relevant parameters of the added marker point. The configuration parameters of the marker are shown in the following table.
The "x" and "y" parameters in the configuration are the coordinate positions of the marker points in the image.

(1) dialog

(2) hint

(3) return object parameters

zoomMarker_RemoveMarker(markerId)

Delete the marker point, pass in the marker point ID, and the ID can be obtained from the "id" item in the structure returned by "zoomMarker_AddMarker(marker)".

zoomMarker_CleanMarker()

Clear all points.

zoomMarker_GetPicSize()

Get the actual size of the loaded image, only return the correct image size when the image is loaded.

return function returns an object

zoomMarker_EnableDrag(enable)

Set whether to allow image dragging or not.

zoomMarker_TopIndexZ()

The image has a hierarchical relationship with the corresponding marker points, and the current image and marker point levels are topped by this method.

zoomMarker_Canvas()

The enable_canvas parameter needs to be set to true when the image is initialized.
Get the context context of the Canvas and draw the image on the image through the Canvas drawing method.
It should be noted that the drawing coordinates are based on the resolution of the image.

zoomMarker_CanvasClean()

Empty the drawing data of the Canvas.

zoomMarker_ResetImage()

Reset image size and position, including marker and canvas information.

Event

Listen for events sent by ZoomMarker via "on" or "bind".

// monitor image resource loading end message, update UI resource $('#zoom-marker-img').on("zoom_marker_img_loaded", function(event, size){     console.log("image has been loaded with size: "+JSON.stringify(size));     /** UI should be updated **/     ... }); 

size

markerObj

mouseObj