Question

我正在尝试通过Kendo UI QRCode ASP.Net MVC小部件在生成的QRCode中心应用徽标的方法。

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

以下是数字卡的精简版本：

Background-position

除了我许多月前提出的问题外，论坛上没有其他帮助文章。有人可以在这方面帮助我吗？

Kendo论坛：

UserVoice：https://www.telerik.com/forums/generate-a-qr-code-with-a-logo-in-the-center

更新

由于@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>

我正在尝试找出一个展示位置公式。

带有徽标的Kendo UI QRCode

0 个答案: