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