在HTML5中，有沒有辦法使用“最近鄰”重取樣來調整影像大小？

調整影像大小是一項繁瑣的任務，因為它會影響網站的效能。對於線上照片，大小非常重要。通常，使用者更喜歡小尺寸影像，因為即使在中等網際網路連線下，載入時間也更短。如果影像太大，您的頁面可能會在一段時間內無響應。具有統一尺寸影像的網頁更具吸引力。因此，將適當大小的影像上傳到您的網站至關重要。

調整大小與重取樣

更改影像的尺寸（即高度和寬度）以進行列印，而無需更改影像的畫素尺寸，這稱為調整大小。換句話說，您重新分配原始畫素的數量以適應影像中較小或較大的空間。

示例

<img src= “example.jpg” height= “250” width = “400”>
In CSS,
img {
   width: 500px, 
   height: 360px 
}

注意 - 為了獲得響應式影像，width 的值應設定為100%，而height 的值應設定為auto。

透過在影像中新增或刪除畫素來物理地更改影像檔案大小稱為影像重取樣。可以透過更改影像解析度以與輸出媒體型別（即螢幕或列印）對齊來完成此操作。

增加影像畫素數量稱為上取樣，而刪除影像畫素數量稱為下采樣。

示例

假設一個影像的大小為 640*785 畫素。如果將其更改為 700 * 785 畫素，則稱為上取樣。

影像重取樣的型別

在本節中，讓我們看一下影像重取樣的型別

  • 最近鄰 - 它使用最接近的輸入畫素來分配畫素值。例如：模糊的上取樣。

  • 雙線性插值 - 它使用四個最接近畫素的灰度值，使用雙線性函式找出影像的新畫素值。

  • 三次卷積 - 它基於圍繞影像每個新畫素的 4*4 或 8*8 矩陣的演算法。

最近鄰重取樣

它是用於影像重取樣的最簡單和最常見的技術。

示例

上圖顯示瞭如何將影像的 3*3 矩陣內插到 6*6 矩陣。所有新值都最接近輸入值。

方法 1：使用 HTML5

您可以使用 HTML5 canvas 使用最近鄰重取樣來調整影像大小。

示例

<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 (cropping image, X- coordinate of source, Y- coordinate of source, source width, source height, X- coordinate of destination image, Y coordinate of destination image, destion image’s width, destination image’s height).

示例

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() - 這是一個用於繪製矩形或框的方法，該矩形或框根據指定的 fillstyle 填充。

語法

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 屬性允許您設定用於影像縮放的插值演算法型別。

Pixelated - 如果使用最近鄰演算法放大影像，它會使影像由更大的畫素尺寸組成。

結論

在您的網站上擁有輕量級且載入速度快的影像可以增強使用者體驗。它會吸引使用者訪問您的網站。此外，像谷歌、微軟 Edge 等搜尋引擎也青睞此類網站，從而提高您網站的排名。因此，擁有具有適當解析度的影像非常重要。

更新於：2022年10月13日

2K+ 次瀏覽

啟動您的 職業生涯

完成課程獲得認證

開始
廣告