阿裡雲雲計算ACP實驗考試之使用OSS對圖檔進行基本處理

實驗概述

本實驗以圖檔分享網站為原型。該網站擁有大量靜态檔案，作為一個圖檔分享平台，需要根據使用者請求，實時地将使用者的原圖線上轉換成需要的圖檔。本實驗使用ECS作為Web服務端，使用OSS服務作為圖檔存儲，解決了圖檔線上處理的問題。由于使用OSS的圖檔處理功能需要進行域名綁定，事先已将OSS bucket和指定的ECS Web伺服器端進行域名綁定，并進行CNAME配置。配置完成後，即可通過ECS Web服務端域名通路OSS bucket儲存的靜态資料。

實驗目标

完成此實驗後，可以掌握的能力有：

1. 使用OSS Java SDK上傳圖檔到OSS bucket；
2. 使用OSS Java SDK進行圖檔縮放和水印處理；
3. 使用域名通路OSS bucket中的原始圖檔和處理後的圖檔。

第 1 章：實驗背景

1.1 背景知識

本實驗以圖檔分享網站為原型。該網站擁有大量靜态檔案，作為一個圖檔分享平台，需要根據使用者請求，實時地将使用者的原圖線上轉換成需要的圖檔。

本實驗的架構使用ECS作為Web服務端，使用OSS服務作為圖檔存儲，解決了圖檔線上處理的問題。由于使用OSS的圖檔處理功能需要進行域名綁定，事先已将OSS bucket和指定的ECS Web伺服器端進行域名綁定，并進行CNAME配置。配置完成後，即可通過ECS Web服務端域名通路OSS bucket儲存的靜态資料。

使用該架構的 優勢：      

1） 實時線上處理圖檔并傳回，無需下載下傳圖檔

2） 因使用域名綁定，原有未使用阿裡雲系統的服務端代碼可直接複用

3） 流量和存儲費用節省，因OSS和ECS内網互動，OSS的存儲費用低于ECS磁盤費用

使用者 通路過程 如下：      

1）使用者向 ECS Web 服務端發起頁面請求，請求轉發至 CDN 加速域名，讀取OSS bucket傳回原始圖檔；

2）使用者在 ECS 開發伺服器上使用 OSS SDK 進行圖檔處理；

3）使用者向 ECS Web 服務端發起頁面請求，請求轉發至 CDN 加速域名，讀取OSS bucket傳回處理後的圖檔。

實驗開始前 ，已預先完成：      

1） ECS Web 伺服器部署；

2） OSS 服務開通及 bucket 建立；

3） OSS bucket 和 ECS Web 伺服器域名綁定；

4） ECS Web 伺服器域名的 CNAME 配置為 CDN 加速域名

實驗開始後，

1） 系統自動建立一台 Windows 系統的 ECS 執行個體作為開發伺服器

2） 遠端登陸到 ECS 執行個體的 Windows 界面。然後，修改 Eclipse 中檔案，實作使用 OSS Java SDK 上傳本地圖檔到 OSS bucket 中，并進行圖檔縮放和水印處理

3） 通過域名通路原始圖檔和處理後的圖檔。

4） 下載下傳處理後的圖檔

第 2 章：實驗詳情

2.1 實驗資源

在彈出的左側欄中，點選 建立資源 按鈕，開始建立實驗資源。 資源建立過程需要1-3分鐘。完成實驗資源的建立後，使用者可以通過 實驗資源 檢視實驗中所需的資源資訊，例如：阿裡雲賬号等

2.2 上傳原始圖檔至OSS并檢視

1. 本小節實驗内容：登入開發伺服器成功後，将開發伺服器内的本地圖檔上傳至阿裡雲對象存儲OSS。

檢視本地圖檔資訊 2. 首先，使用者遠端登入到的ECS伺服器，點選頁面左側的 實驗資源 ，檢視本實驗提供的 圖檔分享網站－處 ECS伺服器的 彈性IP ， 使用者名 和 密碼 。 3.

