39

Before you say this is an existing question, or that all I need to use is ms-interpolation-mode, or that I just need to have a pre-scaled version of the image on the server and serve that up, read the question. Please. None of those are appropriate.

I have an app that draws a very large image using the HTML5 canvas in the browser on all modern browsers. I pull an image out of that canvas and display it (shrunk down considerably in size on-screen). The scaled down image looks fine on Chrome, Firefox, Safari, or Opera whether Windows or Mac. IE however looks very terrible, even though I'm not testing this on old versions of IE (like IE 7 where the ms-interpolation-mode works), but only on IE 9, 10, and 11.

Why are they not smoothly scaling down the image? I thought later versions of IE could do this?

Here's a screenshot of my image saved off as a PNG file and loaded up in IE 11. Note that it's broken even if all I'm doing is looking at the PNG. My software and my web page are completely out of the picture here. This is just IE 11 showing a PNG file.

WTF Microsoft?

Am I going to have to do some kind of resizing in the canvas just to make a reduced size version for IE because they can't handle image scaling that every other browser on the market handles with ease? Is there nothing I can turn on via CSS to make this look better?

Here's a direct link to one of the generated images: https://i.stack.imgur.com/chIaY.png. Show me how to make this look good in a significantly smaller (say 0.25x) size in a page for IE 9, 10, and 11.

