Tengo una imagen que es de 1836 x 3264 quiero drawImage() a la lona y cambiar el tamaño a 739 x 1162.

Después de la lectura de la documentación pensé que esto podría lograrse con la siguiente:

ctx.drawImage(image, 0, 0, 739, 1162);

También he probado:

ctx.drawImage(image, 0, 0, 1836, 3264, 0, 0, 739, 1162);

Ambos muestran que sólo una pequeña parte de la imagen completa en lugar de reducir la velocidad.

¿Cómo puedo pasar a través de los valores para cambiar el tamaño de 1836 x 3264 -> 739 x 1162 ?

1 Comentario

  1. 29

    Lo que tienes es correcto, así que usted puede comprobar un error en alguna parte.

    [pensamiento adicional: Es la imagen realmente 1836×3264 y no 3264×1836.]

    Aquí es el código de trabajo y un Violín: http://jsfiddle.net/m1erickson/MLGr4/

    <!doctype html>
    <html>
    <head>
    <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    
    <style>
        body{ background-color: ivory; }
        canvas{border:1px solid red;}
    </style>
    
    <script>
    $(function(){
    
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");
    
        img=new Image();
        img.onload=function(){
            canvas.width=400;
            canvas.height=300;
            ctx.drawImage(img,0,0,img.width,img.height,0,0,400,300);
        }
        img.src="http://www.onestopwebmasters.com/wp-content/uploads/2011/06/eitai-bridge.jpg";
    
    }); //end $(function(){});
    </script>
    
    </head>
    
    <body>
        <canvas id="canvas" width=100 height=100></canvas>
    </body>
    </html>
    • Gracias código era correcto. Era solo una falla en la forma en que el sistema de telefonía móvil fue el manejo de la lona.
    • Nos puedes decir lo que este teléfono móvil fallo fue y cómo se ha solucionado, por favor?
    • Esta respuesta me ayudó a darme cuenta me estaba preparando canvas.style.width y height en lugar de canvas.width. Cambio que ayudó a la ctx.drawImage escala de procesamiento como se esperaba, en lugar de que el estiramiento que estaba haciendo antes de que el lienzo en sí tenía los atributos de dimensión.
    • Tu comentario salvó un montón de tiempo para mí hoy!. Muchas gracias.

Dejar respuesta

Please enter your comment!
Please enter your name here