然後，在登入的Windows 界面中，依次點選左下角的 開始 和彈出的菜單欄右側的 計算機 ，輕按兩下 本地磁盤C：，輕按兩下并進入 LAB_OSS 的檔案目錄下。檢視目前目錄中有一個圖檔檔案 世界地圖 。說明：遠端登入Windows系統ECS執行個體的詳細步驟，請參考雲中沙箱 幫助文檔

輕按兩下 世界地圖 圖檔檔案，檢視待處理圖檔資訊。打開一張地球儀的圖檔，該圖檔為 1024*1024 像素。後續的實驗步驟中将通過 OSS 圖檔處理對該原始圖檔進行縮放、增加水印等操作。

2.3 網站圖檔縮放處理

1. 本小節主要内容： 将阿裡雲對象存儲 OSS 中的原始網站圖檔 10241024 像素縮略成 500500 像素，并通過域名通路縮放後的網站圖檔。
2. 首先，請通過如下步驟，建立網站圖檔縮放規則。在開發伺服器 Windows 桌面的 code.txt 檔案中 //設定縮放參數 set thumbnail parameters 部分的代碼，拷貝到WaterMark.java 對應位置。該段代碼功能為：對網站圖檔進行縮放并生成進行縮放處理後的網站圖檔的 URI。

//設定縮放參數 set thumbnail parameters
String width="xxx";
String height="xxx";
String thumbnail=width+"w_"+height+"h.jpg";
String uri_thumbnail = uri+"@"+thumbnail;
System.out.println("縮略後的網站圖檔的URI為: "+uri_thumbnail+"，請在本地浏覽器中通路。 ");      

修改以上代碼中 width 參數值的 xxx 為 500 ，即縮略寬度是 500px ；修改 height 參數值的 xxx 為 500 ，即縮略高度為 500px，并儲存。

3. 然後，點選頂層功能欄的 運作（第六個按鈕），開始運作程式。彈出 Console 的程式運作界面中，若顯示如下資訊，則已對原圖進行縮略并生成了縮略後的網站圖檔的 URI。

4. 最後，使用域名通路縮放後的網站圖檔：在本地浏覽器中輸入上一步 縮略後的網站圖檔的URI ，顯示出縮略後圖檔。

2.4 網站圖檔水印處理

1. 本小節主要内容：對阿裡雲對象存儲 OSS 中原始網站圖檔打上文字水印，并通過域名通路打上水印後的網站圖檔。關于水印操作的說明：水印操作可以在圖檔上設定另外一張圖檔或者文字做為水印。水印類型分成圖檔水印，文字水印，和文圖混合水印。水印都可以使用如下參數：

1）t：透明度。如果是圖檔水印，就是讓圖檔變得透明，如果是文字水印，就是讓水印變透明。預設值：100， 表示 100%（不透明）。取值範圍: [0-100]。
2）p：位置。參數意義：位置，水印打在圖上的位置。預設值：9，表示在右下角打水印。取值範圍：[1-9]。
3）x：水準邊距, 就是距離圖檔邊緣的水準距離， 這個參數隻有當水印位置是左上，左中，左下， 右上，右中，右下才有意義。預設值：10，取值範圍：[0 – 4096]，機關：像素（px）。
4）y：垂直邊距, 就是距離圖檔邊緣的垂直距離， 這個參數隻有當水印位置是左上，中， 右上，左下，中下，右下才有意義。預設值：10。取值範圍：[0 – 4096]。機關：像素(px)。
5）voffset：參數意義： 中線垂直偏移，當水印位置在左中，中部，右中時，可以指定水印位置根據中線往上或者往下偏移。預設值：0取值範圍：[-1000, 1000]。機關：像素(px)。
6）Watermark：選擇水印的類型。取值範圍 1, 2, 3，1：圖檔水印 2：文字水印，3：文圖混合水印。      

1. 本實驗在圖檔上打文字水印，就是在原圖的基礎上加上一段文字内容做為水印。以下 必須編碼 是指必須是 url_safe_base64_encode ——URI 安全 base64 編碼。

1）text：表示文字水印的文字，内容(必須編碼)。注意：必須是URL安全base64編碼 encodeText =url_safe_base64_encode(fontText) 最大長度為64個字元(即支援漢字最多20個左右)。
2）type：表示文字水印的文字類型(必須編碼)。
3）color：文字水印文字的顔色(必須編碼)。
4）size：文字水印文字大小(px)。取值範圍：(0，1000)。預設值：40。
5）s：文字水印的陰影透明度，取值範圍：(0,100)。      

1. 首先，通過如下操作步驟，建立網站圖檔水印處理規則。打開檔案 WaterMark.java ，對相關代碼進行檢視和修改：

1）在 第37行 ，修改 place 參數的值為 法國盧浮宮（可自定義一個地點或者景點）。完成修改，點選 儲存 。此步驟是輸入增加水印顯示的内容。預設圖檔增加的水印内容為 世界這麼大，我想去看看：xxxxxx 。法國盧浮宮（修改的内容）取代 xxxxx 部分的内容。

2）請将開發伺服器桌面的 code.txt 檔案中 //設定水印參數 set watermark parameters 部分的代碼，拷貝到 WaterMark.java 對應位置中。該段代碼功能為：設定水印字型、大小、文字、顔色、位置、透明度并生成進行水印處理後的網站圖檔的 URI。

//設定水印參數 set watermark parameters
String watermark = "watermark=2"; // watermark type, 1=pic mark, 2=text mark;
String font_type = "&type=" + BinaryUtil.toBase64String("fangzhengheiti".getBytes());
String size = "&size=" + "30";
String text = "世界那麼大, 我想去看看："+place;
text = "&text=" + BinaryUtil.toBase64String(text.getBytes());
String color = "&color=" + BinaryUtil.toBase64String("#FF0033".getBytes());
String position = "&p=" + "4";
String transparency = "&t=" + "70";
watermark = watermark + font_type + size + text + color + position + transparency;
String uri_watermark = uri +"@"+ watermark;
System.out.println("打水印後圖檔的URI為: "+ uri_watermark+"，請在本地浏覽器中通路。 ");      

4. 然後，點選頂層功能欄的 運作（第六個按鈕），開始運作程式。彈出 Console 的程式運作界面中，若顯示如下資訊，則完成對網站圖檔打水印。

打水印後圖檔的URI為: http://training.jiagouyun.com/世界地圖xxxxxxx.jpg@watermark=2&type=ZmFuZ3poZW5naGVpdGk=&size=30&text=5LiW55WM6YKj5LmI5aSnLCDmiJHmg7PljrvnnIvnnIvvvJrms5Xlm73nvZfmta7lrqs=&color=I0ZGMDAzMw==&p=4&t=70，請在本地浏覽器中通路。      

5. 最後，使用域名通路打水印的網站圖檔。打開本地浏覽器，拷貝并粘貼上一步中 URI 中的内容到 網址輸入欄 回車，讀取 OSS 中存儲處理後的圖檔。即在原有一張地球儀的圖檔上，添加紅色的水印文字 世界這麼大， 我想去看看：法國盧浮宮 。

2.5 網站圖檔多重處理

1. 本部分實驗内容：為了能在一次通路中完成對圖像的縮略和打文字水印兩種處理，使用管道來實作多種處理任務順序執行的機制。目前最多支援四級管道。管道的分隔符是 | 。
2. 首先，通過管道進行圖檔多重處理：請将開發伺服器桌面的 code.txt 檔案中 //設定管道參數 set pipe parameters 部分的代碼（以下灰色字型）拷貝到 WaterMark.java 對應位置中。該部分代碼在一次通路中完成對圖像的縮略和打文字水印兩種處理。

//設定管道參數 set pipe parameters
String pipe=thumbnail+"|"+watermark;
String uri_pipe=uri+"@"+pipe;
System.out.println("通過管道通路縮略和打水印雙重處理後圖檔的URI為: "+ uri_pipe+"，請在本地浏覽器中通路。 ");      

3. 然後，點選頂層功能欄的 運作（第六個按鈕），開始運作程式。彈出 Console 的程式運作界面中，若顯示如下資訊，則通過管道同時進行圖檔縮放和水印處理 世界地圖 圖檔檔案成功，并生成了相應處理後網站圖檔的 URI

