diff --git a/examples/zoomify.js b/examples/zoomify.js index 8da21f32ab..91d606792d 100644 --- a/examples/zoomify.js +++ b/examples/zoomify.js @@ -7,11 +7,15 @@ goog.require('ol.proj.Projection'); goog.require('ol.proj.Units'); goog.require('ol.source.Zoomify'); -var imgWidth = 8001; -var imgHeight = 6943; -var imgCenter = [imgWidth / 2, -imgHeight / 2]; -var url = 'http://mapy.mzk.cz/AA22/0103/'; +//var imgWidth = 8001; +//var imgHeight = 6943; +//var url = 'http://mapy.mzk.cz/AA22/0103/' +var imgWidth = 9911; +var imgHeight = 6100; +var url = 'http://vips.vtech.fr/cgi-bin/iipsrv.fcgi?zoomify=' + + '/mnt/MD1/AD00/plan_CHU-4HD-01/FOND.TIF/'; +var imgCenter = [imgWidth / 2, - imgHeight / 2]; var proj = new ol.proj.Projection({ code: 'ZOOMIFY', units: ol.proj.Units.PIXELS, @@ -20,7 +24,8 @@ var proj = new ol.proj.Projection({ var source = new ol.source.Zoomify({ url: url, - size: [imgWidth, imgHeight] + size: [imgWidth, imgHeight], + crossOrigin: 'anonymous' }); var map = new ol.Map({ diff --git a/src/ol/source/zoomifysource.js b/src/ol/source/zoomifysource.js index fa0250e4e1..6401a3b006 100644 --- a/src/ol/source/zoomifysource.js +++ b/src/ol/source/zoomifysource.js @@ -1,6 +1,7 @@ goog.provide('ol.source.Zoomify'); goog.require('goog.array'); +goog.require('ol.Image'); goog.require('ol.TileCoord'); goog.require('ol.TileUrlFunction'); goog.require('ol.proj'); @@ -122,6 +123,38 @@ ol.source.Zoomify = function(options) { ); }; + /** + * Resize small tiles. Warning : needs a good crossOrigin handling. + * + * @param {ol.ImageTile} imageTile Current tile + * @param {String} src Src url + */ + var tileLoadFunction = function(imageTile, src) { + var image = imageTile.getImage(); + + // Bad image size (only if correct crossOrigin handling) + if (image.crossOrigin) { + image.onload = function() { + if (this.width < ol.DEFAULT_TILE_SIZE || + this.height < ol.DEFAULT_TILE_SIZE) { + // Copy image data into the canvas + var canvas = document.createElement('canvas'); + if (canvas.getContext) { + canvas.width = ol.DEFAULT_TILE_SIZE; + canvas.height = ol.DEFAULT_TILE_SIZE; + var ctx = canvas.getContext('2d'); + ctx.drawImage(this, 0, 0); + + // Change original image + image = new Image() ; + image.src = canvas.toDataURL(); + } + } + }; + } + image.src = src; + }; + var tileGrid = new ol.tilegrid.Zoomify({ resolutions: resolutions }); @@ -135,7 +168,8 @@ ol.source.Zoomify = function(options) { crossOrigin: options.crossOrigin, logo: options.logo, tileGrid: tileGrid, - tileUrlFunction: tileUrlFunction + tileUrlFunction: tileUrlFunction, + tileLoadFunction: tileLoadFunction }); };