New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.
Starred by 32 users

Issue metadata

Status: Available
Owner: ----
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 3
Type: Feature



Sign in to add a comment

Support the new image-rendering CSS properties (crisp-edges)

Project Member Reported by pdr@chromium.org, Nov 12 2013

Issue description

CSS is upgrading the image-rendering property to support crisp-edges:
http://dev.w3.org/csswg/css-images/#the-image-rendering

We should support this!
 
For SVG content also.
Yes, This would be great!! Specifically "image-rendering: pixelated." I am designing a web app to view medical CT data, and when you re-sample (for zoom in) with any method other than nearest-neighbor, the display becomes inaccurate and ugly. I just want to see the pixels enlarged as is.
Project Member

Comment 3 by bugdroid1@chromium.org, Jul 22 2014

The following revision refers to this bug:
  http://src.chromium.org/viewvc/blink?view=rev&rev=178653

------------------------------------------------------------------
r178653 | jackhou@chromium.org | 2014-07-22T14:23:41.686330Z

Changed paths:
   M http://src.chromium.org/viewvc/blink/trunk/Source/devtools/front_end/sdk/CSSMetadata.js?r1=178653&r2=178652&pathrev=178653
   M http://src.chromium.org/viewvc/blink/trunk/Source/platform/RuntimeEnabledFeatures.in?r1=178653&r2=178652&pathrev=178653

Ship image-rendering: pixelated to stable.

This also adds the value to DevTools.

Intent to Ship:
https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/zSasd2LL8Mc

BUG=317991, 106662 , 260739 , 134040 

Review URL: https://codereview.chromium.org/396063007
-----------------------------------------------------------------
Project Member

Comment 4 by bugdroid1@chromium.org, Sep 25 2014

The following revision refers to this bug:
  http://src.chromium.org/viewvc/blink?view=rev&rev=182649

------------------------------------------------------------------
r182649 | jackhou@chromium.org | 2014-09-25T05:50:15.759817Z

Changed paths:
   M http://src.chromium.org/viewvc/blink/trunk/Source/devtools/front_end/sdk/CSSMetadata.js?r1=182649&r2=182648&pathrev=182649
   M http://src.chromium.org/viewvc/blink/trunk/Source/platform/RuntimeEnabledFeatures.in?r1=182649&r2=182648&pathrev=182649