通過管道通路縮略和打水印雙重處理後圖檔的URI為: http://training.jiagouyun.com/世界地圖xxxxxxx.jpg@500w_500h.jpg|watermark=2&type=ZmFuZ3poZW5naGVpdGk=&size=30&text=5LiW55WM6YKj5LmI5aSnLCDmiJHmg7PljrvnnIvnnIvvvJrms5Xlm73nvZfmta7lrqs=&color=I0ZGMDAzMw==&p=4&t=70，本地浏覽器中通路。      

4. 最後，使用域名通路通過管道多重處理後的網站圖檔：打開本地浏覽器，拷貝并粘貼上一步中 URI 中的内容到 網址輸入欄 回車，讀取通過管道同時進行縮放和打水印後的圖檔。即在縮放後的 500*500 的地球儀的圖檔上，添加紅色的水印文字 世界這麼大， 我想去看看：法國盧浮宮 。

2.6 下載下傳處理後的圖檔至本地并檢視

1. 本小節主要内容：将上步使用管道對 OSS 的 Bucket 中的原圖進行縮放和打水印雙重處理後的圖檔儲存到本地。圖檔服務的下載下傳可以通過浏覽器等發送 HTTP GET 請求圖檔的URL 即可獲得圖檔。
2. 首先，下載下傳處理後的圖檔至本地。請将開發伺服器桌面的 code.txt 檔案中 //下載下傳圖檔 、 //下載下傳檔案 部分的代碼（以下灰色字型）拷貝到 WaterMark.java 對應位置中。該部分代碼将使用管道對 OSS 的 Bucket 中的原圖進行縮放，和打水印雙重處理後的圖檔，儲存到本地的 C:/LAB_OSS 路徑中，并命名為 旅行.jpg 。

注意：%7C 是管道符 | 的轉義字元。

//下載下傳圖檔
String uri_pipe_download=uri+"@"+thumbnail+"%7C"+ watermark;//“%7C”是管道符“|”的轉義字元
downloadFile(uri_pipe_download);
System.out.println("Finished...");      

以上代碼中 downloadFile() 的具體實作見如下的 //下載下傳檔案 代碼。具體通過以下步驟獲得處理後的圖檔，之後存入本地檔案：

1）建立 HttpGet 對象，将要請求的 URL 通過構造方法傳入 HttpGet 對象。

2）使用 DefaultHttpClient 類的 execute 方法發送 HTTP GET 請求，并傳回 HttpResponse 對象。

3）通過 HttpResponse 接口的 getEntity 方法傳回響應資訊，并以給定的檔案名字 旅遊.jpg 存為本地檔案。

//下載下傳檔案
    private static void downloadFile(String uri)
            throws OSSException, ClientException, ClientProtocolException, IOException {
        //send requests
        DefaultHttpClient httpClient = new DefaultHttpClient();
        HttpResponse response = httpClient.execute(new HttpGet(uri));
        System.out.println("開始從OSS下載下傳檔案...");
        //write to file
        byte[] result = EntityUtils.toByteArray(response.getEntity());
        FileOutputStream fos = new FileOutputStream(new_pic_name);
        fos.write(result);
        fos.flush();
        System.out.println("下載下傳成功");
}      

1. 然後，點選頂層功能欄的 運作（第六個按鈕），開始運作程式。彈出 Console 的程式運作界面中，若顯示如下資訊，則完成下載下傳處理後的圖檔并儲存到本地，其名稱為 旅行.jpg 。
2. 最後，在本地檢視處理後的圖檔資訊。依次點選 Windows 界面左下角的 開始 ，和點選右側欄的 計算機 ，在打開的 計算機 窗體下，輕按兩下 本地磁盤C：，然後，輕按兩下并進入 LAB_OSS 的檔案目錄下。輕按兩下 旅行 圖檔檔案。
3. 在打開的 旅行 圖檔頁面中，可以檢視到一張添加紅色文字水印的地球儀的圖檔。證明已成功下載下傳通過 OSS 處理後的 世界地圖.jpg 圖檔，并已将其儲存到本地 C:\LAB_OSS中，預設命名為 旅行.jpg 。注意其像素已被縮放至 500*500 像素。

第 3 章：課後作業

3.1 如何實作OSS Bucket域名綁定？