Estou desenvolvendo um sistema para filtro de imagens com canvas do html5, porém, como estou no início já me surgiram algumas dúvidas e erros. Nesse "início" quero que o tamanho do canvas seja igual ao da imagem escolhida, para assim ela ocupar todo o espaço do canvas.
Segue o que eu já desenvolvi até o momento:
$(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");
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() {
context.drawImage(this, 0, 0);
});
}
});
- Quando eu faço o
imagem.onload...
gostaria que, se os pixels da imagem fossem maiores que 600 e 400 ele desse o alert e parasse por ali, porém, mesmo assim a imagem aparece no canvas. - Na mesma função
imagem.onload...
se os pixels da imagem corresponderem ao exigido o canvas (de id="filtrarImagem") fica do tamanho da imagem, porém a imagem que vai ao canvas fica menor que o normal e não ocupa todo o canvas, sendo que era para ela ocupar todo o canvas e ficar do tamanho original.
Como proceder?