एचटीएमएल कैनवास का आकार बदलना इसकी सामग्री को

Question

मेरे पास एक HTML कैनवास तत्व है जिसका उपयोग आकार बदलता है जब उपयोगकर्ता स्क्रीन का आकार बदलता है।

canvas.height = pageHeight(); 
canvas.width = pageWidth(); 

वास्तविक आकार बदलना ठीक काम करता है, लेकिन यह कैनवास को खाली करता है।

मैं सामग्री रखना चाहता हूं। क्या कैनवास तत्व के आकार को बदलने का कोई और तरीका है, या सामग्री को स्टोर करने का कोई तरीका है और फिर उन्हें कैनवास पर वापस खींचें?

Answer 1

आपको या तो आकार बदलने के बाद कैनवास को कैनवास का आकार बदलना या कैनवास को फिर से बनाना होगा।

आप कैनवास की सामग्री के बचाने के लिए और यह पुनः बनाने चाहते हैं, मैं कुछ ही विकल्प के बारे में सोच सकते हैं:

1. उपयोग context.getImageData पूरे कैनवास हड़पने के लिए, कैनवास का आकार बदलने के लिए, तो context.putImageData का उपयोग यह पुनः बनाने का नए पैमाने पर।
2. Image ऑब्जेक्ट बनाएं, canvas.toDataUrl() के परिणामस्वरूप स्रोत सेट करें, कैनवास का आकार बदलें, फिर छवि को नए पैमाने पर खींचें।
3. context.setScale(xscale, yscale) पर कॉल करें और मूल रूप से कैनवास को आकर्षित करने के लिए उपयोग किए जाने वाले फ़ंक्शन को कॉल करें। मान लें कि आप xscale और yscale सही तरीके से सेट अप करते हैं, यह स्वचालित रूप से सभी आकार को नए आकार में स्केल करेगा।
4. अद्यतन आकार के साथ एक नया कैनवास बनाएं और पुराने कैनवास को नए पर कॉपी करने के लिए context.drawImage(oldCanvas, ...) पर कॉल करें। फिर आप पुराने कैनवास को नए के साथ बदल देंगे।

यदि आप किसी भिन्न डोमेन से किसी भी समय कैनवास में कोई छवि खींच चुके हैं, तो पुराने दो विकल्प काम नहीं करेंगे, और पुराने कार्यान्वयन द्वारा समर्थित नहीं हैं।

मेरी राय में, विकल्प 3 (नए पैमाने पर छवि को दोबारा तैयार करना) यदि संभव हो तो सबसे अच्छा है। यह एकमात्र विकल्प है जो आपकी लाइनों को पूरी तरह से चिकनी और तेज रखेगा, और यह हमेशा काम करेगा (माना जाता है कि आपके पास छवि उत्पन्न करने के लिए अभी भी सारी जानकारी है)।