कैनवास ड्राइमेज स्केलिंग

Question

मैं कैनवास के अनुपात में एक छवि को स्केल करने की कोशिश कर रहा हूं। मैं इतनी के रूप में निश्चित चौड़ाई और ऊंचाई के साथ पैमाने पर करने में सक्षम हूँ:

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

लेकिन मैं केवल उसी अनुपात में आकार बदलने चौड़ाई आकार बदलने के लिए चाहते हैं और ऊंचाई कम है। निम्न की तरह कुछ:

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

मैंने हर जगह देखा है और यह संभव नहीं है अगर मैंने देखा है।

Answer 1

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

Answer 2

और अगर आप ठीक ढंग से स्क्रीन आकार के अनुसार चित्र पैमाने पर करने के लिए चाहते हैं, यहाँ गणित आप क्या कर सकते हैं: आप jQuery का उपयोग नहीं कर रहे हैं, $ (विंडो) .width उचित बराबर विकल्प के साथ बदलें।

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

Answer 3

@TechMaze का समाधान काफी अच्छा है।

यहां कुछ शुद्धता और image.onload ईवेंट की शुरूआत के बाद कोड है। image.onload किसी भी तरह के विरूपण से दूर रहने के लिए बहुत आवश्यक है।

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