在离子框架中放大时，离子滚动会模糊我的图像-Ion-scrollblursmyimagewhenzoomingininionicframework

0  

Browsers do this for performance optimization, there's no need to keep the hi-res version of the image when the page is rendered.

浏览器执行此操作以进行性能优化,在呈现页面时无需保留图像的高分辨率版本。

I was able to get around this by loading the image in full size then using the $ionicScrollDelegate handle to display the correctly zoomed. It isn't very elegant but it works in iOS and Android.

通过加载完整大小的图像,然后使用$ ionicScrollDelegate句柄显示正确缩放,我能够解决这个问题。它不是很优雅,但它适用于iOS和Android。

Template

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