javascript – Image smaller than the original uploaded to canvas when doing drawImage()

Question:

I'm developing a system to filter images with html5 canvas, however, as I'm at the beginning, some doubts and errors have arisen. In this "beginning" I want the canvas size to be the same as the chosen image, so that it takes up all the canvas space.

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);
        });
    }
});
  1. When I do the imagem.onload... would like that, if the image's pixels were greater than 600 and 400, it would give the alert and stop there, however, the image still appears on the canvas.
  2. In the same function imagem.onload... if the image's pixels correspond to the required, the 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 the entire canvas, since it was supposed to fill the entire canvas and stay the original size.

How to proceed?

Answer:

Here is a working example:

 $(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>

I used the site http://www.w3schools.com/tags/canvas_drawimage.asp as a reference source

Post Views: 3
Scroll to Top