page change javascript canvas html5-canvas resize drawimage

page - change title javascript



Escalado de lienzo Escala de imagen (3)

Estoy intentando escalar una imagen proporcionalmente al lienzo. Puedo escalarlo con ancho y alto fijo así:

context.drawImage(imageObj, 0, 0, 100, 100)

Pero solo quiero cambiar el tamaño del ancho y tener el tamaño de altura proporcionalmente. Algo como lo siguiente:

context.drawImage(imageObj, 0, 0, 100, auto)

He buscado en todas partes en las que puedo pensar y no he visto si esto es posible.


La solución de @TechMaze es bastante buena.

aquí está el código después de cierta corrección e introducción del evento image.onload. image.onload es demasiado esencial para abstenerse de cualquier tipo de distorsión.

function draw_canvas_image() { var canvas = document.getElementById("image-holder-canvas"); var context = canvas.getContext("2d"); var imageObj = document.getElementById("myImageToDisplayOnCanvas"); imageObj.onload = function() { var imgWidth = imageObj.naturalWidth; var screenWidth = canvas.width; var scaleX = 1; if (imgWidth > screenWidth) scaleX = screenWidth/imgWidth; var imgHeight = imageObj.naturalHeight; var screenHeight = canvas.height; var scaleY = 1; if (imgHeight > screenHeight) scaleY = screenHeight/imgHeight; var scale = scaleY; if(scaleX < scaleY) scale = scaleX; if(scale < 1){ imgHeight = imgHeight*scale; imgWidth = imgWidth*scale; } canvas.height = imgHeight; canvas.width = imgWidth; context.drawImage(imageObj, 0, 0, imageObj.naturalWidth, imageObj.naturalHeight, 0,0, imgWidth, imgHeight); } }


Y si desea escalar correctamente la imagen según el tamaño de pantalla, aquí está la matemática que puede hacer: SI NO ESTÁ USANDO JQUERY, REEMPLAZE $ (ventana) .width con la opción equivalente correspondiente.

var imgWidth = imageObj.naturalWidth; var screenWidth = $(window).width() - 20; var scaleX = 1; if (imageWdith > screenWdith) scaleX = screenWidth/imgWidth; var imgHeight = imageObj.naturalHeight; var screenHeight = $(window).height() - canvas.offsetTop-10; var scaleY = 1; if (imgHeight > screenHeight) scaleY = screenHeight/imgHeight; var scale = scaleY; if(scaleX < scaleY) scale = scaleX; if(scale < 1){ imgHeight = imgHeight*scale; imgWidth = imgWidth*scale; } canvas.height = imgHeight; canvas.width = imgWidth; ctx.drawImage(imageObj, 0, 0, imageObj.naturalWidth, imageObj.naturalHeight, 0,0, imgWidth, imgHeight);


context.drawImage(imageObj, 0, 0, 100, 100 * imageObj.height / imageObj.width)