Question

Hola, soy nuevo en esto del canvas, mi problema es que cuando convierto la imagen a base64 la imagen adquiere el tamaño del canvas y yo quiero que coja el tamaño de maxima resoucion de la image. Como pyedo hacerlo?

  <input type="file" id="file-input"/>
<canvas id="canvas"></canvas>
<img src=""/>
<button onclick="convert()">Convert</button>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript">
$('#file-input').change(function(e) {
        var file = e.target.files[0],
            imageType = /image.*/;

        if (!file.type.match(imageType))
            return;

        var reader = new FileReader();
        reader.onload = fileOnload;
        reader.readAsDataURL(file);

     });
    var MAX_HEIGHT = 100;
    function fileOnload(e) {
        var $img = $('<img>', { src: e.target.result });
        var canvas = $('#canvas')[0];
        $('#file-input').val('');
        $img.load(function() {
            if(this.height > MAX_HEIGHT) {
             this.width *= MAX_HEIGHT / this.height;
             this.height = MAX_HEIGHT;
            }
            var context = canvas.getContext('2d');
            context.clearRect(0, 0, canvas.width, canvas.height);
            canvas.width = this.width;
            canvas.height = this.height;
            context.drawImage(this, 0, 0, this.width, this.height);
        });
    }
function convert(){
    var url = canvas.toDataURL("image/png", 1.0);
    $('img').attr('src', url);
}
</script>

Answer 1

Hola, cambia :

        var context = canvas.getContext('2d');
        context.clearRect(0, 0, canvas.width, canvas.height);
        canvas.width = this.width;
        canvas.height = this.height;

Por :

        canvas.width = this.width;
        canvas.height = this.height;
        var context = canvas.getContext('2d');
        context.clearRect(0, 0, canvas.width, canvas.height);

El problema es que primero debes redimensionar el canvas antes de todo, te recomiendo crear un canvas si agregarlo al DOM dentro del load de la imagen para mejorar rendimiento, saludos.

Answer 2

Hola Jaumesv,

no he tenido mucho tiempo de ponerme con tu problema... pero por experiencia, es muchísimo más simple hacer lo que estás queriendo usando un IMG en vez de un CANVAS.

Al IMG se le puede pasar el SRC como base64: y luego la imagen codificada:

http://stackoverflow.com/questions/1887519/how-to-preview-an-image-before-upload-in-various-browsers
(la primer respuesta)

Luego, aplicás estilos vía CSS o directamente sobre el IMG para redimensionar la imagen como quieras.

Estoy suponiendo que lo que querés hacer es una preview antes de subir el archivo...

Saludos!