Signature_pad: خطأ في fromDataURL للأجهزة ذات شاشة DPI العالية

تم إنشاؤها على ١٠ مارس ٢٠١٦  ·  3تعليقات  ·  مصدر: szimek/signature_pad

وصف

لقد اكتشفت أن الطريقة fromDataURL تتصرف بشكل غريب على الأجهزة التي لا تحتوي على نسبة بكسل 1 ، على سبيل المثال على الأجهزة المحمولة ذات النقاط العالية في البوصة.
إنني على دراية بالفقرة في README حيث تتم مناقشة التعامل مع شاشات DPI العالية.
ومع ذلك ، ما زلت قادرًا على إعادة إظهار مشكلة باستخدام fromDataURL في الحالات التي تكون فيها اللوحة بحجم ثابت. أعتقد أن هذا التحجيم للصورة هو سبب هذه المشكلة.
يمكنك إعادة إظهار هذه المشكلة باستخدام

خطوات التكاثر

  1. افتح JSFiddled المرتبط في الوصف أعلاه على جهاز لا يحتوي على نسبة بكسل 1 واكتب شيئًا على لوحة التوقيع.
  2. انقر فوق حفظ.
    1_after_save
  3. انقر على تعديل.
  4. اكتب المزيد على اللوحة.
    2_before_cancel
  5. انقر فوق إلغاء

    النتيجة المتوقعة

يجب أن تبدو لوحة التوقيع تمامًا كما كانت بعد الخطوة 2.

النتيجة الفعلية

تم إرجاع التغييرات التي تم إجراؤها على لوحة التوقيع ، ولكن تم تغيير حجم الصورة بحيث تبدو مختلفة عما كانت موجودة على اللوحة بعد الخطوة 2.
3_after_cancel

التعليق الأكثر فائدة

مرحبا،

أنا أيضا عثرت على هذه المسألة. هذا سلوك غير متوقع. أعتقد أنه يجب أن يكون لدينا خيار ما إذا كنا نريد مثل هذه التعديلات (لذا يجب أن تكون الحجة الثانية الافتراضية للسلوك السابق جيدة). في الأساس لأن شيئًا كهذا لا يتم تلقائيًا في أي مكان آخر.

شكرًا جزيلاً siggifv على

ملء اللوحة القماشية يدويًا هو السبيل في الوقت الحالي:

var image = new Image();
signaturePad.clear();
image.src = dataURL;
image.onload = function () {
    signatureCanvas = document.querySelector("#signature-pad");
    signatureCanvas.getContext("2d").drawImage(image, 0, 0, width, height);
};
this.signaturePad._isEmpty = false;

ال 3 كومينتر

مرحبا،

أنا أيضا عثرت على هذه المسألة. هذا سلوك غير متوقع. أعتقد أنه يجب أن يكون لدينا خيار ما إذا كنا نريد مثل هذه التعديلات (لذا يجب أن تكون الحجة الثانية الافتراضية للسلوك السابق جيدة). في الأساس لأن شيئًا كهذا لا يتم تلقائيًا في أي مكان آخر.

شكرًا جزيلاً siggifv على

ملء اللوحة القماشية يدويًا هو السبيل في الوقت الحالي:

var image = new Image();
signaturePad.clear();
image.src = dataURL;
image.onload = function () {
    signatureCanvas = document.querySelector("#signature-pad");
    signatureCanvas.getContext("2d").drawImage(image, 0, 0, width, height);
};
this.signaturePad._isEmpty = false;

مرحبا دوراسج ،
شكرا جزيلا ... لقد كنت تكافح واستخدمت الحل الخاص بك في توجيهي الزاوي.

مرحبا @ durasj شكرا جزيلا ، يعمل على أكمل وجه

المثال الخاص بي مع الموصل writeValue

  writeValue(value: string): void {
    if (!value) {
      this.signaturePad.clear();
      return;
    }
   this.value = value;
   this._drawValueToCanvas();
   this.cdr.markForCheck();
  }

  /** Draw from image according to retina or some devices  */
  _drawValueToCanvas() {
    if (this.canvas != null) {
      const image = new Image();
      this.signaturePad.clear();
      image.src = this.value;
      image.onload = () =>
        this.canvas
          .getContext('2d')
          .drawImage(image, 0, 0, 300, 120);
      this.signaturePad._isEmpty = false;
    }
  }
هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات

القضايا ذات الصلة

crazzeto picture crazzeto  ·  8تعليقات

davidosuna1987 picture davidosuna1987  ·  11تعليقات

khawye picture khawye  ·  4تعليقات

lowe493 picture lowe493  ·  5تعليقات

Emmark picture Emmark  ·  4تعليقات