图像渲染，但使图像更加像素化？答案

【问题标题】：Image-Rendering, but making images MORE pixelated?图像渲染，但使图像更加像素化？
【发布时间】：2016-03-05 07:31:46
【问题描述】：

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

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

【问题讨论】：

似乎一个快速简单的演示就是增加屏幕上图像的大小。这样可以保留整个图像，但会降低 DPI。
是的，谢谢，虽然这确实符合要求，但我需要将屏幕上的图像保持为相同大小。
您可以使用缩放功能吗？而不是改变分辨率，只是放大。我就把它放在这里。看最后一个答案stackoverflow.com/questions/2207508/…
我看看谢谢

标签： javascript html css image image-rendering

【解决方案1】：

您可以使用image transformation API from Cloudinary

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

使用方法如下：

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

【讨论】：

如果对您有帮助，请将帖子标记为答案。谢谢！
虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review
@xpy 我们可以同意您的批评者的第一部分，但不同意第二部分。如果站点和/或 API 发生了变化，最好从源头上查看。我什至包括了该段落的 ID。回复了来自 OP 的反馈的帖子并得到了负分。这太糟糕了。

【解决方案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.getImageData 获取的 imageData 自行完成。

几个链接：

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

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

【讨论】：