Scorrimento ionico sfoca la mia immagine quando si ingrandisce il quadro ionico

Carico un’immagine all’interno del tag “ion-scroll” nella struttura ionica. Quando provo a ingrandire, l’immagine è sfocata e le lettere non sono leggibili. Questo accade sia nel mio browser che su Android.

Il codice per il mio modello:

    

L’immagine che uso è 4642 x 4642 pixel, quindi l’immagine dovrebbe essere nitida quando ingrandita.

I browser fanno questo per l’ottimizzazione delle prestazioni, non è necessario mantenere la versione ad alta risoluzione dell’immagine quando viene eseguito il rendering della pagina.

Sono stato in grado di aggirare questo caricando l’immagine a tutto schermo, quindi utilizzando l’handle $ionicScrollDelegate per visualizzare correttamente lo zoom. Non è molto elegante ma funziona su iOS e Android.

Modello

    

controllore

 .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); }