@mikilikala
На фронте

Почему создается кривой qr код (qr code styling)?

На страничке два qr кода. Почему-то второй создается кривым (см. скриншот). Если убрать первый, то второй создается идеально. С классами все нормально.
Кто работал, у кого была проблема и как решили?

Код

function genQRVcard() {
    let wrapqr = document.querySelector(".agent__qr-generate"),
        qr = document.querySelector(".agent__qr svg");
    if (!qr) {
        const qrCode = new QRCodeStyling({
            width: '180',
            height: '180',
            type: "svg",
            data: window.location.href,
            image: "/public/icons/penthouse/qr-penthouse-icon.svg",
            dotsOptions: { color: "#333333", type: "extra-rounded" },
            backgroundOptions: { color: "#ffffff", },
            imageOptions: { crossOrigin: "anonymous", margin: 5 }
        });
        qrCode.append(wrapqr);
    }
}
function modarQR() {
    let wrapper = document.querySelector(".modal__qr-generate"),
        qrSvg = document.querySelector(".modal__qr svg");
    if (!qrSvg) {
        const qrCodeModar = new QRCodeStyling({
            width: '230',
            height: '230',
            type: "svg",
            data: window.location.href,
            image: "/public/icons/penthouse/qr-penthouse-icon.svg",
            dotsOptions: { color: "#333333", type: "extra-rounded" },
            backgroundOptions: { color: "transparent", },
            imageOptions: { crossOrigin: "anonymous", margin: 5 }
        });
        qrCodeModar.append(wrapper);
    }
}



https://imgur.com/a/2UnicV3
  • Вопрос задан
  • 231 просмотр
Решения вопроса 1
MoralGray
@MoralGray
Из-за разных размеров и type svg.
Можно избежать поставив type canvas.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы