Segue um exemplo funcionando: <!-- begin snippet: js hide: false --> <!-- language: lang-js --> $(document).ready(function() { $("#uploadImagem").change(function(e) { var _URL = window.URL || window.webkitURL, arquivo = e.target.files[0], tipoImagem = /image.*/, reader, imagem; if(!arquivo.type.match(tipoImagem)) { alert("Somente imagens são aceitas!"); return; } imagem = new Image(); imagem.onload = function() { if(this.width > 600 || this.height > 400) { alert("Somente imagens com largura máxima de 600px e altura máxima de 400px"); // antes desse return pode ser feito o enquadramento do 600x400 // no caso do usuario selecionar uma imagem pequena e depois mudar p/ uma grande //$("#filtrarImagem").width(600).height(400); return; } else { $("#filtrarImagem").width(this.width).height(this.height); } }; imagem.src = _URL.createObjectURL(arquivo); reader = new FileReader(); reader.onload = fileOnload; reader.readAsDataURL(arquivo); }); function fileOnload(e) { var $img = $("<img>", {src: e.target.result}), canvas = $("#filtrarImagem")[0], context = canvas.getContext("2d"); $img.load(function() { //img = this; //setTimeout(function(){ context.drawImage(this, 0, 0,300,150); //},1000); }); } }); <!-- language: lang-html --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="file" id="uploadImagem"/> <canvas id="filtrarImagem" style="width: 600px; height: 400px; border: solid 1px #000"></canvas> <!-- end snippet --> Usei como fonte de referencia o site [http://www.w3schools.com/tags/canvas_drawimage.asp][1] [1]: http://www.w3schools.com/tags/canvas_drawimage.asp