利用  <canvas>  描繪圖片檔案-切割圖片內容

Canvas 物件不僅可以針對整張圖片進行描繪,也可以進一步切割圖片,指定描繪圖片中的部份範圍區塊,考慮以下這張圖片,假設我們想要描繪其中紅色框線的內容,在網頁上呈現以下圖片中紅色框線的區域內容:


以下輸出描繪結果:


為了達到上述的目的,必須調用另外一個版本的 drawImage() 方法,採用以下的原理:


這個方法以矩形表示所要描繪的範圍區域,左上角座標位置(x,y)為所要描繪的矩形起點, w 則是矩形的寬度, h 為矩形高度,因此調用 drawImage() 方法時必須指定以下的參數內容:

context.drawImage(img,
x, y, w, h,
dx,dy,dw,dh);

其中的 x,y,w 與 h 四個參數對應上述的矩形框說明,後四個參數中, dx 與 dy 則是位置座標,表示擷取的圖片內容要描繪輸出的位置,而 dw 與 dh 則是最後圖片描繪出來的大小。

現在來看一個實際的範例,這個範例將一張預先準備好的圖片 d002.jpg 載入,然後將其中的部份內容描繪出來。配置描繪圖片需要的  <canvas>  標籤,識別id 為 pcanvas ,建立以下描繪圖片所需的程式碼:

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

內容與這一篇討論的範例幾乎相同,只是這裏調用的是本節所討論的 drawImage() 版本,讀者請自行比對前述說明的參數,結果畫面就像這個樣子:


如果調用的是最基礎的版本,例如:

context.drawImage(this, 10, 10);

則會出現完整的圖片。



沒有留言: