Skip to main content
Aviso removido Chamar atenção por Igor
Fim da Recompensa com SneepS NinjA's answer escolhido por Igor
Tweeted twitter.com/#!/StackOverflowPT/status/597525829904642048
adicionou 34 caracteres ao conteúdo; título editado
Fonte Link
Igor
  • 1,2mil
  • 1
  • 15
  • 33

Imagem distorcidamenor que a original upada em canvas ao fazer drawImage()

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.

  1. 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.
  2. 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 distorcidamenor que o normal e não ocupa todo o canvas, sendo que era para ela ocupar todo o canvas e ficar do tamanho original.

Imagem distorcida em canvas ao fazer drawImage()

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.

  1. 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.
  2. 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 distorcida, sendo que era para ela ocupar todo o canvas e ficar do tamanho original.

Imagem menor que a original upada em canvas ao fazer drawImage()

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.

  1. 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.
  2. 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.
Aviso adicionado Chamar atenção por Igor
Recompensa Oferecida vale 50 pontos de reputação por Igor
removeu 17 caracteres do conteúdo
Fonte Link
Igor
  • 1,2mil
  • 1
  • 15
  • 33

Obrigado!

Obrigado!

Fonte Link
Igor
  • 1,2mil
  • 1
  • 15
  • 33

Imagem distorcida em canvas ao fazer drawImage()

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.

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);
        });
    }
});
  1. 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.
  2. 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 distorcida, sendo que era para ela ocupar todo o canvas e ficar do tamanho original.

Como proceder?

Obrigado!