javascript - 图像渲染，但使图像更加像素化？

Question

我需要向我网站的用户说明，当他们的图像打印到画布上时，它会随着变大而失去质量。这样做的方法是故意降低他们在屏幕上提供的图像的分辨率，并免责声明为什么会这样。

我听说过图像渲染，但可以理解的是，我看到的所有示例都是在增加图像大小时改善跨浏览器的图像。有没有办法让图像保持相同大小但降低分辨率？将愉快地使用 css、JavaScript 和 PHP。

Answer 1

您可以使用Cloudinary 的图像转换 API

它是一个 API，可以按照您想要的方式返回转换后的图像。考虑到您不需要任何特殊或高带宽，这可能适合您。

以下是如何使用它：

• 创建一个免费帐户
• 上传图片
• 像这样访问您的图像：http://res.cloudinary.com/demo/image/upload/e_pixelate:4/sample.jpg
• demo是你的“桶”，image是图片资源的目录，e_pixelate:4是效果名称及其参数，最后sample.jpg是图片的文件名。

Answer 2

使用 canvas2d API，您可以在 IE10+ 浏览器上执行此操作，这要归功于imageSmoothingEnabled参数：

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

对于不支持此参数的旧浏览器，您也可以通过操作从 ctx 获取的 imageData 自行完成。获取图像数据。

几个链接：

ctx。imageSmoothingEnabled
ctx。绘制图像
ctx。规模
ctx。设置变换

Ps：我不确定我是否满足了全部要求，如果您只是想要一个人工结果，而不是像素化结果，请不要将imageSmoothingEnabled标志设置为 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"/>