在 HTML5 中，有没有办法使用"最近邻"重采样来调整图像大小?
调整图像大小是一项繁琐的任务，因为它会影响网站的性能。对于在线照片而言，大小至关重要。通常，用户更喜欢小尺寸的图像，因为即使在中等网速下，加载时间也更短。如果图像太大，页面可能会暂时无响应。大小均匀的图像网页更具吸引力。因此，上传合适大小的图像到您的网站至关重要。
调整大小 VS 重采样
在不改变图像像素尺寸的情况下，更改要打印图像的大小(即高度和宽度)，这称为调整大小。换句话说，您重新分配原始像素的数量，以适应图像中较小或较大的空间。
示例
<img src= "example.jpg" height= "250" width = "400"> In CSS, img { width: 500px, height: 360px }
注意 − 为了获得响应式图像，width 的值应设置为 100%，而 height 的值应设置为 auto。
通过添加或删除图像中的像素来物理更改图像文件大小称为重新采样图像。可以通过更改图像的分辨率以与输出媒体类型(即屏幕或打印)匹配来实现。
增加图像的像素数量称为上采样，而删除图像的像素数量称为下采样。</p>
示例
假设图像尺寸为 640*785 像素。如果将其设置为 700 * 785 像素，则称为上采样。
图像重采样的类型
在本节中，我们将了解图像重采样的类型
最近邻 − 它使用最接近的输入像素分配像素值。示例:模糊上采样。
二值插值 − 它使用四个最近像素的灰度值，通过双线性函数找出图像的新像素值。
三次卷积 − 它基于在图像的每个新像素周围都有一个 4*4 或 8*8 矩阵的算法。
最近邻重采样
这是用于图像重采样的最简单和常用的技术。
示例
上图显示，图像的 3*3 矩阵可以插值成 6*6 矩阵。所有新值都最接近输入值。
方法 1:使用 HTML5
您可以使用 HTML5 Canvas 通过最近邻重采样调整图像大小。
Example
<img src= "example.jpg" height= "250" width = "400"> const x = document.createElement (‘canvas’).getContext(‘ 2d’); x.drawImage (img, 0,0 ) ; var pic = x.getImageData( 0, 0, img.height, img.width) .data; for (let i = 0; i < img.width; ++i ){ for (let j = 0; j< img.height; ++j){ let a = (j*img.width + i)*4; let r = pic [i]; let g = pic[i+1]; let b = pic[i+2]; let a = pic[i+3]; ctx2.fillStyle ="rgba("+r+","+g+","+b+","+(a/255) +")"; ctx2.fillRect(i*zoom,j*zoom,zoom,zoom); } }
此处
x 是一个用于创建屏幕外画布的变量。
.drawImage 方法用于在当前画布上绘制图像或画布。
语法
drawImage (裁剪图像, 源图像 X 坐标, 源图像 Y 坐标, 源图像宽度, 源图像高度, 目标图像 X 坐标, 目标图像 Y 坐标, 目标图像宽度, 目标图像高度)。
示例
demo.drawImage ( img, 12, 10, 300, 250, 0, 0, 100, 200)
.getImageData() 用于返回画布部分数据。在我们的代码中，它用于获取图像的原始像素尺寸。
语法
getImageData(x, y, w, h)
参数
x − 需要获取数据的框左上角的 x 轴坐标
y − 需要获取数据的框左上角的 y 轴坐标。
w − 框的宽度
h − 框的高度
示例
demo.getImageData( 0, 23, 100, 200)
for 循环 − 用于迭代图像的高度和宽度，然后将放大的像素绘制到不同的画布上下文中。
i 和 j 变量 − 用于为每个像素生成唯一的 RGB 颜色。
.fillstyle − 用于设置画布中某个部分的颜色。
a − 指的是 alpha 值，它指定了画布的不透明度颜色。
语法
object.fillStyle= rgba()
示例
demo.fillStyle = rgba (255, 164, 0, 1);
.fillRect() − 此方法用于绘制矩形或方框，并根据指定的填充样式进行填充。
语法
fillRect(x, y, w, h)
参数
x − 框起点的 x 轴坐标
y − 框起点的 y 轴坐标。
w − 框的宽度
h − 框的高度
方法 2:图像渲染
渲染图像是生成用于缩放图像的算法类型的过程。它是应用于元素本身的 CSS 属性。
语法
image-rendering: value;
值
auto、pixelated、inherit、initial、revert、unset、revert-layer、crisp-edges。
示例
.demoImage{ -ms-interpolation-mode: nearest neighbour; image- rendering: pixelated; }
ms-interpolation-mode 属性允许您设置用于图像缩放的插值算法类型。
像素化 − 如果使用最近邻算法放大图像，则允许图像由更大的像素尺寸组成。
结论
在网站上使用轻量且加载速度快的图片可以提升用户体验。它可以吸引用户访问您的网站。此外，像谷歌、Microsoft Edge 等搜索引擎也青睐这样的网站，从而提高您网站的排名。因此，拥有合适分辨率的图片至关重要。
