Signature_pad: Menggunakan masalah ukuran .fromDataURL()

Dibuat pada 26 Nov 2014 · 8Komentar · Sumber: szimek/signature_pad

Hai Ketika saya menggunakan .fromDataURL() untuk memuat tanda tangan yang dibuat di kanvas berukuran sama menggunakan perpustakaan yang luar biasa ini, dosis gambar tidak berukuran dengan benar dan berukuran 1/4 dari ukuran.

Saya tidak yakin apakah ini perpustakaan atau bukan, tetapi saya mengubah ukuran kanvas sebelum menandatangani dan sebelum memuat tanda tangan di memori.

Apakah ini masalah dalam logika saya atau adakah yang pernah melihat ini sebelumnya?

Sumber

MarcGodard

Komentar yang paling membantu

Untuk membuat ukuran gambar yang sama, Anda dapat menambahkan opsi
signaturePad.fromDataURL(data, {width: 100, height: 100})
lebar, tinggi harus sama dengan ukuran kanvas
Keterangan lebih lanjut:
https://github.com/szimek/signature_pad/blob/master/src/signature_pad.ts

demo-igor pada 26 Mar 2018

👍3

Semua 8 komentar

Btw, itu ada hubungannya dengan window.devicePixelRatio yang tidak sama karena beberapa alasan.

Masih menyelidiki, saya pikir ini mungkin masalah dengan kode saya :(

MarcGodard pada 26 Nov 2014

Apakah Anda menggunakan versi terbaru (1.3.4)? 1.3.3 seharusnya memperbaiki fromDataURL ketika window.devicePixelRatio berbeda dari 1, tetapi (semoga) benar-benar diperbaiki di 1.3.4.

szimek pada 26 Nov 2014

Saya menggunakan versi terbaru.

MarcGodard pada 26 Nov 2014

Ketika saya memperbaiki rasio dengan benar (seperti demo Anda), jari saya tidak cocok di mana garis muncul.

Saya hanya membuat demo sederhana, jadi ini tidak terlalu penting dan akan saya mainkan lagi nanti.

MarcGodard pada 26 Nov 2014

Berikut demo sederhana: http://jsfiddle.net/szimek/baL7r8xd. Saat Anda menekan tombol "ganti", itu akan menghapus kanvas dan mengembalikan gambar setelah 1 detik. Ini berfungsi dengan baik di iPhone dengan window.devicePixelRatio dari 2.

szimek pada 26 Nov 2014

Aneh, bekerja di android saya juga.

Terima kasih, saya akan mencari tahu :)

MarcGodard pada 26 Nov 2014

Bagi siapa pun yang kebetulan menemukan masalah ini, saya tahu apa yang saya lakukan salah.

Sebelum Anda memasukkan data, menggunakan .fromDataURL(data) , perlu memastikan bahwa Anda menskalakan kanvas dengan benar:

      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);