javascript - 浏览器可以生成不同分辨率的图像吗？

Question

给定一个图像，比如一个 jpeg 文件，有没有办法以不同的分辨率在网页上显示它？

请注意，与措辞相似的问题不同，我不是在谈论更改页面上图像的大小。

不，我不是要求 CSI 软件可以神奇地为低分辨率图像添加细节。

我想要的是这样的：

其中第一个图像是原始高分辨率文件（205×304），其他图像是中（82×122）和低（41×61）分辨率显示的相同文件。

是否有 CSS 或 javascript 可以做到这一点？

（CSSfilter: blur()有类似的效果，但不是我想要的（例如没有锯齿）。）

标签： javascriptcssimage-processing

Answer 1

当然，您可以使用 <canvas> 元素非常简单地做到这一点，只需将其width和height属性设置为目标元素，然后在其上绘制图像。然后，如果您愿意，只需使用 CSS 调整这些画布的大小：

function downscale( img, width, height ) {
  const canvas = document.createElement( 'canvas' );
  canvas.width = width;
  canvas.height = height;
  const ctx = canvas.getContext('2d');
  return new Promise( (resolve, reject) => {
    if( img.naturalWidth ) { // if already loaded
      draw();
    }
    else {
      img.addEventListener( 'load', draw, { once: true } );
      img.addEventListener( 'error', reject, { once: true } );
    }
    
    function draw() {
      ctx.drawImage( img, 0, 0, width, height );
      resolve( canvas );
    }
  } );
}

const img = document.querySelector( 'img' );
// original image size: 158 * 240
Promise.all( [
  downscale( img, 79, 120 ),
  downscale( img, 40, 60 )
] ).then( (canvases) =>
  document.querySelector( '.img-container' )
    .append( ...canvases )
)
.catch( console.error );

img, canvas { height: 240px }

<div class="img-container">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/Mona_Lisa.jpg/158px-Mona_Lisa.jpg"></div>

用 CSS 来做这件事在理论上听起来是可行的，例如通过使用width和height属性进行放大，然后使用转换进行缩小，但似乎实现只会批处理所有操作而不是一个一个地应用，因此两个操作只会相互还原。