entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

2votos

Problema al convertir canvas a base64

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>

2 Respuestas

1voto

mrczrt Puntos6940

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.

0voto

Jaumesv comentado

Hola @mrczrt, he hecho lo que me has dicho y me sigue apariciendo la imagen en pequeño, yo lo que quiero es que cuando seleccione una imagen, de por ejemplo 320x410, se redimensione al canvas pero que al convertir a base64 vuelva a su tamaño original

1voto

Leonardo-Tadei Puntos227320

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!

0voto

Jaumesv comentado

Si, lo que quiero es hacer una vista prèvia de la imagen antes de enviar, pero tambien que ria poder agregar capas a la imagen, texto,etc.. Por eso necesito que sea canvas

0voto

Leonardo-Tadei comentado

y poner un CANVAS por encima del IMG para hacer todas esas cosas???

0voto

Jaumesv comentado

Si pongo un canvas encima es peor por que luego debo fusionar el canvas y la imagen, y encima tengo el mismo problema del tamaño

0voto

Leonardo-Tadei comentado

No sabía que la imagen al final se fusionaba con todo lo editado :-(

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta