JavaScript/影像

簡介

影像主要可以透過兩種方式在瀏覽器的 DOM（文件物件模型）中使用

在img標籤中
在canvas標籤中

影像標籤

用於您可能想要img縮放大小的影像，

更改影像在頁面上的對齊方式（左、右、居中），
提取載入影像的影像大小（寬度和高度）並在文字中顯示大小
使用 Javascript。
...

畫布標籤

[編輯 | 編輯原始碼]

畫素級別修改載入影像的選項（例如，將畫布上的紅色畫素替換為藍色畫素），

標記影像上的特定區域並使用
文字對影像進行註釋（例如，在影像上新增建築物的名稱），
- 幾何物件（例如，用圓圈標記一個人或在影像中新增箭頭，...
- 使用畫布將兩個源影像合併為一個影像。
- 工作流程

[編輯 | 編輯原始碼]

(S1) 分配： 要在 Javascript 中使用影像/畫布，需要在 Javascript 中建立一個變數來使用影像/畫布。

(S2) 處理： 在 Javascript 中選擇可用的方法來處理影像
或img(S3) 載入/儲存（本地）： 如果影像在畫布上修改，則必須提供並轉換結果，以便結果可以提交到伺服器或儲存在客戶端本地以供進一步使用canvas標籤中
對於上面提到的工作流程，我們將使用影像處理工作流程作為示例。

使用 Javacript 獲取有關影像的資訊。

將一個影像載入到畫布中，並在影像上新增文字或幾何元素（如線條、圓形和框）的註釋，然後再次匯出修改後的影像。
載入兩個影像並將它們合併到一個畫布中。
作為示例影像，我們將使用

舊金山金門大橋的創意共享影像和

柏林勃蘭登堡門的創意共享影像。
分配

[編輯 | 編輯原始碼]

document.getElementById(pID)呼叫並使用相應的識別符號pID在前面的示例中，我們假設您有一個檔案.

<!DOCTYPE html>
<html>
<body>

<img id="myImage" src="Golden_Gate_Bridge_as_seen_from_Battery_East.jpg" alt="Golden Gate Bridge">

<script>
  var var4image = document.getElementById("myImage");
</script>

</body>
</html>

index.html以及影像 Golden_Gate_Bridge_as_seen_from_Battery_East.jpg 在同一個目錄中。將影像新增到 HTML 頁面

[編輯 | 編輯原始碼]

標籤新增到 HTML 中。img要提到的一個重要方面是，所有影像在 HTML 頁面 DOM 中都有唯一的 ID。因此，如果您在一個頁面中有多個影像，則必須為每個影像分配一個新的識別符號。

 <img id="myImage" src="Golden_Gate_Bridge_as_seen_from_Battery_East.jpg" >

為了使 Javascript 程式碼更易讀和易於維護，您可能希望為影像分配有意義的識別符號。例如，我們將第二個影像的識別符號更改為有意義的名稱。

 <img id="myImage" src="Golden_Gate_Bridge_as_seen_from_Battery_East.jpg">
 <img id="myImage2" src="Brandenburger_Tor_abends.jpg">

一個字首

 <img id="myImage" src="Golden_Gate_Bridge_as_seen_from_Battery_East.jpg">
 <img id="imgBrandenburgGate" src="Brandenburger_Tor_abends.jpg">

img...可以用於識別符號imgBrandenburgGate表示 ID 指的是影像而不是畫布。現在我們還將一個畫布新增到 HTML 程式碼中。畫布具有特定的寬度和大小。由於畫布是空的，我們必須使用width和height屬性來指定畫布的大小，您也可以將它們用於影像。分配影像變數

 <img id="myImage" src="Golden_Gate_Bridge_as_seen_from_Battery_East.jpg">
 <img id="imgBrandenburgGate" src="Brandenburger_Tor_abends.jpg">
 <canvas id="canvImageAnnotation" width="320" height="213"></canvas>

[編輯 | 編輯原始碼]

HTML 頁面 DOM 中的物件分配給變數imgvar4image特別是在更復雜的程式碼中，您可能希望在 Javascript 程式碼中使用有意義的變數名，類似於 DOM 中的識別符號。我們為第二個影像和畫布使用有意義的名稱。.

 var var4image = document.getElementById("myImage");

影像分配錯誤處理

 var var4image = document.getElementById("myImage");
 var imgGate = document.getElementById("imgBrandenburgGate");
 var canvas4annotation = document.getElementById("canvImageAnnotation");

[編輯 | 編輯原始碼]

null. 您可以使用getImage4Id(pID)函式來處理這種情況。定義函式後，您可以用

 function getImage4Id(pID) {
   var vImg;
   if (pID) {
      vImg = document.getElementById(pID);
      if (vImg) {
        return vImg;
      } else {
         console.error("Image with identifier '" + pID + "' does not exist in the DOM tree.");
      }
   } else {
     console.error("No identifier 'pID' was provided for function call getImage4ID()");
   }

getImage4Id(...)替換document.getElementById(...)您可能希望在多個 HTML 專案中使用.

 var var4image = getImage4Id("myImage");

函式，因此我們假設將我們要在 Javascript 檔案您可能希望在多個 HTML 專案中使用imagehandlers.js中重用的所有函式都聚合到子目錄“js/”中。處理.

[編輯 | 編輯原始碼]

LearnJavacript/的資料夾，其中包含子目錄img/css/, 中。處理heightjs/.

子目錄css/包含我們在影像處理示例中使用的所有影像，
子目錄中。處理包含我們在影像處理示例中（例如，在多個示例中）使用的 Javascript 程式碼，
子目錄js/包含定義畫布或使用 Javascript 更改的影像佈局的樣式表文件，具體取決於學習任務。

影像和畫布標籤

為了縮短程式碼長度，我們重新命名並縮短了來自維基共享資源的兩個示例影像（關於金門大橋和勃蘭登堡門）的影像名稱。因此，將這兩個示例移到css/資料夾的子目錄的資料夾，其中包含子目錄資料夾中，並將它們分別命名為

ggbridge.jpg（用於金門大橋）和
bbgate.jpg（用於勃蘭登堡門）。

因此，我們修改了上面提到的用於影像定義的程式碼片段，如下所示

 <img id="imgBridge" src="img/ggbridge.jpg" width="320" height="200" >
 <img id="imgGate"   src="img/bbgate.jpg"   width="320" height="213" >
 <canvas id="canvImageAnnotation" width="640" height="213"></canvas>

合併影像的 Javascript 函式

正如您可能從影像尺寸中推斷出的那樣，我們接下來希望在畫布“canvImageAnnotation”上將這兩個影像並排組合在一起，並在金門大橋下方留出 13 畫素高的空白區域。畫布“canvas1”的寬度為 640 畫素，高度被選為兩個源影像高度中的最大值。

  function mergeImage() {
    var canvas1 = document.getElementById("canvImageAnnotation");
    var ctx=canvas1.getContext("2d");
    var image1 = document.getElementById("imgBridge");
    var image2 = document.getElementById("imgGate");
    ctx.drawImage(image1, 0, 0, 320, 200);
    ctx.drawImage(image2, 321, 0, 320, 213);
 };

執行影像合併的按鈕

現在，我們將函式“mergeImage()”分配給按鈕的 onclick 事件。

 <button onclick="mergeImage();return false" >Merge 2 Images </button>

載入/儲存

在下一步中，應該將本地檔案系統中的影像載入到瀏覽器中（而不是在遠端伺服器上 - 請參閱 AppLSAC）。以下步驟將被包含並應用於 HTML 畫布，因為使用者應該能夠使用紅色圓圈等對影像進行註釋，以標記或突出顯示影像上的特定區域

建立一個名為 imagehandler.html 的 HTML 頁面，包含頭部和主體。
在 js 子資料夾中建立一個名為 js/imageloadsave.js 的 Javascript 檔案，其中包含使用的 Javascript 庫。
在 HTML 頁面 imagehandler.html 中新增一個 檔案 按鈕，用於建立檔案對話方塊，讓使用者從本地硬碟選擇並載入影像。
為檔案按鈕分配一個事件處理程式，用於檢查載入的檔案是否為影像。
將畫布大小調整為視窗寬度的 90%，並根據影像的縱橫比計算畫布的高度。
修改影像並在載入的影像上繪製一個紅色圓圈。
將影像儲存為 PNG、JPG、SVG 到下載資料夾（參見 AppLSAC/Save）。