javascript - description - Lienzo HTML5: redimensionamiento de imágenes

title html attribute

Question

Estoy tratando de colocar una imagen en un lienzo sin cambiar su tamaño. Pensé que drawImage (img, x, y) haría el truco, pero estira la imagen para llenar el lienzo. El suministro de drawImage (img, x, y, width, height) con las dimensiones de mi imagen no parece funcionar.

Aquí está mi código:

<canvas id="story" style="position:relative; width:800px; height:600px;"></canvas>

<script type="text/javascript">

window.onload = function() {
  var canvas = document.getElementById("story");
  var context = canvas.getContext("2d");
  var img = document.getElementById("img1");
  var width = parseInt(img.width);
  var height = parseInt(img.height);
  context.drawImage(img, 0, 0, width, height);
}

</script>
<img id="img1" alt="" src="http://link to image"/>

¡Gracias por adelantado!

PD: agregué el parseInt para asegurarme de que drawImage obtenga valores válidos.

Answer 1

Intente usar esta biblioteca que creé recientemente, que puede cargar una imagen, cambiarle el tamaño a la anchura y altura fijas o al porcentaje, convertir a otros formatos como base64 o blob, y le permite aplicar una marca de agua.

var CanvaWork = new CanvaWork();

CanvaWork.loadImage("yourimage.png", function(obj){
    console.log(obj.canvas);  // The usable canvas
    console.log(obj.width);
    console.log(obj.height);
    console.log(obj.image); // Contains the image file
});

https://github.com/vnbenny/canvawork.js

¡Espero que esto te ayude!

Answer 2

No uses CSS para dimensionar tu lienzo. Eso crea un lienzo de tamaño predeterminado y lo estira. Establezca las dimensiones del lienzo directamente en él y obtendrá un espacio de dibujo de 1 a 1 píxel.

<canvas id="story" width="800" height="600" style="position:relative;"></canvas>

Answer 3

Primero debe cargar la imagen de la función perfectamente antes de renderizar en la pantalla para hacer eso, siga el código a continuación.

<img id="demo-img" src="image_name.png">

<br>

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3">Your browser does not support the HTML5 canvas tag
</canvas>

<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("demo-img");
    img.onload=function fun(){ctx.drawImage(img,0,0,img.width,img.height,0,0,img.width,img.height)}
 </script> 

Answer 4

También asegúrese de obtener el ancho y alto de la imagen y dibujarla DESPUÉS de que se haya cargado.

img.onload = function () {
  var width = parseInt(img.width);
  var height = parseInt(img.height);
  context.drawImage(img, 0, 0, width, height);
};

Answer 5

Trochoid tiene razón, el atributo de estilo en su etiqueta de lienzo está causando problemas. Puede configurarlo en el HTML, como sugiere, o mejor aún, puede dejarlo en blanco y configurarlo dinámicamente en el JS:

<canvas id="story"></canvas>

<script type="text/javascript">

window.onload = function() {
      var canvas = document.getElementById("story");
      var context = canvas.getContext("2d");
      var img = document.getElementById("img1");
      var width = parseInt(img.width);
      var height = parseInt(img.height);

      canvas.height=height;
      canvas.width=width;
      context.drawImage(img, 0, 0);
}

</script>
<img id="img1" alt="" src="http://link to image"/>