标签: image-rendering

使用CSS zoom属性时,如何说服浏览器使用"最近邻居",而不是"双线性"或任何其他更高级的缩放算法？

我的设置是一个包含画布的div,而div通过JavaScript得到它的缩放集<div style="zoom:3200%">...</div>并且得到最近的邻居,我image-rendering: -webkit-optimize-contrast在我的CSS中使用.该应用程序在这里可用('z'放大,'shift-z'缩小),我的css在这里

以下是Chrome OSX上的预期效果(缩放设置为3200%):

但是在Windows 7上的Chrome中也是如此:

在这两种情况下,它都是"vanilla"Chrome(版本15.xx)开箱即用,没有打开实验标志.

如何说服Windows上的Chrome使用最近邻居？就此而言,我如何说服所有浏览器？Safari也不使用最近邻居(到目前为止该应用仅适用于基于WebKit的浏览器)

CSS image-rendering属性确实会影响Chrome/OSX并为我提供所需的效果.但Chrome/Windows和Safari(5.1)/ OSX似乎都完全忽略了它.有些东西告诉我,我只是运气不好,但我想我会问.

使用zoomdiv容器非常简单,并且在Chrome/OSX中运行得非常漂亮,如果我必须在内部扩展我的画布,我也可以这样做.但是如果可能的话,更喜欢字面上的一行代码解决方案!

更新:我找到了image-rendering: optimizeSpeed帮助的使用.但是在Chrome/Windows中看起来很糟糕.如果我将它设置在太多元素上(我最初尝试过,我的容器和所有画布),它都不会生效.但是,如果我将它应用于公正canvas,那么我将获得98%的收益.

现在我的问题是我第一次在放大时绘制,它完美地工作,所有其他后续绘制动作在它们发生时都是模糊的,然后恢复到正确的最近邻居(我的应用首先绘制到刮刮画布,然后将绘图应用于真实画布).刮擦画布有点奇怪,Chrome坚持使用双线性.我想通过一些挖掘,我可以解决这个问题.

更新2:似乎image-rendering在Chrome/Windows上实现不好并且有点儿错误.我现在可以确认Chrome和Windows上的值optimizeSpeed并且optimizeQuality不受支持.如果您将图像渲染设置为它们,Chrome将忽略该设置.Chrome/Windows确实可识别-webkit-optimize-contrast,但它不会始终如一地使用它.Chrome会在几乎随机的双线性缩放算法和最近邻居之间进行切换.我无法一直让Chrome使用最近邻居.

我尝试在Windows上构建Chromium 17,它的行为方式相同.

Firefox(8.0.1)看起来非常有前景,因为它似乎很荣幸-moz-crisp-edges.最初我将Chrome作为此应用程序的"理想浏览器",我可能只是切换到Firefox.

最后,似乎image-rendering正在为Chrome提供适当的支持,还没有完全支持.WebKit本身声称完全支持所有图像渲染值,但我猜测Chrome使用的WebKit的构建还没有完全更新到这个新的修复程序.

根据MDN,CSS image-rendering属性的当前建议值是auto,crisp-edges和pixelated.但是我看不出它们之间的区别crisp-edges,pixelated因为两者都应该只是放大像素而不是内插任何东西.

那么,是有什么区别？

我能想到的有四种实现能够将SVG图形加载到Delphi应用程序中.

其中一个由Mattias Andersson(他是FMX.Canvas.VPR 的作者)与FireMonkey合作,但他还没有准备好发布代码.

第二个是由Martin Walter与VCL合作,但是开发人员退出Delphi并且没有计划转换为FireMonkey.

第三个是AGGPAS框架的一部分,与VCL一起工作,但没有FireMonkey.

Jason Southwell正在开发第四个,但尚未确定日期.

所以我的问题是:如果我今天想要一个SVG组件,而不是试图重新发明第五个(可能更多)的时间,那么我们要走哪条路？

在THREE.js中提高纹理质量的可能和好方法/最佳实践/等有哪些？

我有一个场景,我有512x512px纹理的飞机(卡).它看起来如何在下面的图像上看到.我的问题是纹理看起来很模糊.我试图改变滤波器和各向异性的值,它有所帮助,但只是一点点,纹理仍然模糊.纹理看起来像我想要的唯一一种方法 - 增加渲染大小x2并保持画布大小相同.由于性能问题,这是不好的方法,但我找不到另一种方法来获得良好的纹理质量.

