Kendo UI QRCode с логотипом - PullRequest
Новая
       30

Kendo UI QRCode с логотипом

0 голосов
/ 18 декабря 2018

Я пытаюсь найти способ применения логотипа в центре сгенерированного QRCode с помощью Kendo UI QRCode ASP.Net MVC виджет. 

function exp() {
    kendo.drawing.drawDOM($("#qrCode"))
        .then(function (group) {
            return kendo.drawing.exportSVG(group);
        })
        .done(function (data) {
            kendo.saveAs({
                dataURI: data,
                fileName: $("#uid").val() + ".svg"
            });
        });
}

document").ready(function () {
    $("#qrCode").kendoQRCode({
        value: $("#qrdata").val(),
        errorCorrection: "M",
        size: 300,
        color: "#00245D"
    });

    $("#qrCode").dblclick(function () {
        exp();
    });
});

Вот урезанная версияцифровая карта:

Test QRCode

На форумах нет статьи о помощи, кроме моего собственного вопроса много месяцев назад.Может ли кто-нибудь помочь мне в этом отношении?

Форум кендо: https://www.telerik.com/forums/generate-a-qr-code-with-a-logo-in-the-center

UserVoice: https://feedback.telerik.com/kendo-jquery-ui/1380165-qrcode-with-logo-and-customizations

Обновление

Благодаря @David я продвинулся вперед и придумал следующее:

Потерял URL, так как jsfiddle не смог сохранить мои правки 

<!DOCTYPE html>

<html>
    <head>
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common-bootstrap.min.css" />
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.bootstrap.min.css" />
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.bootstrap.mobile.min.css" />            
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common.min.css">
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.rtl.min.css">
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.default.min.css">
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.mobile.all.min.css">

        <style>
            .k-logo{
                position:relative; 
                width:75px;
                height:75px; 
                margin-left:-190px;
                margin-top:115px;
                border:1px solid grey;
                background-color:white;
            }
        </style>

        <script src="https://code.jquery.com/jquery-1.12.3.min.js"/>
        <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"/>    
        <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/angular.min.js"/>
        <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jszip.min.js"/>
    </head>

    <body>
        <div>                  
            <div id="qrMail" style="float:left;"/>
            <img id="logo" src="https://dojo.telerik.com/images/kendoka.png" class="k-logo"/>
        </div>

        <script type="text/javascript">
            $(document).ready(function () {
                $("#qrMail").kendoQRCode({
                    value: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla scelerisque vestibulum interdum. Duis vel turpis est. Suspendisse lacinia congue ante ut tempor. Curabitur molestie odio eget rutrum consequat. Nunc commodo dolor at sapien commodo, vel vestibulum arcu tincidunt. Pellentesque ut imperdiet diam, at imperdiet leo. Aenean condimentum tempus finibus. Sed aliquet arcu id libero sodales tincidunt.",
                    errorCorrection: "M",
                    size: 300,
                    color: "#00245D",
                    background: "transparent"
                });  
            });
        </script>
    </body>
</html>

Я пытаюсьвыяснить формулу размещения сейчас.

...