John Munsch
  • 19,530
  • 8
  • 42
  • 72
  • 2
    What mechanism are you using for scaling? What happens if you draw it at full scale in IE? Have you tried drawing at full scale and setting a canvas scaling factor? – Ted Hopp Mar 09 '14 at 18:10
  • It's an image which is already extracted from the canvas. The canvas is no longer involved. It's simply a large image I'm showing at a smaller size on the page. Show full size, IE shows the image fine. – John Munsch Mar 09 '14 at 18:11
  • I use the full-size image for printing. It is shown smaller to the user prior to printing so they get an idea of what will print. – John Munsch Mar 09 '14 at 18:12
  • 1
    Are you showing it by using its data URL as the source of an `` tag, and then constraining the size of the image with CSS? (Asking for clarification.) And how is it getting to the `` in the first place? *edit* oh wait never mind about the last part. – Pointy Mar 09 '14 at 18:12
  • Almost like that @Pointy. Here is the relevant HTML. The image in this case is the one I pulled out of the canvas with .toDataURL(): – John Munsch Mar 09 '14 at 18:14
  • 2
    Regarding the `ng-src` attribute: are you using angular.js? Per [this thread](http://stackoverflow.com/questions/19974577/angularjs-ng-src-behavior-on-non-standard-attributes), Angular has special treatment for MSIE browsers. Perhaps that's the source of the behavior you're seeing. – Ted Hopp Mar 09 '14 at 18:28
  • [I am not seeing the problem in IE11.](http://gutfullofbeer/mandelbrot) - the smaller image looks fine to me. – Pointy Mar 09 '14 at 18:28
  • 2
    It's caused by by the reason as here: http://stackoverflow.com/questions/17861447/html5-canvas-drawimage-how-to-apply-antialiasing –  Mar 09 '14 at 18:41
  • Um. The shrunk down image looks terrible on IE11. All of the detail on the very thin spire to the left is just gone. BTW, for anyone else who wants to try it, here's the corrected URL: http://gutfullofbeer.net/mandelbrot/ – John Munsch Mar 09 '14 at 18:42
  • 1
    No @Ken, it's not. That's about drawing an image into the canvas. In this case the canvas has already been used to generate the image and is out of the picture. We have an image which is good across all browsers and prints out fine. However, when trying to scale the image down for display is when this problem occurs. – John Munsch Mar 09 '14 at 18:45
  • @JohnMunsch the fractal widget lets you "zoom" by dragging a little rectangle over the top image. When I zoom down, the small image does lose detail, but then it *has* to. It doesn't look otherwise corrupted. – Pointy Mar 09 '14 at 18:45
  • I now have a sample image added to the body of the question. Look at it with an IE browser and see the problem, see if you know anything that will make it display at much smaller sizes in browser without significant aliasing problems. – John Munsch Mar 09 '14 at 18:52
  • Ah OK now I see it. Wow that's terrible. Unfortunately I've never had to deal with that. – Pointy Mar 09 '14 at 19:06
  • 2
    I have succeded in making your terrible display crossbrowser : try #img { -webkit-transform: scale(0.21) translateZ(1px); -webkit-transform-origin: top left; transform: scale(0.21) translateZ(1px); transform-origin: top left; } (and remove the dimension in the img itself). It will fail in IE, FF and Chrome . May be that gives somebody a clue ... – vals Mar 10 '14 at 19:24
  • Not an answer, but possible alternative... Is it always going to be this grid of lines? If so, it would be much faster to just draw the lines in a canvas or via SVG. Otherwise, downscaling raster images of straight, high-contrast, thin lines is difficult to get to work at the same time as downscaling other types of images, like photos. So the default algorithms and anti-aliasing settings often aren't good enough when applied to straight grid lines like yours. – Jon Adams Mar 10 '14 at 19:53
  • 1
    Weird, when I zoom in and then out quickly in Chrome, the poorly scaled version flashes quickly. But, IE seems to just give up at some horrible low resolution render of the image. Here is a side by side for anyone not seeing the problem: http://i.imgur.com/N66nHR6.png – Jonathan Mar 12 '14 at 15:49
  • @JonAdams I never did answer your question. I am trying to use the original rendered version because I don't want there to be subtle differences between what SVG might render vs. what my original looks like or try to render in two different scales with the canvas. I felt it was best to take my original and display it smaller to give the user a good sense for what the final print would look like. As you can see in Jonathan's example above, all the other browsers handle it quite easily, only IE seems unable to handle this. – John Munsch Mar 12 '14 at 22:55

3 Answers3

5

There seems to be two questions. The first is about downscaled <img> and the second is about downscaling image in canvas. The first happens only on IE but the later happens to other browsers too.

You are doing well, but you can clarify your question more next time; both has been answered on SO and each has different solutions.

For <img>, as discussed in other answers there is nothing you can do, except to provide a properly downscaled image.

For canvas, the question boils down to downscale quality with drawImage, and has already been answered: HTML5 Canvas Resize (Downscale) Image High Quality?

Here is a sample, using the algorithm in that answer, that produce a nicely scaled image on IE 11:

<!DOCTYPE html><meta charset="utf-8"/>
<img width='2550' height='3300' src='T9wgHSo.png' />
<script> 'use strict';
var img = document.getElementsByTagName('img')[0];
document.body.appendChild( downScaleImage( img, 0.1 ) );
img.parentNode.removeChild( img );

function downScaleImage(img, scale) { /* Please copy code from the other answer */ }
function downScaleCanvas(cv, scale) { /* Please copy code from the other answer */ }
Community
  • 1
  • 1
Sheepy
  • 17,324
  • 4
  • 45
  • 69
5

Why are they not smoothly scaling down the image? Well because Internet Explorer simply does not support a smooth form of interpolation any more. It was indeed supported in earlier versions of Internet Explorer (version 7) by using ms-interpolation-mode.

Newer versions of IE do not support this. It is a very frustrating IE issue and cannot be solved by CSS.

The only options you have is to divert to alternatives (downscale it on the server or obey Microsoft and use Silverlight... ;-) ).

Hate to say it but the only true solution is to just live with it.

Ron Deijkers
  • 2,791
  • 2
  • 22
  • 28
  • 2
    There is _no_ server. The whole page is JavaScript running client side and generating the image via the HTML canvas. – John Munsch Oct 16 '14 at 14:17
  • 5
    server side scaling can minimize the ugliness but can't help on responsive re-size or client side animations... MS should refrain from making browsers as it has devastated the planet by burning web-developpers time world wide for years, its just an HUGE COST – neu-rah Nov 26 '15 at 13:43
  • Here is another client side alternative: http://stackoverflow.com/questions/2303690/resizing-an-image-in-an-html5-canvas – Ron Deijkers Nov 26 '15 at 18:27
1

After encountering the same problem myself, I found this Crossbrowser-Bicubic-Image-Interpolation script. I tested it on my Win7 virtual machine in IE11 and it works.

After downloading the .zip you can open the demo.html file to see how to apply the script. Notice on line 26 of that HTML file there is jQuery code that targets only images with the class "first":

$('img.first').bicubicImgInterpolation({

But you can remove ".first" to make it target all images:

$('img').bicubicImgInterpolation({

So that's all you need. jquery.js, bicubicInterpolation.js, and the <script> that calls the function.

These items in the <head> tag are probably a good idea to include too:

<!-- enable canvas for old versions of IE -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="edit-Type" edit="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Mentalist
  • 1,530
  • 1
  • 18
  • 32