waynegm / imgviewer Goto Github PK

i am implemented imgView for zoom the image in my website it's work well.. but in iphone body scroll with the zoom..someone can fix this

HI waynegm,
I am using your plugin its really awesome thanks.
Going ahead add feature as like image slide with your edit, save marking, add comments, next and previous slide.
A very much thank you.
But wanted small help like i have two icons for zoom in and zoom out can you please help me out to add the functionality for this icon to image zoom in and zoom out as i tried a lot could not achieve for this feature. Please let me know if you have any solution if yes can you please send me the code for my mail id [email protected].

Many Thanks,

Ashwini Kumar

How can I change coordinates on this
$("#click_position").html(e.pageX + " " + e.pageY + " " + pos.x + " " + pos.y);
to pos.x real width of image?

Hi Wayne,

Sorry to use this channel to send you a question about imgViewer. This is not an issue but I couldn't find any other appropriate place to ask you this.

Do you somehow know a way to save the image with added markers to an image or base64 encoded string (directly). I have to save the images for reporting purposes and now use a very complicated way with screenschots. I also tried to use html2canvas like this:

                    $(document).ready(function () {
                        html2canvas($img.imgNotes(), {
                            onrendered: function (canvas) {
                                 canvas.toBlob(function (blob) {
                                  saveAs(blob, "marker_image.png");
                                });
                            }
                        })
                    });

This only saves the image and not the markers. If you could provided me with a solution/suggestion here I would be very thankfull.

Best regards,
Richard

My organization recently updated IE to 11.590.17134 and now this is no longer working.

I'm trying to use imgViewer and imgNotes to create a map. I want to be able to pan around the entire map at any zoom level and at any image size. I've attempted to modify your code, but with only some success. At any zoom level other than 1, I get unexpected results, related, I believe, to the vCenter coordinates. Sometimes the panning gets stuck at the edges and the imgNotes points move out of position. Do you have any suggestions on how to make this work?

Here's a link to the final outcome of my attempts: https://scotttrichmond.github.io/ and here's the repo https://github.com/ScottTRichmond/ScottTRichmond.github.io.

Thanks for making these neat libraries available. Terribly sorry about the mess I made of your code.

Wayne,

I am not sure where to ask this. This is not an issue just something I am trying to do.

I would like a viewport area to show the full image with blank spaces on either side, but when you zoom in it uses all the viewport space. Someone did this using an older version of your library: http://jsfiddle.net/qontbr9e/10/ the only problem is it does not work with Notes.

I am willing to contribute $$$ to the project for either help figure this out, or you adding it as a feature.

David

hi! really great jquery! im trying to use it and i keep getting this error on imgNotes.js: $img.imgViewer is not a function...

I am using FileReader to upload an image and then use imgViewer on that image. How can I switch out the image if the user uploads again before submitting?

   jQuery("#input_14_103").on("change", function (e) {
       var file = this.files[0];
       var reader = new FileReader();
       reader.onload = function(event) {
           jQuery('#cover-image').attr("src", event.target.result).imgViewer({
           onUpdate: function( e, self ) {
                   var coord = self.getView();
                   jQuery("#input_14_105").val( JSON.stringify(coord) );
               }
           });

       }
       reader.readAsDataURL(file);

   });

This works fine unless the user uploads another file before they've submitted the first file. In other words, if the user changes their mind about the image they uploaded and wants to upload another instead, I need to be able to clear imgViewer and start it over again on the new image. How would I do that?

It appears that the new image is loading underneath or behind the first uploaded image and as soon as I scroll with the mouse wheel, the first image takes on the size of the second image, but doesn't actually show the second image. Thanks in advance for your help!

Hello,

First of all, thanks for the great tool!

I have implemented it into one project, but I am ecountering an issue, where the zoom image, upon initial pageload, extends over the containing div, like this:

Once I hover over the image, or refresh the page, it sets itself correctly:

I tried to simply toggle() the containing div, as a refresh, but that does not seem to work.

It actually looks like the image is overlayed incorrectly, as sometimes, on the bottom, you see two images:

Do you have any idea as to how to resolve this issue?

Hi Wayne, thanks for helping me implement the crosshair last week. I am trying to get this to work on mobile too. A few problems I am running in to:

-the crosshair is only placed on the image when the user taps the screen. I'd really like the user to be able to run their finger across their screen and the crosshair follow their finger. When the user removes their finger from the screen my #c1 div should be set with the coordinates (as in my onClick event below. Do you think this is possible with hammer.js? Is this a 'touchmove' event?

-my crosshairs don't follow the view as the page is scrolled.

I'd really appreciate your help with this.
Thanks!

