Micrio Documentation and help

  1. Uploading, viewing, sharing
    1. The dashboard
    2. Sharing on social media
    3. Sharing image details
    4. File formats and limitations
  2. Embedding on your website
    1. Using an <iframe>
    2. Using <micrio>
    3. Using Javascript
  3. Advanced usage
    1. Image methods
    2. Camera control
    3. Events control
  4. Server API documentation


Micrio is an online tool to upload, view and share or embed your large images quickly and easily.

This page explains how you can use Micrio to upload and share your images, embed images in your own website and how to manipulate and animate the viewport using Javascript.

1. Uploading, viewing and sharing images

Micrio is a full service where you can upload your images and share them in many ways including Twitter, Facebook, etc.

Firstly, create a free account at the Micrio Dashboard, or choose to log in with your Google, Twitter or Microsoft account.

1.1. The dashboard

Once you've logged into dashboard.micr.io, you can start uploading your images. Simply drag and drop images from your computer to the browser.

Once an image has been uploaded, the server needs some time to process it for best client delivery. Depending on your image size, this can take from 10 seconds (16MP) to a few minutes (400MP). Once all your files have been uploaded, you don't need to keep the dashboard open while it's processing the images.

Once an image has been processed correctly, it will appear in the dashboard under the process bars. By clicking it, it opens the unique URL generated for that image, which you can immediately share with others.

If you click the button in the top right of the image in the dashboard, you can either delete the image permanently, or secure the image URL with a password for private or proprietary images.

1.2. Sharing on social media

If you want to share an image, use the sharing icons in the top right corner of the viewer or copy and paste the image URL (for instance http://i.micr.io/X89Px) in your message. The part of the image you're viewing will be shared.

1.3. Sharing image details

If you want to share a particular part of your image, open the image (like http://i.micr.io/X89Px) and zoom in to the part of the image you want to share. If you look at the image address, you'll see it will look something like http://i.micr.io/X89Px/_3525-_6391-_7881-_8888. You can copy and paste that address to other people, and they will see the exact details you are currently seeing.

1.4. File formats and limitations

Currently, you can upload JPG and PNG files in the dashboard, with a maximum resolution of 30,000 x 30,000 pixels (or 900MP). We will add more supported file formats in the future.

2. Embedding images on your own website

If you are a developer working with high resolution images, or if you have your own website where you would like to show your work in its full glory, Micrio supports several ways of embedding your images in your own site.

2.1. Using an <iframe>

This is the easiest way to embed an image in your page.

Copying and pasting this HTML-fragment in your HTML:
<iframe src="http://i.micr.io/X89Px" width="600" height="400"></iframe>
Results in this:

This is the easiest way to do it and works best for single images.

2.2. Using a custom <micrio> element

Embedding Micrio images on your site is as easy as using <micrio> tags. Include the Javascript reference to the Micrio client library in your <head>:

<script src="//b.micr.io/js/micrio-1.2.min.js"></script>

Then, you can simply add custom <micrio id="[image ID]"> elements in your HTML, which will be automatically loaded:

<micrio id="cXK9o"></micrio>
Result (fully zoomable):

You can simply style the <micrio> elements using CSS to set the desired width and height.

2.3. Using Javascript

For more control over the images and for advanced use (webapps, single page interfaces), you can create and control Micrio instances using Javascript.

var image = new Micrio({
	// Image ID, required
	id: 'cXK9o',

	//// Optional settings

	// HTML element to put the image in, defaults to <body>
	container: document.getElementById('container'),

	// Listen to touch and mouse events, defaults to true
	hookEvents: true,

	// Initializes and draws image on instance creation, defaults to true
	autoInit: true,

	// Creates a fully interactive minimap, defaults to false
	miniMap: false,

	// How to render the initial view, like CSS background-size
	// 'cover' or 'contain'. Defaults to 'contain'.
	initType: 'contain',

	// Opens the image at a specified view rectangle [x0, y0, x1, y1]
	startView: [.25,.25,.75,.75]

You then have an image object which you can easily place and show with image.show(), and remove using image.hide().

More uses and advanced methods are described in the next section.

3. Advanced usage

Using Javascript, you have full control over the image. You have access to a virtual camera which you can freely animate and manipulate.

3.1 Image methods

You can access a Micrio image in Javascript either by creating it there (see � 2.3), or referencing it like this:

var image = document.getElementById('your-micrio-canvas-element').micrio;

Then you can call the following methods:

// If you've created the instance using autoInit: false,
// this initializes and shows the image, returning a promise for
// when the initial view is fully downloaded.
	console.log('The image is ready and shown!');

// Use this to remove the image from the DOM and remove all event handlers.

3.2 Camera control

The image.camera object gives you full control over what the user sees.

// Fly to a certain coordinate and zoom level
image.camera.flyTo(x, y, z, duration (ms));

// Fly to a full overview of the image
image.camera.flyToFullView(duration (ms));

// Fly to a cover-view of the image, like CSS background-size: cover
image.camera.flyToCoverView(duration (ms));

// Gets relative image coordinates based on X and Y in pixels
image.camera.getCoo([xPx, yPx]);

// Sets viewport coordinates without animating
image.camera.setCoo([xPerc, yPerc]);

// Resets the viewport to the starting view

// Pauses any animation

// Resumes any paused animation

// Toggle image fullscreen mode
// -- this only works when called within an event handler

3.3 Events control

The image.camera.events allows you to control if events (zooming, panning, etc) are handled.

// Enable event handlers

// Disable event handlers

4. Server API documentation

When you work with big image collections and don't want to upload your images in the dashboard, there is a comprehensible API to automatically upload and process large volumes of images.

This part of the documentation is still being worked on. If you'd like to know more about this, please contact us.