Canvas drawBildskalierung

Lesezeit: 2 Minuten

Benutzer-Avatar
Selanac82

Ich versuche, ein Bild proportional zur Leinwand zu skalieren. Ich kann es mit fester Breite und Höhe wie folgt skalieren:

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

Aber ich möchte nur die Breite ändern und die Höhe proportional ändern lassen. Etwas wie das Folgende:

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

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

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

  • Stellen Sie für eine optimale Leistung sicher, dass Ihr Bild mit der richtigen Breite und Höhe gespeichert und vorgeladen ist. Wenn das nicht möglich ist, können Sie auf die anderen Antworten unten zurückgreifen.

    – Gaurav

    14. Juli 2020 um 14:28 Uhr

Benutzer-Avatar
Maschhaube

Die Lösung von @ TechMaze ist ziemlich gut.

Hier ist der Code nach einigen Korrekturen und der Einführung der image.onload Veranstaltung. image.onload ist wichtig, um jede Art von Verzerrung zu vermeiden.

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

Benutzer-Avatar
TechMaze

Und wenn Sie das Bild entsprechend der Bildschirmgröße richtig skalieren möchten, können Sie hier den Code verwenden:

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

Wenn Sie jQuery nicht verwenden, ersetzen Sie $(window).width mit der entsprechenden gleichwertigen Option.

1043240cookie-checkCanvas drawBildskalierung

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy