Question

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

我听说过图像渲染，但我所看到的所有例子，可以理解的是，在增加图像大小时，在浏览器中改进图像的地方。无论如何要保持图像大小相同但分辨率更低？很乐意使用css，JavaScript和PHP。

Answer 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是文件图像名称。

Answer 2

使用canvas2d API，您可以通过imageSmoothingEnabled参数在IE10 +浏览器上执行此操作：

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标志设置为假：

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

图像渲染，但使图像更像素化？

2 个答案: