在离子框架中放大时，离子滚动模糊了我的图像 [英] Ion-scroll blurs my image when zooming in in ionic framework

问题描述

我在离子框架的离子滚动标签内加载图片。当我尝试放大时，图片模糊不清，字母不可读。这发生在我的浏览器以及Android上。

我的模板代码：

 < ion-view view-title ={{map.name}}ng-controller =MapsCtrl> 
 
  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像素，因此放大后图像应该清晰。 解析方案

浏览器为此进行性能优化，因此无需当页面呈现时，保留图片的高分辨率版本。

我能够通过以全尺寸加载图像来解决此问题，然后使用 $ ionicScrollDelegate 句柄显示正确缩放。它不是很优雅，但它适用于iOS和Android。

模板

< pre $ < ion-scroll
id =imgContainer
max-zoom =10.0min-zoom =0.10
zooming = truedirection =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元素
 var tmpImg = document.createElement（'img'）; 
 tmpImg.src ='assets / images / hi_res_image.svg'; 
 
 //确保图片加载
 var imgLoadPoll = setInterval（function（）{
 if（tmpImg.naturalWidth）{
 clearInterval（imgLoadPoll）; 
 
 //完整的img尺寸可用于范围
 $ scope.imageWidth = tmpImg.naturalWidth; 
 $ scope.imageHeight = tmpImg.naturalHeight; 
 
 //计算缩放比例
 var imgContainerWidth = document.getElementById （'imgContainer'）。clientWidth; 
 var zoomRatio =（（imgContainerWidth）/ tmpImg.naturalWidth）; 
 
 //加载图像和动画缩放
 console.log（'Loaded：image（'+ tmpImg.naturalWidth +'px wide）into container（'+ imgContainerWidth +'px wide）requires zoom：'+ zoomRatio）; 
 $ scope.imageUrl ='assets / images / hi_res_image.svg'; 
 $ ionicScrollDelegate。$ getByHandle（'imgContainer'）。zoomTo（zoomRatio，1,0,0）; //设置1-> 0以禁用动画
} 
}，10）; 
} 
  

I load a picture within the "ion-scroll" tag in ionic framework. When I then try to zoom in, the picture is blurred and the letters are unreadable. This happens both in my browser as well as on android.

The 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 picture I use is 4642 x 4642 pixels, so the image should be sharp when zoomed in.

解决方案

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.

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

这篇关于在离子框架中放大时，离子滚动模糊了我的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！