OpenLayers3 and high-resolution image (XYZ source)

Question

I am trying to display a high-resolution image with OpenLayers3. The image (14336px x 12544px) has been tiled into 7 levels of 256px x 256px tiles.

I am trying to center the image and constrain the view to the image (no repetition).

I have looked to extent and projection but I did not manage to do what I wanted.

Here is my code:

var width = 14336;
var height = 12544;
var level = 6;

var layer = new ol.layer.Tile({
    source: new ol.source.XYZ({
        url: 'http://projects.local/.../{z}/{x}/{-y}.jpg'
    }),
    maxZoom: level
});

var view = new ol.View({
    center: [0, 0],
    zoom: 2,
    maxZoom: level
});

var map = new ol.Map({
    target: 'viewerContainer',
    layers: [
        layer,
    ],
    view: view
});

Thanks for your help

Answer 1

I found a solution thanks to this JSFiddle : http://jsfiddle.net/jonataswalker/6f233kLy/

var width = 14336;
var height = 12544;
var level = 6;

var projection = new ol.proj.Projection({
    code: 'pixels',
    units: 'pixels',
    extent: [0, 0, height, width]
});

var layer = new ol.layer.Tile({
    source: new ol.source.XYZ({
        url: 'http://projects.local/prototype/data/item1/0/0/0/{z}/{x}/{-y}.jpg',
        projection: projection
    }),
    maxZoom: level
});

var view = new ol.View({
    center: [height/2, width/2],
    zoom: 2,
    maxZoom: level,
    projection: projection
});

var map = new ol.Map({
    target: 'viewerContainer',
    layers: [
        layer,
    ],
    view: view
});

Hope it will help someone