Upload image into HTML5 canvas

External

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

---

HTML

<input id="upload" accept="image/*" type="file" />
<canvas id="canvas">

Note

1. input選擇type="file"，並使用accept屬性來驗證檔案格式。
2. canvas預覽用

---

Javascript

$('#upload').change(function () {

    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext('2d');
    
    var img = new Image();
    
    img.onload = function () {
        canvas.width = this.width
        canvas.height = this.height
        ctx.drawImage(this, 0, 0, canvas.width, canvas.height)
        URL.revokeObjectURL(src)
    }
    
    var file = this.files[0];
    var src = URL.createObjectURL(file);
    
    img.src = src;

});

Note

1. jQuery的change方法對input做類似監聽的效果，監聽是否資料被存取
2. 建立一個img，其onload裡設定canvas的長寬，並用drawImage將圖片畫到canvas上，用revokeObjectURL()釋放記憶體
   • createObjectURL()都會產生一個新的URL。
     為了最佳化效能與記憶體用量，不再需要時便用revokeObjectURL()釋放
3. HTML5 Web API 的 createObjectURL()對input上的檔案建立一個Blob物件，並設為img的src來源
   • 不使用readAsDataURL()，因為曾在iOS拍照上踩過雷
     （無法toDataURL()，會變白圖片）
   • 好處請看：黑暗執行緒

---

Example

JSFiddle