openseadragon
An open-source, web-based viewer for zoomable images, implemented in pure JavaScript.
OpenSeadragon
I am trying to make server function call, but it does not showing the proper values for the different levels, actually later i will need to read files from the directories for the different levels from server call, or might to fetch the data from the database.
i can see that at the last time server call made from getTileURL, i can see client side with level - 2, 1, 0 ... in debugger... but when the level value is 0 then only the server call made that means during level 2 and level 1 there is not action of controller is called..
return root + 'DeepZoom/image?level=' + Math.max(0, level - 8) + '&x=' + y + '&y=' + x + '';
It seems server side function not call one by one....level ....!!! It calls at the end of the level ... For example if console.log shows level -> 2,1,0 and then call made for server function during level -> 0, not at the level - 2, then so on....
//JS code
getTileUrl: function (level, x, y)
{
return root + 'DeepZoom/image?level=' + level + '&x=' + y + '&y=' + x + '';
}
// server code - asp.net mvc
public FileResult image(int level, int x, int y)
{
return new FilePathResult("http://s3.amazonaws.com/com.modestmaps.bluemarble/" + level + "-r" + x + "-c" + y + ".jpg", "jpg");
}
Source: (StackOverflow)
I am using the customtile to make the list of the images based on the ajax call, I can not see the console.log handled after making ajax call...
getTileUrl: function (level, x, y)
{
console.log("URL::->" + "http://s3.amazonaws.com/com.modestmaps.bluemarble/" + Math.max(0, level - 8) + "-r" + y + "-c" + x + ".jpg")
var data = { level: Math.max(0, level - 8), x: y, y: x };
apiGet(root + 'DeepZoom/image', data, function (json) {
console.log("count:->" + count++);
//based on json data show the green line for the shortest path for the start pole and end pole
console.log("Length:->" + json.length);
for (var i = 0; i < json.length; i++) {
console.log("URL:->"+json[i]);
return json[i];
}
});
//return "http://s3.amazonaws.com/com.modestmaps.bluemarble/" +
// Math.max(0, level - 8) + "-r" + y + "-c" + x + ".jpg";
}
Source: (StackOverflow)
i am using OpenSeaDragon, there is Customtiles to showup the images, i can not see the the image exactly for the navigation... please check the issue for the screenshot : http://screencast.com/t/BeP6nyA6M
The code is here :
<script type="text/javascript">
var viewer = OpenSeadragon({
id: "example-custom-tilesource",
//debugMode: true,
navigatorSizeRatio: 0.25,
wrapHorizontal: true,
showNavigator: true,
tileSources: {
height: 512 * 256,
width: 512 * 256,
tileSize: 256,
minLevel: 8,
getTileUrl: function (level, x, y) {
console.log("URL::->" + "http://s3.amazonaws.com/com.modestmaps.bluemarble/" + (level - 8) + "-r" + y + "-c" + x + ".jpg")
return "http://s3.amazonaws.com/com.modestmaps.bluemarble/" +
(level - 8) + "-r" + y + "-c" + x + ".jpg";
}
}
});
</script>
Source: (StackOverflow)
I am trying to make custom tile source, I have simple copy paste the code from here : https://openseadragon.github.io/examples/tilesource-custom/
But i can see the Output as per here : http://screencast.com/t/j7Qvh4URsX
and for the Images related output here.. http://screencast.com/t/nPSGdRRbkn
Here questions are :
1) what is the correct way to load images properly..i cant see there are much documentation for it. if any specific info please provide me..
2) why there is (level-8)... ?
3) How can i make it dynamic.. for example if i want to make load images from my PC related folders dynamically with ajax call using asp.net mvc.. is there any examples...
4) I have much read about but not exact info for custom tile source to load the images to show the output as on Demo page...
I am using below code currently, it will go later based on ajax call to load local folders - level0,1,2,3,4,5,6 etc
var viewer = OpenSeadragon({
id: "example-custom-tilesource", showNavigator: true,
wrapHorizontal: true,
tileSources: {
height: 512*256,
width: 512*256,
tileSize: 256,
minLevel: 8,
getTileUrl: function (level, x, y)
{
console.log("URL::->"+ "http://s3.amazonaws.com/com.modestmaps.bluemarble/" +(level-8) + "-r" + x + "-c" + y + ".jpg")
return "http://s3.amazonaws.com/com.modestmaps.bluemarble/" +
(level-8) + "-r" + x + "-c" + y + ".jpg";
}
}
});
Source: (StackOverflow)
What is the correct way to open a SeaDragon viewer with straight XML data? I need to know what I'm doing wrong here. I have a bunch of DZI images that are hosted on another domain that I need to display, but I can't do a simple OpenSeadragon() call with the appropriate URLs because the domain the images are on has no "Access-Control-Allow-Origin" header. As such, I've set up a proxy controller to retrieve the XML data and pass that back to my web page. However, I can't get the images to load with the XML data.
I've been using a working image (from a different website) to test the issue and figure out what I need to do. When I use the following code, the image displays:
var viewer = OpenSeadragon({
id: "openseadragon1",
prefixUrl: "../../Scripts/openseadragon/images/",
tileSources: "https://familysearch.org/dz/v1/TH-1971-27860-10353-27/image.xml?ctx=CrxCtxPublicAccess&session"
});
Now I'm trying to display the image the way I am with my Proxy controller, by retrieving the XML and using the XML in my OpenSeadragon call:
var ajaxresult = $.ajax({
url: "https://familysearch.org/dz/v1/TH-1971-27860-10353-27/image.xml?ctx=CrxCtxPublicAccess&session",
type: 'get',
success: function (data) {
// data is an XMLdocument object
var viewer = OpenSeadragon({
id: "openseadragon1",
prefixUrl: "../../Scripts/openseadragon/images/",
tileSources: data
});
},
error: function (jqXHR, textStatus, errorThrown) {
alert(jqXHR.responseText || textStatus);
}
});
I get a blank image and my console says that every tile failed to load. I have also tried pasting the xml directly into the tileSources field as a string, like this:
tileSources: '<?xml version="1.0" encoding="utf-8"?><Image TileSize="256" Overlap="1" Format="jpg" ServerFormat="Default" xmlns="http://schemas.microsoft.com/deepzoom/2009"> <Size Width="6233" Height="4683" /></Image>'
but that doesn't work either.
What am I doing wrong here?
Source: (StackOverflow)
TL;DR: How can I make a Cross-Domain AJAX request with OpenSeadragon?
I'm using OpenSeadragon to display images from a website. I have my Seadragon viewer working with a test URL as follows:
<script src="../../Scripts/openseadragon/openseadragon.js"></script>
<script>
var viewer = OpenSeadragon({
id: "openseadragon1",
prefixUrl: "../../Scripts/openseadragon/images/",
tileSources: "https://familysearch.org/dz/v1/TH-1971-27860-10353-27/image.xml?ctx=CrxCtxPublicAccess&session" // requires a DZI tile source
});
</script>
<div id="container2" style="float:left;">
<div id ="openseadragon1" style="width:500px;height:500px;border:1px solid black;float:left;"></div>
</div>
so I know my viewer is working. My problem is that the specific images I need are hosted on a site that does not have a "Access-Control-Allow-Origin" header, so my Ajax request is getting blocked. For example, when I use this URL:
http://66.img.americanancestors.org/e41de95d-6235-4581-b823-4887b50eb8ad.xml
(which I am able to access in my browser, when I type it in it downloads an xml file), I get the "No Access-Control-Origin-Header" error and this error in my viewer:
I know about Cross Domain requests, but being new to OpenSeadragon, I'm not sure how to create a cross-domain request in my OpenSeadragon function. I know that OpenSeadragon has a CreateAJAXRequest() function, but I don't really understand how to implement it, and I'm not sure if that would solve my problem.
Source: (StackOverflow)
OpenSeaDragon is awesome.
If I use the Viewport#fitBounds JS method to move to a new rectangle, with default arguments, it 'animates' the transition between current view and the new requested bounds.
Is there any way to control the speed of this animation? I'd like to slow it down, so it takes longer to move from current view to the requested bounds, for a more leisurely tour.
Source: (StackOverflow)
i have a little cocoa osXa app that uses Vips DZSAVE and imagemagick to create the DeepZoom Tile from a big psb file.
the problem is that it works fine just till a undefined size. i'm managing correctly files about 60.000px X 50.000px 27Gb size but whit bigger files the app is generating a tile made by white images.
No data are written...
i have to manage images around 170.000px X 170.000px between 60 and 80 Gb.
i have tried Environment Variables to increase imagemagick cache limits but, no results...
someone has some ideas about the white output?
Source: (StackOverflow)
I'm learning to implement openseadragon performing a basic html and this error occurs when I try to access data.testpattern.dzi and is in the specified directory path and it appears that you can not access tilesource.
unable to open[object Object]:HTTP 404 attempting to load tilesource
var viewer = OpenSeadragon({
// debugMode: true,
id: "contentDiv",
prefixUrl: "/openseadragon/images/",
tileSources: "test/data/testpattern.dzi",
showNavigator:true
});
excuse the ignorance but I'm learning to use openseadragon
Source: (StackOverflow)
Just starting out playing with OpenSeadragon (very good btw) and on creating a custom tile set am wondering what the advantages or disadvantages of creating tiles with an overlap?
I've tried using 0 and it seems ok, but I wonder if there are any clarity or performance advantages or having the tiles overlap (I think DeepZoom format uses 4 for example?)
Thanks for any guidance!
Source: (StackOverflow)
DeepZoom is creating 12 levels of images. Here my problem is when i click the zoom in ,it works only 3 times. I cannot go depth of zooming. starting Level 10 to Level 12. Is it possible create more DeepZoom images or create custom code for more zooming to add ?
Source: (StackOverflow)
I'm using MS Deep Zoom Composer to generate tiled image sets for megapixel sized images.
Right now I'm preparing a densely detailed black and white linedrawing.
The lack of gamma correction during resizing is very apparent;
while zooming the tiles appear to become brighter on higher zoom levels.
This makes the boundaries between tiles quite apparent during the loading stage.
While it does not in any way hurt usability it is a bit unsightly.
I am wondering if there are any alternatives to Deep Zoom Composer that do gamma correct resizing?
Source: (StackOverflow)
I'm trying to move from Silverlight to OpenSeaDragon (PivotViewer), but so far I haven't been able to find out how to control programmatically position of every image in my image collection, so that it wouldn't be just a rectangular array of pictures. Maybe, sparseimage? Or maybe all it takes is to somehow add x and y coordinates to the collection's *cxml file?
Could you please point me to the right direction?
Thank you for your time.
Source: (StackOverflow)
I have a problem using Annotorious over my page web.
I have to display OpenSeaDragon pictures,on my page, what I did, and be able to annotate images.
I used the source code of this page http://annotorious.github.io/demos/openseadragon-preview.html , but it doen't work, I see the button "add annotate" on my page but all, i can't select the zone to write something.
Need help please, this is my source code :
<!DOCTYPE html>
<html>
<head>
<?php include 'includes/navbar.php' ?>
<?php include 'includes/connect_bdd.php';?>
<title>Annotorious - Image Annotation for the Web</title>
<link type="text/css" rel="stylesheet" media="all" rel='nofollow' href="annotorious/css/highlight.css" />
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script src="openseadragon.min.js"></script>
<script type="text/javascript" src="annotorious/annotorious.min.js"></script>
<style>
#map-annotate-button {
position:absolute;
top:3px;
right:3px;
background-color:#000;
color:#fff;
padding:3px 8px;
z-index:10000;
font-size:11px;
text-decoration:none;
}
</style>
<script>
function annotate() {
var button = document.getElementById('map-annotate-button');
button.style.color = '#777';
anno.activateSelector(function() {
// Reset button style
button.style.color = '#fff';
});
}
function init() {
var viewer = OpenSeadragon({
id: "openseadragon",
prefixUrl: "images/",
showNavigator: false,
tileSources:"PhotoDzi/TCGA-BH-A1ES-01Z-00-DX1.C54C809F-748F-4BB0-B018-A8A83A4134C0.svs.dzi"
});
anno.makeAnnotatable(viewer);
}
</script>
</head>
<body onload="init()";>
<div class="content">
<div class="content-inner">
<div style="position:relative; width:640px; height:400px; margin-bottom:20px;">
<div id="openseadragon" style="width:640px; height:400px; background-color:#fff;"></div>
<a id="map-annotate-button" onclick="annotate(); return false;" rel='nofollow' href="#">ADD ANNOTATION</a>
</div>
<h4>About</h4>
<?php
$req = $bdd->query('SELECT * FROM miniatures WHERE titre=\'' . $_GET['titre'] . '\'');
$image = $req->fetch();
?>
<?php
$req->closeCursor();
?>
</div>
</div><!--/.sidebar-offcanvas-->
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('pre.code').highlight({source:0, zebra:1, indent:'space', list:'ol'});
});
</script>
</body>
</html>
Source: (StackOverflow)
I use OpenSeadragon 1.2.1.
I want to show wide image(4096 x 2160),
and change first view position.
x: 640px;
y: 320px;
width: 1024px;
height:768px;
crip(320px, 1664px, 1088px, 640px);
HTML code
<div id="mycanvas" style="width:1024px;height:768px;"></div>
<script src="./openseadragon.min.js"></script>
<script>
var viewer = OpenSeadragon(
{
id: "mycanvas",
prefixUrl: "./images/",
tileSources: "./dzc_output_images/datas.xml"
});
viewer.addHandler('open', function()
{
// I want to change first view position.
// viewer.???
// viewer.viewport.applyConstraints();
}
</script>
Use "Class:Rect / Class:DisplayRect" or other Classes ?
https://openseadragon.github.io/docs/OpenSeadragon.Rect.html
https://openseadragon.github.io/docs/OpenSeadragon.DisplayRect.html
How to use these Classes ?
Source: (StackOverflow)