Signature_pad: .fromDataURL() का उपयोग करके समस्या का आकार बदलना

बीटीडब्ल्यू, इसे विंडो के साथ करना है। डिवाइस पिक्सेल अनुपात किसी कारण से समान नहीं है।

अभी भी जांच कर रहा है, मुझे लगता है कि यह मेरे कोड के साथ एक समस्या हो सकती है :(

क्या आप नवीनतम संस्करण (1.3.4) का उपयोग कर रहे हैं? 1.3.3 को fromDataURL को ठीक करना था जब window.devicePixelRatio से अलग है, लेकिन यह (उम्मीद है) वास्तव में 1.3.4 में तय किया गया था।

मैं नवीनतम संस्करण का उपयोग कर रहा हूं।

जब मैं अनुपात को ठीक से ठीक करता हूं (आपके डेमो की तरह), मेरी उंगली मेल नहीं खाती जहां रेखा दिखाई दे रही है।

मैं सिर्फ एक साधारण डेमो बना रहा हूं, इसलिए यह इतना महत्वपूर्ण नहीं है और बाद में इसके साथ खेलेंगे।

यहाँ एक सरल डेमो है: http://jsfiddle.net/szimek/baL7r8xd। जब आप "बदलें" बटन दबाते हैं, तो यह कैनवास को साफ़ कर देगा और छवि को 1 सेकंड के बाद वापस रख देगा। यह आईफोन पर window.devicePixelRatio 2 के साथ ठीक काम करता है।

अजीब, मेरे एंड्रॉइड पर भी काम करता है।

धन्यवाद, मैं इसे समझ लूंगा :)

इस मुद्दे पर आने वाले किसी भी व्यक्ति के लिए, मुझे पता चला कि मैं क्या गलत कर रहा था।

डेटा डालने से पहले, .fromDataURL(data) का उपयोग करके, यह सुनिश्चित करने के लिए कि आप कैनवास को ठीक से स्केल करते हैं:

      function resizeCanvas(canvas) {
        var ratio =  window.devicePixelRatio || 1;
        canvas.width = canvas.offsetWidth * ratio;
        canvas.height = canvas.offsetHeight * ratio;
        canvas.getContext('2d').scale(ratio, ratio);
      }

      resizeCanvas(canvas);

समान छवि आकार बनाने के लिए आप विकल्प जोड़ सकते हैं
signaturePad.fromDataURL(data, {width: 100, height: 100})
चौड़ाई, ऊंचाई कैनवास के आकार के समान होनी चाहिए
अधिक जानकारी:
https://github.com/szimek/signature_pad/blob/master/src/signature_pad.ts