Canvas與Image互相轉換

JS Canvas與Image互相轉換
原文地址: JavaScript Canvas Image Conversion
原文演示: JavaScript Canvas Image Conversion Demo

原文日期：2012年05月08日

翻譯日期：2013年08月09日

在上週的Mozilla Web開發 會議,最後咱們花了大半天的時間討論將來的Mozilla市場應用。Instagram是近期最火爆的移動應用,以10億美圓的天價賣給了FaceBook。
我不介意賺取一些外快,因此我決定建立一個Instagram樣式的應用(之後將會分享出來)
本文向您展現怎樣轉換Image爲canvas，以及canvas如何提取出一個Image。

轉換 Image爲 Canvas
要把圖片轉換爲Canvas(畫板，畫布),能夠使用canvas元素 context 的drawImage方法：

// 把image 轉換爲 canvas對象  
function convertImageToCanvas(image) {  
    // 建立canvas DOM元素，並設置其寬高和圖片同樣   
    var canvas = document.createElement("canvas");  
    canvas.width = image.width;  
    canvas.height = image.height;  
    // 座標(0,0) 表示今後處開始繪製，至關於偏移。  
    canvas.getContext("2d").drawImage(image, 0, 0);  
  
    return canvas;  
}

轉換  Canvas 爲 Image
假設圖像已經在canvas上處理好，那麼能夠使用如下方法，把canvas轉變爲圖片Image對象。

// 從 canvas 提取圖片 image  
function convertCanvasToImage(canvas) {  
    //新Image對象，能夠理解爲DOM  
    var image = new Image();  
    // canvas.toDataURL 返回的是一串Base64編碼的URL，固然,瀏覽器本身確定支持  
    // 指定格式 PNG  
    image.src = canvas.toDataURL("image/png");  
    return image;  
}

額!圖像image和canvas的互相轉換比你想象的還要容易,之後我將向你演示不一樣的圖像處理技術，相信在將來你確定能用這些技術賺到大錢。