4

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);
        });
    }
});
  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.

Como proceder?

1 Resposta 1

3
+50

Segue um exemplo funcionando:

$(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);
            });
        
        
    }
});
<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>

Usei como fonte de referencia o site http://www.w3schools.com/tags/canvas_drawimage.asp

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .