Questions tagged [image-rendering]

Anything related to image rendering, i.e. the process of transforming the internal, memory (or file) representation of an image into a corresponding visual, on-screen representation.

Anything related to image rendering, i.e. the process of transforming the internal, memory (or file) representation of an image into a corresponding visual, on-screen representation.

72 questions
23
votes
3 answers

Using nearest-neighbor with CSS zoom on canvas (and img)

When using the CSS zoom property, how can I convince the browser to use "nearest neighbor", instead of "bilinear" or any other more advanced zooming algorithms? My setup is a div that contains a canvas, and the div gets its zoom set via JavaScript…
Matt Greer
  • 57,161
  • 16
  • 118
  • 122
16
votes
2 answers

image-rendering "crisp-edges" vs. "pixelated"

According to MDN the currently proposed values for the CSS image-rendering property are auto, crisp-edges and pixelated. But I can't see the difference between crisp-edges and pixelated since both are supposed to just scale up the pixels and not…
Mouagip
  • 4,560
  • 3
  • 34
  • 49
9
votes
4 answers

What road to take to load an SVG graphic into a FireMonkey app?

There are about four implementations I can think of that are capable of loading SVG graphics into a Delphi application. One of those, by Mattias Andersson, who is the author of FMX.Canvas.VPR , works with FireMonkey, but he's not yet prepared to…
Domus
  • 1,233
  • 7
  • 21
7
votes
1 answer

THREE.js How to increase texture quality

What are the possible and good ways/best practices/etc to improve texture quality in THREE.js? I have a scene where I have planes(cards) with 512x512px textures. How it looks you can see on images below. My problem is that textures looks blurred. I…
7
votes
1 answer

What is the optimal og:image size for sharing a link in Whatsapp (Slow image rendering)

It seems very easy to find the optimal size for sharing a link on Facebook. I have an app that shares to Facebook and the image shows perfectly. I'm using the same sizes for Whatsapp, but what happens there is that it takes the image too long to…
6
votes
2 answers

SVG banding in chrome

I am using a svg file to produce a smooth gradient, when I noticed some serious banding issues in Google Chrome (20). Even stranger when I moved the chrome onto my cinema display the banding noticeably reduced, which makes this even weirder. Below…
Fresheyeball
  • 28,195
  • 19
  • 94
  • 160
5
votes
1 answer

Can renderInContext: maintain corner radius and shadows?

I have a custom UILabel with round corners and a drop shadow. I'm using the properties on CALayer to achieve this. Next, I'm trying to save this as a UIImage using renderInContext:. The round corners are maintained, but a black background appears…
Quentamia
  • 3,046
  • 3
  • 31
  • 40
4
votes
1 answer

Adding CSS Animation negativly effecting image rendering in Chrome

I have a problem where adding an CSS Animation to an PNG image causes a dramatic reduction image rendering quality. I have a div containing three seperate PNG's, and when adding an animation to any of the images, the quality is reduced on all the…
Jack Wild
  • 1,762
  • 5
  • 23
  • 31
3
votes
0 answers

Pixelated images on safari (mac)

I've searched for long time and I can't find a solution to my problem. Im working on a music label website and the design have some icons in .svg and .jpg, the problem is that on Safari on mac, some images/icons are pixelated and don't show…
SundownDEV
  • 31
  • 4
3
votes
2 answers

WebGL image rendering bad quality

I have a problem with image rendering in WebGL: I have a canva, with a quad that takes the whole canvas, and a texture which is supposed to be mapped onto the whole quad (I have set the correct texture coordinates). The image is a Uint8array…
3
votes
3 answers

Rotate image with UIGraphicsImageRenderer?

UIGraphicsImageRenderer was newly introduced in iOS 10. I was wondering if there is any possibility to rotate an UIImage with it (any custom angle). I know there is the classic way with CGContextRotateCTM.
Christoph
  • 634
  • 6
  • 14
2
votes
1 answer

Poor performance when continuously updating a SurfaceView with pixel data from a ByteBuffer

I am writing an Android app in which a native thread keeps generating image frames (as raw pixel data) at about 60 fps, which are then supposed to be displayed in a SurfaceView. Currently, the thread writes pixel data to a direct ByteBuffer shared…
user3840170
  • 11,878
  • 11
  • 37
2
votes
1 answer

Background image trembling while transition filter at Chrome

When I change blur filter, image trembles a little bit. Here is demo at jsfiddle. Please click twice on button at demo body { background-color: #000; } body::before { content: ""; position: absolute; top: 0; left: 0; …
2
votes
1 answer

Weird CSS hack for sharpening images (Chrome 59 and 60 only)

I encountered strange behavior in Chrome v60.0 when I placed a downscaled image on top of itself and set the CSS image-rendering parameter to pixelated: #container { position: relative; width: 160px } .image { width:…
Ethan
  • 49
  • 1
  • 5
2
votes
2 answers

Render PNG file in Rails

I have a Rails app where I am trying to display a PNG file but I am getting this error: 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…
Vincent Le
  • 106
  • 2
  • 10
1
2 3 4 5