Image-Rendering, but making images MORE pixelated?

Question

I need to illustrate to a user of my website that when their image is printed onto a canvas it will lose quality as it will become larger. On way to do this is to deliberately lower the resolution of the image they provide on screen, with a disclaimer as to why it will be like this.

I heard about image-rendering but all the example I saw, understandably, where about improving the image across browsers when increasing the images size. is there anyway to keep the image the same size but lower the resolution? Will happily use css, JavaScript and PHP.

Seems like a quick and easy demo of this would be to increase an image's size on the screen. That way you keep the whole image but decrease the DPI. — Chris Farmer, Mar 03 '16 at 14:28
Yeh, thanks, although this does do what is required, I need to keep the image on screen to the same size. — Owen OfWinterhold, Mar 03 '16 at 14:29
Will a zoom functionality be alright with you? Instead of changing the resolution, just zooming in. I'll just put this here. Look at last answer http://stackoverflow.com/questions/2207508/how-to-zoom-in-and-zoom-out-image-using-jquery — misha130, Mar 03 '16 at 14:30

score 1 · Answer 1 · edited Mar 04 '16 at 23:31

1

You can use the image transformation API from Cloudinary

It's an API that's returning transformed images the way you want them. Considering you don't need anything special nor high bandwidth, this just might suit you.

Here's how to use it:

Create a free account
Upload an image
Access your image like this: http://res.cloudinary.com/demo/image/upload/e_pixelate:4/sample.jpg
demo is your "bucket", imageis a directory of an image resource, e_pixelate:4 is the name of effect and its parameter and finally sample.jpg is a file name of an image.

edited Mar 04 '16 at 23:31

answered Mar 03 '16 at 14:32

Bramastic

349
2
14

Please mark post as answer if it really helped you. Thanks! – Bramastic Mar 03 '16 at 20:33
2

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/low-quality-posts/11494020) – xpy Mar 04 '16 at 07:56
@xpy We can agree for the first part of your critic but not on the second part. If the site and/or API has changed, it's better to see it at the source. I even included an ID of that paragraph. Answered post with a feedback from the OP and got a negative score. That sucks ballz. – Bramastic Mar 04 '16 at 11:39

score 0 · Answer 2 · answered Mar 04 '16 at 10:21

Using the canvas2d API, you could do it on IE10+ browsers thanks to the imageSmoothingEnabled parameter :

var c = document.getElementById('c');
var ctx = c.getContext('2d');

var img = document.getElementById('original');
img.src = 'http://lorempixel.com/200/200';
img.onload = function() {

  var scale = .1;
  //scale down your context matrix
  ctx.scale(scale, scale)
    // remove the smoothing
  ctx.mozImageSmoothingEnabled = false;
  ctx.webkitImageSmoothingEnabled = false;
  ctx.msImageSmoothingEnabled = false;
  ctx.imageSmoothingEnabled = false;

  // draw a first time your image 
  ctx.drawImage(img, 0, 0, img.width, img.height);
  // reset your context's transformation matrix
  ctx.setTransform(1, 0, 0, 1, 0, 0);
  // draw your canvas on itself using the cropping features of drawImage
  ctx.drawImage(c, 0, 0, img.width * scale, img.height * scale, 0, 0, img.width, img.height)
};

<canvas id="c" width="200" height="200"></canvas>
<img id="original" />

For older browsers which don't support this parameter, you could also do it by yourself by manipulating the imageData got from ctx.getImageData.

A few links :

ctx.imageSmoothingEnabled
ctx.drawImage
ctx.scale
ctx.setTransform

Ps : I'm not sure I got the full requirements, also if you just want an artifacted result, and not a pixellated one, just don't set the imageSmoothingEnabled flag to false :

var c = document.getElementById('c');
var ctx = c.getContext('2d');

var img = document.getElementById('original');
img.src = 'http://lorempixel.com/200/200';
img.onload = function() {

  var scale = .1;
  //scale down your context matrix
  ctx.scale(scale, scale)
  // draw a first time your image 
  ctx.drawImage(img, 0, 0, img.width, img.height);
  // reset your context's transformation matrix
  ctx.setTransform(1, 0, 0, 1, 0, 0);
  // draw your canvas on itself using the cropping features of drawImage
  ctx.drawImage(c, 0, 0, img.width * scale, img.height * scale, 0, 0, img.width, img.height)
};

<canvas id="c" width="200" height="200"></canvas>
<img id="original"/>

Image-Rendering, but making images MORE pixelated?

2 Answers2

Linked