Load local zoomify tileset in OL3 - openlayers-3

Question

I produced a zoomify tileset from some digitized map image and would now like to use OL3 to display that map on a Website. However, my script currently fails loading that map from a local file uri (later, in production, I will upload the tiles on some Web Server and reference the tiles using HTTP). Here is what I have so far:
var url = 'file:///home/user/map_zoomfiy/';
var imgWidth = 17244;
var imgHeight = 9684;
var imgCenter = [imgWidth / 2, - imgHeight / 2];
var proj = new ol.proj.Projection({
code: 'ZOOMIFY',
units: 'pixels',
extend: [0, 0, imgWidth, imgHeight]
});
var source = new ol.source.Zoomify({
url: url,
size: [imgWidth, imgHeight],
crossOrigin: 'anonymous'
});
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: source
})
],
view: new ol.View({
projection: proj,
center: imgCenter,
zoom: 1
})
});
</script>
Any ideas why this fails? Thx.

Answer 1

It's not right way e.g https://developer.mozilla.org/en-US/docs/WebGuide/API/File_System/Introduction#file
I don't see why you do not make a local server instead of fighting to access your file with local url.
Some times ago, I compiled some recipes to do so.
Open your command line, go to your code root dir and follow recipes depending of your favorite programming language.

Answer 2

If the tiles are in a subdirectory (e.g., tiles_zoomify) the following should work
var url = 'tiles_zoomify/';
var imgWidth = 17244;
var imgHeight = 9684;
var imgCenter = [imgWidth / 2, - imgHeight / 2];
var proj = new ol.proj.Projection({
code: 'ZOOMIFY',
units: 'pixels',
extend: [0, 0, imgWidth, imgHeight]
});
var source = new ol.source.Zoomify({
url: url,
size: [imgWidth, imgHeight],
crossOrigin: 'anonymous'
});
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: source
})
],
view: new ol.View({
projection: proj,
center: imgCenter,
zoom: 1
})
});