Revert of Ship image-rendering: pixelated to stable. (patchset #1 id:1 of https://codereview.chromium.org/396063007/)

Reason for revert:
The bug affecting canvases also affects images that become compositor layers. Unshipping until it's fixed.

Original issue's description:
> Ship image-rendering: pixelated to stable.
> 
> This also adds the value to DevTools.
> 
> Intent to Ship:
> https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/zSasd2LL8Mc
> 
> BUG=317991, 106662 , 260739 , 134040 
> 
> Committed: https://src.chromium.org/viewvc/blink?view=rev&revision=178653

TBR=vsevik@chromium.org,eseidel@chromium.org,timloh@chromium.org
NOTREECHECKS=true
NOTRY=true
BUG=317991, 106662 , 260739 , 134040 

Review URL: https://codereview.chromium.org/604683003
-----------------------------------------------------------------
Project Member

Comment 5 by bugdroid1@chromium.org, Sep 30 2014

Labels: merge-merged-2125
The following revision refers to this bug:
  http://src.chromium.org/viewvc/blink?view=rev&rev=182882

------------------------------------------------------------------
r182882 | jackhou@chromium.org | 2014-09-30T03:08:14.208416Z

Changed paths:
   M http://src.chromium.org/viewvc/blink/branches/chromium/2125/Source/devtools/front_end/sdk/CSSMetadata.js?r1=182882&r2=182881&pathrev=182882
   M http://src.chromium.org/viewvc/blink/branches/chromium/2125/Source/platform/RuntimeEnabledFeatures.in?r1=182882&r2=182881&pathrev=182882

Merge 182649 "Revert of Ship image-rendering: pixelated to stabl..."

> Revert of Ship image-rendering: pixelated to stable. (patchset #1 id:1 of https://codereview.chromium.org/396063007/)
> 
> Reason for revert:
> The bug affecting canvases also affects images that become compositor layers. Unshipping until it's fixed.
> 
> Original issue's description:
> > Ship image-rendering: pixelated to stable.
> > 
> > This also adds the value to DevTools.
> > 
> > Intent to Ship:
> > https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/zSasd2LL8Mc
> > 
> > BUG=317991, 106662 , 260739 , 134040 
> > 
> > Committed: https://src.chromium.org/viewvc/blink?view=rev&revision=178653
> 
> TBR=vsevik@chromium.org,eseidel@chromium.org,timloh@chromium.org
> NOTREECHECKS=true
> NOTRY=true
> BUG=317991, 106662 , 260739 , 134040 
> 
> Review URL: https://codereview.chromium.org/604683003

TBR=jackhou@chromium.org

Review URL: https://codereview.chromium.org/612273002
-----------------------------------------------------------------
Will Chrome support smoother downscaling of canvases when downscaling?

According to the spec, that may be the default behavior:
"The image should be scaled with an algorithm that maximizes the appearance of the image. In particular, scaling algorithms that "smooth" colors are acceptable, such as bilinear interpolation. This is intended for images such as photos."

http://www.w3.org/TR/css4-images/#image-rendering
Re #7: A more recent draft has removed the downscaling behavior: http://dev.w3.org/csswg/css-images-3/

Always using nearest neighbor also makes it more consistent with other browsers.
Project Member

Comment 10 by bugdroid1@chromium.org, Dec 15 2014

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/2422961898e84e420c0e12031ebb5147748ab490

commit 2422961898e84e420c0e12031ebb5147748ab490
Author: jackhou <jackhou@chromium.org>
Date: Sat Dec 13 23:41:00 2014

[cc] Add nearest neighbor filtering for PictureLayer.

Blink side here (depends on this CL):
https://codereview.chromium.org/782693003/

BUG=317991

Review URL: https://codereview.chromium.org/789433003

Cr-Commit-Position: refs/heads/master@{#308289}

[modify] http://crrev.com/2422961898e84e420c0e12031ebb5147748ab490/cc/blink/web_image_layer_impl.cc
[modify] http://crrev.com/2422961898e84e420c0e12031ebb5147748ab490/cc/blink/web_image_layer_impl.h
[modify] http://crrev.com/2422961898e84e420c0e12031ebb5147748ab490/cc/layers/picture_layer.cc
[modify] http://crrev.com/2422961898e84e420c0e12031ebb5147748ab490/cc/layers/picture_layer.h
[modify] http://crrev.com/2422961898e84e420c0e12031ebb5147748ab490/cc/layers/picture_layer_impl.cc
[modify] http://crrev.com/2422961898e84e420c0e12031ebb5147748ab490/cc/layers/picture_layer_impl.h
[modify] http://crrev.com/2422961898e84e420c0e12031ebb5147748ab490/cc/layers/tiled_layer_impl.cc
[modify] http://crrev.com/2422961898e84e420c0e12031ebb5147748ab490/cc/output/gl_renderer.cc
[modify] http://crrev.com/2422961898e84e420c0e12031ebb5147748ab490/cc/output/renderer_pixeltest.cc
[modify] http://crrev.com/2422961898e84e420c0e12031ebb5147748ab490/cc/output/software_renderer.cc
[modify] http://crrev.com/2422961898e84e420c0e12031ebb5147748ab490/cc/output/software_renderer_unittest.cc
[modify] http://crrev.com/2422961898e84e420c0e12031ebb5147748ab490/cc/quads/content_draw_quad_base.cc
[modify] http://crrev.com/2422961898e84e420c0e12031ebb5147748ab490/cc/quads/content_draw_quad_base.h
[modify] http://crrev.com/2422961898e84e420c0e12031ebb5147748ab490/cc/quads/draw_quad_unittest.cc
[modify] http://crrev.com/2422961898e84e420c0e12031ebb5147748ab490/cc/quads/picture_draw_quad.cc
[modify] http://crrev.com/2422961898e84e420c0e12031ebb5147748ab490/cc/quads/picture_draw_quad.h
[modify] http://crrev.com/2422961898e84e420c0e12031ebb5147748ab490/cc/quads/tile_draw_quad.cc
[modify] http://crrev.com/2422961898e84e420c0e12031ebb5147748ab490/cc/quads/tile_draw_quad.h
[modify] http://crrev.com/2422961898e84e420c0e12031ebb5147748ab490/cc/test/render_pass_test_common.cc
[modify] http://crrev.com/2422961898e84e420c0e12031ebb5147748ab490/cc/trees/layer_tree_host_impl_unittest.cc
[modify] http://crrev.com/2422961898e84e420c0e12031ebb5147748ab490/content/common/cc_messages.h
[modify] http://crrev.com/2422961898e84e420c0e12031ebb5147748ab490/content/common/cc_messages_unittest.cc
[modify] http://crrev.com/2422961898e84e420c0e12031ebb5147748ab490/mojo/converters/surfaces/surfaces_type_converters.cc
[modify] http://crrev.com/2422961898e84e420c0e12031ebb5147748ab490/mojo/services/public/interfaces/surfaces/quads.mojom

Re #8:
I think I should make my use case clearer:

I want to use the BPG image format [1] for pictures of arbitrary sizes, and I want these to fit the screen size, so I wish <canvas> could downscale as smoothly as <img>.

AFAIK these are my current possible workarounds/solutions:
- Paint the picture on a background <canvas>, get a png blob out of it, create a blob url, make an <img> with said url.
  Since  Issue 67587  isn't resolved, using base64 data instead will be necessary and less than desirable.
- Reimplement downscaling in JS, and handle viewport resizes, content resizes, screen rotation, etc... which isn't stellar.

Upscaling <canvas> seems to be fine, but downscaling gives similar results to an <img> with `transform: translateZ(0);`:
smoother than with `image-rendering: pixelated` but not ideal.
Is there a reason browsers do this other than browser consistency?

Maybe this isn't the best place to discuss this but I wanted to get it out there.

[1] http://bellard.org/bpg/
Owner: jackhou@chromium.org
Status: Started
If you're testing this on Chrome, it's possible you're seeing some bugs because it's not fully implemented yet. I'd recommend trying it on the other browsers too. 
This page has as summary of the CSS values accepted by each browser:
https://developer.mozilla.org/en/docs/Web/CSS/image-rendering

In general, to make the behavior different when upscaling vs downscaling, it's probably best to hook resize events and manually set image-rendering. This also lets you define what downscaling means, which wasn't well specified in the previous draft spec.

I think one of the other reasons to remove the downscaling part from the spec is that it actually prevented downscaling with nearest neighbor, which may be desirabled in some use cases.
Project Member

Comment 13 by bugdroid1@chromium.org, Dec 18 2014

The following revision refers to this bug:
  http://src.chromium.org/viewvc/blink?view=rev&rev=187428

------------------------------------------------------------------
r187428 | jackhou@chromium.org | 2014-12-18T03:53:29.654145Z

Changed paths:
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/canvas/pixelated-canvas-expected.txt?r1=187428&r2=187427&pathrev=187428
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/canvas/pixelated-off-screen-expected.html?r1=187428&r2=187427&pathrev=187428
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/canvas/pixelated-off-screen.html?r1=187428&r2=187427&pathrev=187428
   M http://src.chromium.org/viewvc/blink/trunk/Source/platform/graphics/Canvas2DLayerBridge.cpp?r1=187428&r2=187427&pathrev=187428
   M http://src.chromium.org/viewvc/blink/trunk/Source/platform/graphics/Canvas2DImageBufferSurface.h?r1=187428&r2=187427&pathrev=187428
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/canvas/pixelated-canvas-expected.png?r1=187428&r2=187427&pathrev=187428
   M http://src.chromium.org/viewvc/blink/trunk/Source/platform/graphics/Canvas2DLayerBridge.h?r1=187428&r2=187427&pathrev=187428
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/virtual/gpu/fast/canvas/pixelated-expected.txt?r1=187428&r2=187427&pathrev=187428
   M http://src.chromium.org/viewvc/blink/trunk/Source/platform/graphics/ImageBuffer.h?r1=187428&r2=187427&pathrev=187428
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/html/HTMLCanvasElement.cpp?r1=187428&r2=187427&pathrev=187428
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/canvas/pixelated-resize.html?r1=187428&r2=187427&pathrev=187428
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/virtual/gpu/fast/canvas/pixelated-expected.png?r1=187428&r2=187427&pathrev=187428
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/canvas/pixelated.html?r1=187428&r2=187427&pathrev=187428
   M http://src.chromium.org/viewvc/blink/trunk/Source/platform/graphics/ImageBufferSurface.h?r1=187428&r2=187427&pathrev=187428
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/canvas/pixelated-resize-expected.txt?r1=187428&r2=187427&pathrev=187428
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/canvas/pixelated-canvas.html?r1=187428&r2=187427&pathrev=187428
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/canvas/pixelated-expected.txt?r1=187428&r2=187427&pathrev=187428
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/canvas/pixelated-resize-expected.png?r1=187428&r2=187427&pathrev=187428
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/canvas/pixelated-expected.png?r1=187428&r2=187427&pathrev=187428

Implement image-rendering:pixelated for accelerated 2D canvases.

This CL depends on a CC side change here:
https://codereview.chromium.org/558083002/
 
BUG= 134040 ,  424025 , 317991

Review URL: https://codereview.chromium.org/562583002
-----------------------------------------------------------------
Project Member

Comment 14 by bugdroid1@chromium.org, Dec 19 2014

The following revision refers to this bug:
  http://src.chromium.org/viewvc/blink?view=rev&rev=187505

------------------------------------------------------------------
r187505 | jackhou@chromium.org | 2014-12-19T04:45:53.832093Z

Changed paths:
   M http://src.chromium.org/viewvc/blink/trunk/Source/devtools/front_end/sdk/CSSMetadata.js?r1=187505&r2=187504&pathrev=187505
   M http://src.chromium.org/viewvc/blink/trunk/Source/platform/RuntimeEnabledFeatures.in?r1=187505&r2=187504&pathrev=187505

Ship image-rendering: pixelated to stable.

This is effectively a revert of: 
https://codereview.chromium.org/604683003
Which was itself a revert of the first attempt to ship pixelated:
https://codereview.chromium.org/396063007

It was reverted because pixelated did not work for accelerated elements.
This is now fixed.

Intent to ship thread:
https://groups.google.com/a/chromium.org/d/topic/blink-dev/zSasd2LL8Mc/discussion

BUG= 134040 ,317991

Review URL: https://codereview.chromium.org/806413006
-----------------------------------------------------------------
Cc: jackhou@chromium.org
Owner: ----
Status: Available
Pixelated should be done now. I'll leave this open for crisp-edges.
Labels: -Type-Bug Type-Feature
Labels: -Cr-Blink

Comment 18 by k...@motif.co, May 2 2016

I'm the author of Framer, an interactive design tool: http://framerjs.com. Framer lets you build prototypes to view in your browser. Most commonly the image resources used are interface art, and the default image scaling algorithm makes it look very blurry.

Project: http://framerjs.com/gallery/preview/#voice-onboarding.framer
Comparison: http://cl.ly/152B39153m1s
More: http://framerjs.com/gallery

We would really benefit from an `image-rendering: crisp-edges` option. Thanks!

Comment 19 by meade@chromium.org, Oct 12 2016

Labels: -Pri-2 Pri-3
Description: Show this description
Summary: Support the new image-rendering CSS properties (crisp-edges) (was: Support the new image-rendering CSS properties (crisp-edges, pixelated))

Comment 22 by c...@wake.io, Jan 4 2017

Our team builds software for design teams and having `image-rendering: crisp-edges` support would help a lot. We try our best to present our user's work in the best possible way and blurred edges aren't cutting it! Thank you for your consideration in prioritizing this in a future release!

Project: https://wake.com
Labels: Update-Quarterly
Labels: -Update-Quarterly

Sign in to add a comment