带有图案的图片有时显示异常 [英] Pictures with patterns sometimes display strangely

问题描述

我的网站是一家服装店，我的伴侣抱怨以下问题.

My site is a clothing store, and my partner has complained about the following issue.

具有更复杂图案(例如棋盘格)的服装图片显示如下:而不是这样:

The pictures of clothing with more complex patterns (checkerboard for example) displays like this: instead of this:

我认为其他图片也很奇怪，但是不太明显.据我所知，它最常发生在Mac上.

I assume the other pictures are also displaying weirdly, but it's just less noticeable. As far as I can tell, it happens most often on Macs.

如果有人对这种现象有任何了解，将不胜感激.

If anyone has any information about this phenomenon it would be much appreciated.

推荐答案

这称为莫尔效应.从维基百科文章:

在物理学，数学和艺术中，莫尔条纹(/mwɑrˈeɪ/;法语: [mwaˈʁe])是次要的且视觉上明显的叠加模式 例如，当两个相同(通常是透明的)时创建 平面或弯曲表面上的图案(例如紧密排列的笔直 从点辐射出的线或采用网格形式的线是 彼此移位或旋转少量时重叠.

In physics, mathematics, and art, a moiré pattern (/mwɑrˈeɪ/; French: [mwaˈʁe]) is a secondary and visually evident superimposed pattern created, for example, when two identical (usually transparent) patterns on a flat or curved surface (such as closely spaced straight lines drawn radiating from a point or taking the form of a grid) are overlaid while displaced or rotated a small amount from one another.

在图像的背景下，叠加层来自抗锯齿(在上采样的情况下)或平均像素(用于下采样).

In context of images the overlaying comes from anti-aliased (in case of upsampling) or averaged pixels (for downsampling).

要正确调整大小，请使用高质量的调整大小，例如基于双三次插值的重新采样.大多数浏览器都对此提供内置支持，但是某些条件会影响选择哪种策略(双三次或双线性)，例如出于性能原因.后者更容易出现这种效果.

To resize them properly use high-quality resizing such as bi-cubic interpolation based resampling. Most browser has built-in support for this but certain conditions are affecting which stratgey is selected (bi-cubic or bi-linear), for example for performance reason. The latter is more prone to this effect.

可以使用画布缩小图像以缩小图像.我有一个此处有关该主题的文章和 SO在此处回答，显示有关操作方法的具体示例.

It can be reduced using a canvas to scale down the image. I have an article here on this topic and an SO answer here showing a concrete example on how to.

这篇关于带有图案的图片有时显示异常的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！