最好的质量 - 渲染大小x2

正常质量 - magFilter = minFilter = THREE.LinearMipMapLinearFilter/anisotropy = 16

质量差 - 没有过滤器

我希望得到任何帮助,提前谢谢

当我注意到 Google Chrome (20) 中存在一些严重的条带问题时，我正在使用 svg 文件来生成平滑的渐变。更奇怪的是，当我将镀铬物移到我的电影院显示器上时，条带明显减少，这使得这更加奇怪。下面是当网站跨越我的 mbp 的原生屏幕（左）和电影显示（右）时拍摄的单个屏幕截图（根本没有 photoshop）。 如您所见，左侧的条带严重得多。陌生人在 safari FF 或 ie9 中仍然有接近零的条带。下面是相同的情况，但在 FF

我有一种感觉，这可能是驱动程序问题或类似问题。但我真的很想知道。这到底是怎么回事？为什么它在屏幕之间的显示会如此不同？两个显示器上的单个屏幕抓取怎么可能会产生这样的变化？

我也刚刚注意到 FF 窗口的 POSITION 改变了渲染。当超过一半的窗口在本地显示器上时，影院一侧会出现条带，而本地一侧则没有。当窗口移动到一半以上在影院显示器上时，条带显示在影院侧消失并出现在本机侧。对于 safari 也是如此，但是 chrome 没有这种行为，在原生端的条纹总是更明显，而在影院端则不太明显。

这真的让我很奇怪。这到底是怎么回事？

在Facebook上分享链接似乎很容易找到最佳大小.我有一个与Facebook共享的应用程序,图像显示完美.我使用相同尺寸的Whatsapp,但是会发生的事情是,与我试图分享的其他网站相比,它需要渲染的图像太长.

我的第一个猜测是尺寸,但如果你有任何其他慢速渲染的想法,它会很棒!

我有一个定制的UILabel圆角和阴影.我正在使用CALayer上的属性来实现这一目标.接下来,我试图使用renderInContext:将其保存为UIImage.圆角保持不变,但出现黑色背景并且投影松动.

有关将UILabel渲染为图像但保持阴影和圆角的想法吗？

这是我用来呈现标签的代码:

UIGraphicsBeginImageContextWithOptions(label.bounds.size, YES, 0);
[label.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

UIGraphicsImageRenderer是在 iOS 10 中新引入的。我想知道是否有可能旋转UIImage它（任何自定义角度）。我知道还有就是经典的方式用CGContextRotateCTM。

使用 Nextjs，预期结果是看到图像组件渲染为 .WebP 或 .AVIF，但它仍然是 jpg -

下面是我的 next.config.js

/** @type {import('next').NextConfig} */
module.exports = {
  images: {
    domains: ['cdn.sanity.io'],
    formats: ['image/avif', 'image/webp'],
  },
  reactStrictMode: true,
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: [{ loader: '@svgr/webpack', options: { icon: true } }],
    });
    return config;
  }, };

以下是 next/image 组件：

   <Image
                          className="kitchen-img"
                          loader={myLoader}
                          loading="lazy"
                          layout="fill"
                          objectFit="cover"
                          src={urlFor(kitchen.mainImage).url()!}
                          alt={kitchen.title}
                        />

知道为什么它没有以 avif/webp 的形式出现吗？我缺少什么？

const myLoader = ({ src, width, quality }: any) => {
return `${src}?w=${width}&q=${quality || 85}`  };

我读了几个关于这个主题的问题,我看到的一般反馈是JPGs用于照片,PNGs用于其他一切:

在以下情况下应使用PNG:

• 您需要透明度(1位或Alpha透明度)
• 无损压缩效果很好(例如图表或徽标,或计算机生成的图像)

在以下情况下应使用JPEG:

• 无损压缩效果不佳(例如照片)
• 需要全彩色

GIF应该在以下时间:

• PNG不可用,例如在非常旧的软件或浏览器上
• 动画是必要的

但是,似乎这些讨论更适合图像下载.我的问题更倾向于图像渲染.我打算在x和y方向重复背景......

