Image-Rendering, but making images MORE pixelated?

问题

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.

回答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.

回答2:

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"/>

来源：https://stackoverflow.com/questions/35774747/image-rendering-but-making-images-more-pixelated

标签

javascript

html

css

image

image-rendering