Leinwand drawImage Skalierung

Ich versuche skaliert ein Bild proportional auf die Leinwand. Ich bin in der Lage, zu skalieren, mit fester Breite und Höhe als so:

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

Aber ich will nur auf Größe, die Breite und die Höhe, die Größe proportional. So etwas wie die folgenden:

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

Ich habe überall gesucht ich denken kann und habe nicht gesehen, ob dies möglich ist.

InformationsquelleAutor der Frage selanac82 | 2012-05-31

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

    InformationsquelleAutor der Antwort Gaurav

  2. 3

    Lösung von @TechMaze ist ganz gut.

    hier ist der code nach einiger Richtigkeit und Einführung von Bild.onload-Ereignis. Bild.onload zu viel ist unerlässlich, um die Enthaltung von jeglicher Art von Verzerrung.

    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);
}
}

    InformationsquelleAutor der Antwort Mashhood

  3. 2

    Und wenn Sie wollen, um richtig skalieren Sie das Bild gemäß der Bildschirmgröße, hier ist die Mathematik, die Sie tun können:
    WENN SIE NICHT MIT JQUERY ERSETZEN $(window).Breite mit entsprechenden entsprechende option.

                    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);

    InformationsquelleAutor der Antwort TechMaze

Schreibe einen Kommentar