html - 在 iPad 和 iPhone 上缩放时背景图像模糊

Question

我正在创建一个网络应用程序，允许用户缩放某些 100x100 像素的背景图像。

当他们双击图像时，我将图像缩放到两倍大小 (-webkit-transform: scale( 2 ))。

转换完成后，我将 100x100 像素的图像换成更大的 200x200 像素的图像。由于某种原因，图像非常模糊。

所以我尝试使用 img 标签而不是 div 标签来显示我的图像。这里的图像一点也不模糊。这是为什么？

我需要使用背景图片来规避 iPad 和 iPhone 上的内存限制(如果我使用 img 标签，我会撞到内存墙)。

谁能帮帮我？非常感谢。

Answer 1

我声明了 3 件事:

1. 缩放 div 会拉伸(stretch)像素而不是增加更多像素。
2. 背景大小:包含；确保您的背景图像已完全显示
3. div 永远不会改变大小。

---

1. 尽你所能see here div 仍然是 200x200 像素
2. 图像大小调整为 200x200 像素，即使它是 400x400 像素。 See here
3. 几乎在 1 中得到证明。字体仍然清晰，但 javascript 认为宽度和高度为 200x200 像素。

---

好的，您的修复:

有几种方法。

您可以更改宽度和高度而不是缩放。这一点都不漂亮，或者至少如果这个动画不缺少它的方式(在 iOS 上)，你就很幸运了。

其他东西可能是缩放和检测 webkitTranstionEnd

$('div').bind("webkitTransitionEnd", function() {
    $(this).css({
        "-webkit-transform": "scale(1)",
        "width": "400px",
        "height": "400px"
    });
     $(this).unbind("webkitTransitionEnd");
});

记得解绑webkitTransitionEnd事件。否则它会加倍函数调用。

但是发生了什么，动画回来了。所以我们必须将转换保留在一个类中，以便我们可以在需要时添加和删除它:

div {
   -moz-transition-duration: 0ms;
}
div.transition {
    -moz-transition-duration: 200ms;
}

然后在需要动画时添加类:

setTimeout(function() {
    $('div').addClass("transition");
    $('div').css({
        backgroundImage: 'url(http://img812.imageshack.us/img812/212/cssc.png)',
        webkitTransform: 'scale( 2 )',
        mozTransform: 'scale( 2 )'
    });
}, 3000);

并在webkitTransitionEnd中再次移除

$(this).removeClass('transition');
$(this).css({
   "-webkit-transform": "scale(1)",
   "width": "400px",
   "height": "400px"

}); $(this).unbind("webkitTransitionEnd");

什么？？!它没有及时添加/删除类(class)？!发生了什么。

有时浏览器需要一些时间来确保类被添加。因此，您需要将 css 的设置包装在 setTimeout(function(){...}, 0);

setTimeout(function() {
    $('div').addClass("transition");
    setTimeout(function(){
        $('div').css({
            backgroundImage: 'url(http://img812.imageshack.us/img812/212/cssc.png)',
            webkitTransform: 'scale( 2 )',
            mozTransform: 'scale( 2 )'
        });
    }, 0);
}, 3000);

同样当我们删除类时:

$(this).removeClass('transition');
setTimeout(function(){
    $(this).css({
        "-webkit-transform": "scale(1)",
        "width": "400px",
        "height": "400px"
    });
     $(this).unbind("webkitTransitionEnd");
}, 0);

这么久了，现在的问题是它在放大并变得模糊，在缩放之后它变得非常锐利。

我不知道我们能做些什么，但希望它能在某些方面对您有所帮助!

安德烈亚斯