Ion scroll erases my image when scaling in ionic structure

Question

I load the image into the ion-scroll tag in the ion skeleton. When I try to zoom in, the image will be blurry and the letters unreadable. This happens both in my browser and in android.

Code for my template:

<ion-view view-title="{{map.name}}" ng-controller="MapsCtrl"> <ion-scroll zooming="true" direction="xy" delegate-handle="zoom-pane" min-zoom="1" max-zoom="20" scrollbar-x="false" scrollbar-y="false" overflow-scroll="false"> <img style="width:100%; heigth:100%" ng-src="{{map.img}}"/> </ion-scroll> 

The image I'm using is 4642 x 4642 pixels, so the image should be sharp when zooming in.

Answer 1

Browsers do this to optimize performance, there is no need to save a welcome version of the image when rendering the page.

I managed to get around this by loading the image at full size, and then using the $ionicScrollDelegate descriptor to display a properly enlarged image. It is not very elegant, but it works on iOS and Android.

Template

 <ion-scroll id="imgContainer" max-zoom="10.0" min-zoom="0.10" zooming="true" direction="xy" style="max-width:100%; height:100vh; width:100vh;" overflow-scroll="false" delegate-handle="imgContainer"> <img ng-src="{{imageUrl}}" /> </ion-scroll> 

controller

 .controller('imageCtrl', function ($ionicPlatform, $ionicScrollDelegate, $scope, $state, $http, $stateParams) { //Create DOM img element var tmpImg = document.createElement('img'); tmpImg.src = 'assets/images/hi_res_image.svg'; //Ensure image loads var imgLoadPoll = setInterval(function () { if (tmpImg.naturalWidth) { clearInterval(imgLoadPoll); //Full img dimensions can be used in scope $scope.imageWidth = tmpImg.naturalWidth; $scope.imageHeight = tmpImg.naturalHeight; //Calculate Zoom Ratio var imgContainerWidth = document.getElementById('imgContainer').clientWidth; var zoomRatio = ( (imgContainerWidth) / tmpImg.naturalWidth); //Load Image & Animate Zoom console.log('Loaded: image (' + tmpImg.naturalWidth + 'px wide) into container (' + imgContainerWidth + 'px wide) requiring zoom: ' + zoomRatio); $scope.imageUrl = 'assets/images/hi_res_image.svg'; $ionicScrollDelegate.$getByHandle('imgContainer').zoomTo(zoomRatio,1,0,0); //Set 1->0 to disable animation } }, 10); }