कैनवास में एक छवि का आनुपातिक रूप से आकार कैसे बदलें?

Question

AFAIK, आकार बदलने के लिए एचटीएमएल 5 कैनवास में एक लोड छवि इस तरह से किया जाना होगा:

var img = new Image(); 
img.onload = function() { 
    ctx.drawImage(img, 0, 0, 300, 200); // resizes image to 300px wide, 200px high 
} 
img.src = 'images/myimage.jpg'; 

लेकिन तब मुझे एहसास हुआ कि छवि आनुपातिक सही नहीं होगा। तो फिर मैंने केवल एक पैरामीटर का उपयोग करने की कोशिश की (जैसे एचटीएमएल में) लेकिन मैंने पाया कि यह भी काम नहीं करता है।

मैं छवि का आनुपातिक रूप से आकार कैसे बदलूं?

Answer 1

img.width और img.height प्राप्त करें, फिर आप जिस चौड़ाई का आकार बदल रहे हैं उसके अनुसार आनुपातिक ऊंचाई की गणना करें।

For example:

ctx.drawImage(img, 300, 0, 300, img.height * (300/img.width)); 

Answer 2

मैं पिछले पिछले साल इस विषय पर एक ब्लॉग लेख लिखा था। आप इसे here पढ़ सकते हैं। असल में यह एक उचित पहलू अनुपात के साथ एक छवि स्केलिंग के लिए एक समारोह प्रदान करता है। इसमें दोनों परिदृश्य और चित्र उन्मुखता और दोनों के बीच आकार का समर्थन शामिल है। आप "लेटरबॉक्स" और "पैन और स्कैन (ज़ूम)" मोड के बीच भी चयन कर सकते हैं।

यह दिमाग की स्थिति में दिमाग की स्थिति के साथ लिखा गया था, लेकिन आसानी से कैनवास के लिए समझा जा सकता है।

पृष्ठ के निचले भाग के पास "स्केल इमेज" फ़ंक्शन है। वह हो सकता है जो आप चाहते हैं। इस प्रकार तो फिर तुम इसे लागू कर सकते हैं:

var img = new Image(); 
img.onload = function() { 

    var result = ScaleImage(img.width, img.height, 300, 200, true); 

    ctx.drawImage(img, result.targetleft, result.targettop, result.width, result.height); // resizes image to a target size of 300x200 using letterbox mode 
} 
img.src = 'images/myimage.jpg'; 

आप result.targetleft की जगह और "0" के साथ result.targettop सकते हैं यदि आप छवि केंद्रित नहीं करना चाहती।