background-image: url("/path/to/image.jpg");    /* repeat-x & repeat-y */

...我可以将图像存储为JPG~13K或PNG~50K.因此,尽管相差很小,但浏览器能够非常快速地提取这个图像.但是,当浏览器在页面上呈现图像时,这种差异是否重要,特别是因为它具有重复的背景？

我有一个Rails应用程序,我试图显示一个PNG文件,但我收到此错误:

ActionView::Template::Error (Your template was not saved as valid UTF-8. Please either specify UTF-8 as the encoding for your template in your text editor, or mark the template with its encoding by inserting the following as the first line of the template:

# encoding: <name of correct encoding>.

The source of your template was:

?PNG

IHDR#??)    pHYs?]s? IDATx???g@SW?E??7?ZuV??Z?:j?m?m?Z??U[W?:??Z?*?j???@?3? I???p??}
????
???b?X?/???Z?I?N111,?O??x?T??x?mU????vtt

我已经添加:

Mime::Type.register "image/png", :png

到config/initializers/mime_types.rb

我在其控制器中引用并呈现png文件:

render :inline => @object.body.string, :content_type => @object.content_type || "img/png", :layout => false

编辑: …

我在WebGL中进行图像渲染时遇到问题：我有一个画布，有一个可以容纳整个画布的四边形，还有一个应该映射到整个四边形的纹理（我已经设置了正确的纹理坐标）。

该图像是包含RGB数据（按此顺序）的Uint8array，图像为1024 * 768像素。我有正确的缓冲区。这是图像的链接。

问题如下：当渲染到WebGL中时，即使我的画布大小等于图像大小，我的图片也变得模糊不清。看到下面的结果：

现在输入代码：这是我用来创建纹理句柄的代码：

//texture
that.Texture = that.gl.createTexture();         
that.gl.bindTexture(that.gl.TEXTURE_2D, that.Texture);                          

// Set the parameters so we can render any size image.
that.gl.texParameteri(that.gl.TEXTURE_2D, that.gl.TEXTURE_WRAP_S, that.gl.CLAMP_TO_EDGE);
that.gl.texParameteri(that.gl.TEXTURE_2D, that.gl.TEXTURE_WRAP_T, that.gl.CLAMP_TO_EDGE);
that.gl.texParameteri(that.gl.TEXTURE_2D, that.gl.TEXTURE_MIN_FILTER, that.gl.NEAREST);
that.gl.texParameteri(that.gl.TEXTURE_2D, that.gl.TEXTURE_MAG_FILTER, that.gl.NEAREST);

数据被加载到纹理上，如下所示：

this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGB, this.m_iImageWidth, this.m_iImageHeight,
0, this.gl.RGB, this.gl.UNSIGNED_BYTE, this.m_aImage);

最后，这是我使用的片段着色器：

precision mediump float;
uniform sampler2D u_image;
varying vec2 v_texCoord;
void main() 
{
   gl_FragColor = texture2D(u_image, v_texCoord);
}

我尝试了很多选项，从过滤到设置样式选项，将图像渲染为像素化，将图像转换为RGBA并为其提供RGBA值，结果始终是糟糕的纹理渲染。即使画布与纹理的大小完全相同，WebGL似乎也无法正确插入数据。

有人提示吗？

提前致谢。

我使用 azure blobclientservice 上传图像，如下所示

 let fr = new FileReader();

  let result = {};

  fr.onload = async function () {
    var data = fr.result;

    await blockBlobClient
      .uploadData(data, {
        concurrency: 20,
        blobHTTPHeaders: {
          blobContentType: photo.type,
        },
      })
      .then((res) => {
        result = res;
        console.log(res);
      })
      .catch((error) => {
        console.log(error);
        result.error = true;
      });
  };
  fr.readAsArrayBuffer(photo);

我成功地从响应中获取了 url。我希望使用这个url作为html中图像标签的src，而不是从存储中下载所有数据。但它不显示图像，我只能看到 alt 而不是图像。我认为当图像作为公共存储在 aws s3 存储桶中时，可以使用 url 来读取图像。我希望在天蓝色存储中具有相同的功能。是否可以？如果有人帮助我，我将不胜感激。