html5 繪製圖片 drawImage

要在繪圖上下文中繪製圖片，可使用 drawImage 方法。該方法有三種不一樣
的參數:
 drawImage(image,dx,dy)
 drawImage(image,dx,dy,dw,dh)
 drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
其中的 image 參數能夠是 HTMLImageElement、HTMLCanvasElement 和
HTMLVideoElement 中的任一個對象。
繪製參數的含義能夠參看下圖：

異常：若是第一個參數不是指定的元素類型，拋出一個 TYPE_MISMATCH_ERR
異常，若是圖片不能進行解碼，則拋出 INVALID_STATE_ERR 異常，若是第二個參
數不是容許的值，則拋出 SYNTAX_ERR 異常。
參數默認值：若是沒有指定 dw 和 dh，則默認等於 sw 和 sh，若是 sx,sy,sw,sh
均沒有提供，則默認爲 sx,xy=0,0；sw 和 sh 爲圖片的像素寬高。
下面給出圖片的幾種調用方式：
1．引用頁面內圖片：
咱們能夠經過document.images集合、document.getElementsByTagName 方法又或者 document.getElementById
方法來獲取頁面內的圖片（若是已知圖片元素的 ID。
第 26 頁 共 30 頁
W3C Canvas 2D API 規範 1.0 by codeEx.cn
2.引用 canvas 元素
和引用頁面內的圖片相似地，用 document.getElementsByTagName 或
document.getElementById 方法來獲取其它 canvas 元素。但你引入的應該
是已經準備好的 canvas。一個經常使用的應用就是爲另外一個大的 canvas 作縮
略圖。

var c = document.getElementById("myCanvas");
var cxt = c.getContext("2d");
var img = document.getElementById("imgCanvas"); //img元素
img.onload = function () {
cxt.drawImage(img, 100, 200);
};

3．建立圖像
咱們能夠用腳本建立一個新的 Image 對象，但這種方法的主要缺點是如
果不但願腳本由於等待圖片裝置而暫停，還得須要突破預裝載。
var img = new Image(); // Create new Image
img.src = 'myImage.png'; // Set source path
當腳本執行後，圖片開始裝載。若調用 drawImage 時，圖片沒裝載完，
腳本會等待直至裝載完畢。若是不但願這樣，可使用 onload 事件：
var img = new Image(); // Create new Image
img.onload = function(){
// 執行 drawImage 語句
}
img.src = 'myImage.png'; // Set source path
若是你只用到一張圖片的話，這已經夠了。但一旦須要不止一張圖片，
那就須要更加複雜的處理方法，但圖片預裝載策略超出本規範的範圍。
4．經過 data: url 方式嵌入圖像
咱們還能夠經過 data: url 方式來引用圖像。Data urls 容許用一串
Base64 編碼的字符串的方式來定義一個圖片。其優勢就是圖片內容即時可
用，無須再到服務器兜一圈。（還有一個優勢是，能夠將 CSS，JavaScript，
HTML 和 圖片所有封裝在一塊兒，遷移起來十分方便。）缺點就是圖像無法緩
存，圖片大的話內嵌的 url 數據會至關的長，例如：
var img_src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAyCAYAAA
DLLVz8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAALESURBVGhD7ZUxSFVhFMfvezi8wcFBS
MjhRYNBQUEOQQ4ODYFBQmOLUVtCDQ1By4OGBoeKgkYTh4gGl6CCIByaLDIqKAo0KhIUEmoUX7//49zH
h/Tgil4x+F/4c8533nfPPd/Pcz6zzI8JmIAJmIAJmIAJmIAJmIAJmIAJmIAJmIAJmIAJmIAJmIAJmIA
JmEC5BCrlps+yZtas842FSlbp+K31bH0yraOaVc+VXdd25a9uV6Kt5AHuGO9/wM5KW8m10+9uqgPppl
6kw+7loFNonvUwOoP/g/hd7B8dQvvQYdyXxB7lHUjsBBph/Rbdj71N7D7Wi7HuxY6jW8RW6dDL+M/pz
Pc5IHJ0Ry37iT1kXw3bozh2AE2x/0vZQAt3IIWpuDkKOo4+4a9xsJPYB6xnBQvdUcHEx/EncAX1YnJo
wb4X718KAK2f8bVuKAaMFexBdA2N8vN5Yh+TPLWoZUS5Iq7c0/hH0SB6Uja8TeUXFPQ5fYn1DBKo1l2
H/xtbw77BXo34EL46TGAn0LQg6d5Dgq93m/g3c4Cxt5/YMlpAx9LvxvvL2K4EaoN97yJfn3IidXKpT+
EOpIo9qN0FUZUKVJfpWaJLND4HkMYrH5/vyQkO4evQdfZ+Rc/y3/Bvo0Y+1oyf3tPIdqfdF/v7sIvE1
zbQWdGa+FLEVU+pT2GAFPWaSnR/1ZOK5vFPq+vQKbQakJ9iz6pDFE/2C1hXgGrD+tcJk/F+jH9De7BH
6DL9EV6RYxBfo/r/PDFmGjeN1QWNCHYOfUO/UAtWHPRnxCbzEd6wX2M+Fvs1bqmGYnwFSaOsq2E4rgz
dc7oOrsfo69tXNP7YFznNyJf+sXcH6Ljj+tNqOt01xHs6dJf+m7fvr6Ini05P7z11/u6DVPRA3mcCJm
ACJmACJmACJmACJmACJmACJmACJmACJmACJmACJrBTBP4C/mNz5egh3WQAAAAASUVORK5CYII='; 
有興趣的朋友可使用<img src=’上述變量值’>的方法顯示出上面的
圖片