How to Stretch Images With No Antialiasing

How to stretch images with no antialiasing

The Canvas documentation explicitly does not specify a scaling method - in my own tests it did indeed anti-alias the image quite badly in Firefox.

The code below copies pixel by pixel from a source image (which must be from the same Origin or from a Data URI) and scales it by the specified factor.

An extra off-screen canvas (src_canvas) is required to receive the original source image, and its image data is then copied pixel by pixel into an on-screen canvas.

var img = new Image();
img.src = ...;
img.onload = function() {

    var scale = 8;

    var src_canvas = document.createElement('canvas');
    src_canvas.width = this.width;
    src_canvas.height = this.height;

    var src_ctx = src_canvas.getContext('2d');
    src_ctx.drawImage(this, 0, 0);
    var src_data = src_ctx.getImageData(0, 0, this.width, this.height).data;

    var dst_canvas = document.getElementById('canvas');
    dst_canvas.width = this.width * scale;
    dst_canvas.height = this.height * scale;
    var dst_ctx = dst_canvas.getContext('2d');

    var offset = 0;
    for (var y = 0; y < this.height; ++y) {
        for (var x = 0; x < this.width; ++x) {
            var r = src_data[offset++];
            var g = src_data[offset++];
            var b = src_data[offset++];
            var a = src_data[offset++] / 100.0;
            dst_ctx.fillStyle = 'rgba(' + [r, g, b, a].join(',') + ')';
            dst_ctx.fillRect(x * scale, y * scale, scale, scale);
        }
    }
};

Working demo at http://jsfiddle.net/alnitak/LwJJR/

EDIT a more optimal demo is available at http://jsfiddle.net/alnitak/j8YTe/ that also uses a raw image data array for the destination canvas.

Stretch Bitmap without anti-aliasing

Set the interpolation mode to nearest neighbor:

g.InterPolationMode = InterpolationMode.NearestNeighbor

Disable antialising when scaling images

Try this,
it's a fix for removing it in all browsers.

img { 
    image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
    image-rendering: -moz-crisp-edges;          /* Firefox                        */
    image-rendering: -o-crisp-edges;            /* Opera                          */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
    image-rendering: pixelated; /* Chrome */
    image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */

}

Sources:

http://nullsleep.tumblr.com/post/16417178705/how-to-disable-image-smoothing-in-modern-web-browsers

http://updates.html5rocks.com/2015/01/pixelated

GitaarLAB

Scale CSS sprite pixel art without image smoothing

The bad news:

Unfortunately, it looks like your options are either using the canvas, using JavaScript, or living with anti-aliasing in Chrome and I.E.

Here are some responses that might help you with one of the other two if you don't choose to live with the anti-aliasing:

Links:

1. Javascript-Only Solution - Old, slow, but works everywhere
2. Canvas solution - New, quicker, doesn't work in non-compliant browsers

Sorry there isn't better news for you on this.

How to un-anti-alias a sprite background image ENLARGEMENT in Microsoft Edge?

I had recently the exact same problem on a web project, and, as mentioned in the comments it is technically not supported by Edge for now. And IMHO, as it's an expected feature by the dev community for over 3 years, and in low priority in their backlog, I think it's not worth to wait after this feature getting released.

And since I had to get the job done, what I did to solve the problem was using larger source images and just scaled them down with CSS (which is also a good thing especially when displayed on high density screens such as Retina).

In your special case, using vector images such as SVG is IMO the best way to get the job done even on Edge, it's also lighter in weight than larger images.

How do I resize an image using PIL and maintain its aspect ratio?

Define a maximum size.
Then, compute a resize ratio by taking min(maxwidth/width, maxheight/height).

The proper size is oldsize*ratio.

There is of course also a library method to do this: the method Image.thumbnail.

Below is an (edited) example from the PIL documentation.

import os, sys
import Image

size = 128, 128

for infile in sys.argv[1:]:
    outfile = os.path.splitext(infile)[0] + ".thumbnail"
    if infile != outfile:
        try:
            im = Image.open(infile)
            im.thumbnail(size, Image.ANTIALIAS)
            im.save(outfile, "JPEG")
        except IOError:
            print "cannot create thumbnail for '%s'" % infile

Stretch jMonkey texture without anti-aliasing/blurring

Okay, so I found the answer. You want to set the texture's MagFilter to Texture.MagFilter.Nearest; by default its Texture.MagFilter.Bilinear and that's what's causing the blurring. Cool.

---

Related Topics