एचटीएमएल 5 कैनवास, इसे चित्रित करने के बाद स्केल छवि

Question

मैं एक ऐसी छवि को स्केल करने की कोशिश कर रहा हूं जो पहले ही कैनवास में खींचा जा चुका है।

 var canvas = document.getElementById('splash-container'); 
     var context = canvas.getContext('2d'); 
     var imageObj = new Image(); 

     imageObj.onload = function() { 
     // draw image at its original size 
     context.drawImage(imageObj, 0, 0); 
     }; 
     imageObj.src = 'images/mine.jpeg'; 


     // Now let's scale the image. 
     // something like... 
     imageObj.scale(0.3, 0.3); 

मैं कैसे करना चाहिए: इस कोड है?

Answer 1

आप इसके बारे में सोच रहे हैं। एक बार जब आप छवि को canvas पर खींचा है तो इसका imageObj ऑब्जेक्ट से कोई संबंध नहीं है। imageObj पर आप जो कुछ भी नहीं कर रहे हैं, वह पहले से तैयार किए गए प्रभाव को प्रभावित करेगा। आप छवि को स्केल करना चाहते हैं, drawImage function में कार्य करें:

drawImage(imgObj, 0, 0, imgObj.width * 0.3, imgObj.height * 0.3) 

आप स्केलिंग चेतन करना चाहते हैं या कुछ अन्य प्रभाव है जो आप पूर्ण आकार में छवि आकर्षित करने के लिए की आवश्यकता है शुरू में आप होगा प्राप्त करने के लिए देख रहे हैं स्केल किए गए चित्र को चित्रित करने से पहले पहले clear it पर।

Answer 2

क्या robertc कहते हैं सही है, लेकिन यदि आप वास्तव में किसी कारण से यह ड्राइंग के बाद एक कैनवास पर एक छवि पैमाने पर करने के लिए चाहते थे, तो आप सिर्फ सीएसएस चौड़ाई/ऊंचाई गुणों का उपयोग करके पूरे कैनवास पैमाने सकता है और वह बड़े पैमाने हैं इसे फिर से निकालने के बिना छवि।