function initializeApp() {
	var $img = $("#mobile-image").imgViewer({
		zoomable: true,
		draggable: true,
		zoomMax: 4,
		onClick: function( e ) {
			var pos = this.cursorToImg( e.pageX, e.pageY);
			var imgpos = this.relposToImage(pos);
			$("#c1").html("Selected: X: " + imgpos.x + " Y: " + imgpos.y);
		}
	});
	var $widg = $img.data().wgmImgViewer;
	$view = $widg.view;
	$zimg = $widg.zimg;
	$view.append('<div class="hair" id="crosshair-v"></div>');
	$view.append('<div class="hair" id="crosshair-h"></div>');
	var cH = $('#crosshair-h');
	var cV = $('#crosshair-v');
	$view.on('mousemove',function( e ){
		var elem = e.target;
		cH.css({
			top: e.pageY,
			left: $view.offset().left,
			width:elem.width
		});
		cV.css({
			top: $view.offset().top,
			left: e.pageX,
			height: elem.height
		});
	});
};

Hi.

Not even sure if it's worth mentioning, but I found that, using dynamic pictures, sometimes a row and/or column of pixels from the original image stays blocked in the bottom and/or right edge of the pan/zoom area. This is a screenshot taken from the demo, where you can see the problem on right and bottom edge

This glitch disappears after a simple window resize, so actually I resolved hiding the element parent at page loading, forcing a resize event with

$(window).resize();

and then displaying the image container again.

Thanks!

Hi.

In IE 11 when you do some zoom and then move the mouse, the image moves, don't rest quiet. In Firefox and Chrome it does.

Sorry not publicly available page, just not sure what to look for at all.

Problem on firefox,chrome,edge, zooming and panning with a laptops touchpad.
Are there any special properties that the containing element should not have or any other limitation?

Hi Waynegm,
Thanks for helping for previous issue.
I have one more request for closing of NoteEditor on click of clear button in the tools.
My Mail Id [email protected]
Thanks,

Ashwini Kumar

I can run the test /docs/control_options.html sample (albeit having to shuffle some of the javascripts into the /lib folder, but it works), but when I try to deploy this in my own implementation I get the error:

Uncaught ReferenceError: JQuery is not defined

on the "(JQuery)" part of the imgViewer call..
(function ($) { $(document).ready(function () { $("myImage").imgViewer(); }); })(JQuery);

I do have jQuery coming in (code.jquery.com/ui/1.12.1 and jquery-1.12.4.min.js as well as all the other sample scripts:

` <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/[email protected]'></script>

	<script type='text/javascript' src='javascript/hammer.min.js'></script>

	<script type='text/javascript' src='https://unpkg.com/[email protected]'></script>

	<script type='text/javascript' src='javascript/imgViewer.js'></script>`

(no load errors seen when running)

so why do I see this Uncaught ReferenceError?

Hello:
I am testing your plugin for my application. It works nicely when I assign a png image as the src.

However, when the image is sent by a websocket connection as a blob and assigned to src of the img tag, the plugin does not function. The following code is used to assign the transmitted png file:

var arrayBuffer = messageReceived.data;
var image = document.getElementById('id_plot_img');

                var reader = new FileReader();
                reader.onload = function(e) {
                    var thePlot = e.target.result;
                    image.src = thePlot;
                };
                reader.readAsDataURL(arrayBuffer);
                $("#id_plot_img").imgViewer();

Google displays the following information about the element after the transfer is complete:

This is a picture of the webpage in Chrome (latest Version as of today):

The Chrome console also adds:
[Violation] Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

This is a picture of the display in Firefox (latest version) when the mouse wheel is used to zoom:

You can see that the overlay has shifted and a small icon can be seen in the upper left coner of the plot viewport.
I don't believe that the placement of the snippet ($("#id_plot_img").imgViewer();) has any effect on the result. I moved the statement around, changed it as per your demo, but the net result is the same.
Can you help with this issue?

How do I save the final cropped image to the server?

how can i control scrollUp (+) set zoom (+) with mouse?
actually work scrollDown(-) set zoom(+) and scrollUp set zoom(-) on image,
I need the opposite configuration, please help me.

When we are zooming, the img is not zooming correctly. Instead, it gets shifted to right or left. Essentially, on a pinch zoom, the center area(i.e. the area between 2 fingers) should be the one that should come zoomed out. The image is shifting and the user has to go and dot eh panning manually to arrive at the original pinched position.

This is applicable in your demos also. Is this already an known issue and has somebody reported this as well.

Looking at the documentation I think it might be possible to have multiple viewers working in sync for a side-by-side type of operation? Is this something that can be done with this plugin?

Thank you.

Just wondering how difficult it would be to implement a little minimap navigator to your viewer wayne?
Heres an example of what I'm talking about http://webcraft.cc/product.php?product=uber-zoom

I noticed the problem first in ImgNotes when creating a new marker.
It seems that from 0.8.0 the clicked position isn't returned.
It can be reproduced using the demo.html and pageX/pageY are NaN.