利用  <canvas>  描繪圖片檔案

Canvas 支援圖片檔案的描繪,允許你指定一張圖片檔案,然後將其在  <canvas> 標籤中描繪出來。描繪圖片所需的方法為 drawImage() ,這個方法有不同的版本,以下是最簡單的版本:

drawImage(img,x,y)

img是一個 Image 物件, x 與 y 則是圖片所要描繪的左上角起始座標位置,假設要描繪的圖片在網站的相對位置路徑如下:

images/xxx.jpg

動態建立一個 Image 物件,將這個路徑指定給 src 屬性,程式碼如下:

var imgx = new Image();
imgx.src = 'images/xxx.jpg';

當這兩行程式執行完成,會觸發 Image 物件的 load 事件,表示圖片已經載入完成,接下來可以建立一個函式以回應載入事件,將物件指定給 drawImage() 方法,表示要將此圖片於 (x,y) 這個座標位置描繪出來,如下式:

imgx.onload = function () {   
    context.drawImage(this, x, y);
};

一旦 load 事件觸發,其中的事件監聽器的內容程式碼就會被執行,將圖片描繪於  <canvas> 標籤形成的區塊中。

來看以下的實例:


網頁上的虛線框表示配置用來示範圖片描繪的  <canvas>  標籤,其中調用 drawImage() 將圖片描繪在框線區域內。以下來看看實作的過程,配置一個  <canvas>  標籤,將其識別 id 屬性設定為 pcanvas :

<canvas id="pcanvas"
width="600" height="380"
style="border:1px dotted gray;"></canvas>

接下來於網頁載入之後,執行以下的程式碼:

<script>
    window.onload = function () {
        var imgx = new Image();
        imgx.onload = function () {
            var context = document.getElementById('pcanvas').getContext('2d');
            context.drawImage(this, 20, 20);
        };
        imgx.src = 'images/d001.jpg';
    };
</script>

其中建立一個 Image 物件,然後設定其 load 事件的回應函式,其中調用 drawImage() 方法完成圖片檔案的描繪。最後設定 imgx 的 src 屬性,以完成圖片的載入。

好了,你知道如何透過 canvas 將圖片描繪在網頁,乍看之下似與直接配置 <image> 標籤沒有差別,對於這個解說 drawImage() 方法的範例而言是的,不過 canvas 物件不是只能單純的將圖片檔案描繪出來而已,它還可以讓你切割圖片,例如這篇示範的,它甚至可以輕易的取出其中的圖片像素資訊,藉由操作這些資訊,我們可以進一步建立圖片處理功能。


沒有留言: