在离子框架中放大时，离子滚动模糊了我的图像

Posted 2023-02-19

【中文标题】在离子框架中放大时，离子滚动模糊了我的图像

【英文标题】：Ion-scroll blurs my image when zooming in in ionic framework

【发布时间】：2016-10-27 06:56:13

【问题描述】：

我在 ionic 框架的“ion-scroll”标签中加载了一张图片。当我尝试放大时，图片模糊，字母无法阅读。这发生在我的浏览器和 android 上。

我的模板代码：

<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>   

我使用的图片是 4642 x 4642 像素，所以放大时图像应该很清晰。

【参考方案1】：

浏览器这样做是为了优化性能，在呈现页面时无需保留图像的高分辨率版本。

我可以通过加载完整尺寸的图像然后使用$ionicScrollDelegate 句柄来显示正确缩放的图像来解决这个问题。它不是很优雅，但适用于 ios 和 Android。

模板

<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('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);