Smaller image than original uploaded on canvas when drawing drawImage ()

Question

Smaller image than original uploaded on canvas when drawing drawImage ()

Navigation

#1 by (3 votes)

4

I'm developing a system for filtering images with html5 canvas, however, as I'm at the beginning I've had some doubts and errors. In this "beginning" I want the size of the canvas to be the same as the one of the chosen image, so that it occupies all the space of the canvas.

Here's what I've developed so far:

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

When I do imagem.onload... I would like that if the pixels in the image were greater than 600 and 400 it gave the alert and stopped there, however, even then the image appears on the canvas.

In the same function imagem.onload... if the pixels of the image match the required canvas (from id="filterImage") is the size of the image, but the image that goes to the canvas is smaller than normal and does not occupy all the canvas, being that it was for her to occupy all the canvas and to be of the original size.

How to proceed?

javascript jquery html5 canvas

asked by anonymous 07.05.2015 / 21:06

1 answer

Ajax Synchronous XMLHttpRequest Hide a column from a WebGrid

score 3 · Accepted Answer

Here is an example working:

$(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><inputtype="file" id="uploadImagem"/>
<canvas id="filtrarImagem" style="width: 600px; height: 400px; border: solid 1px #000"></canvas>

I used the site link