Question

背景图片不会从剑道出口。

有没有办法让背景图片导出到png文件。

我不清楚为什么背景图片不会导出。

Dojo就在这里：http://dojo.telerik.com/@jcbowyer/exuZi

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet - Background Image won't export</title>

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.mobile.all.min.css"/>

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
</head>
<body>
  
<div class="content" style="background: #ffffff;background-image:url(https://static.pexels.com/photos/17666/pexels-photo-large.jpg)">
    <p>Lorem ípsum dolor sit amét, pro éu facilis vulputáte témporibus. Eu méi modus requé. Unum gloriátur has et. Modo stet vix ei, apéirian iñsolens plátoñem has ex. Cum eí oporteat inímicus, prí soluta torquatos témporibus éu.</p>
    <p>Ut eos assúm mazim vócent, cu gloríatur expetéñdis pro. Héñdrerit ádversarium reprehendunt eos ad, dúo an noster feugiat cotidieque. Vocent erroribus repudiáre ad meí. Oratio soluta eripuit sed éx. Vis et meliore appellañtur, át has discere convenire ocurreret. Eos at mazim melius aliquip, aperiam alterum commuñé pro id, zril soluta efficiantur in sit. Duis mundi duo ex, pér offendit probatus suavítate iñ.</p>
    <p>Nec id fácilis similique, audiam moderatius ad eum. Persecuti liberavisse eum ex. Qui anímal audiré et, éum vitae coñsul dolorum eu, ín sed partem antíopam. Velít suscipit te usu. Mea ea melius scripta.</p>
    <p>Illum delenit neglegentúr te cum, in errór inimicus disseñtias mel, placérat ocurreret ea vix. Vix ea latine voluptatum. Cúm eu albucius democritum coñsetetur, vix eu dicat deleniti, omñes ínimicus nám no. Nihil molestiae vel ex.</p>
    <p>Eú ñominavi placerat his, eu vix timeam qualisque. Príma recusabo torquatós eos ad, ín meí próbo aequé. Ex ñoñumy vóluptua accommodare seá, sit át sanctus detráxit, ín eos case probatus tractatos. Id sit nihíl coñtentíones, ñec ut audiré elaboraret, quo alia ferri múñere ét.</p>
</div>
<script>
    var draw = kendo.drawing;
    var geom = kendo.geometry;

    var contentSize = new geom.Rect([0, 0], [800, 600]);
    var imageSize = new geom.Rect([0, 0], [1200, 800]);

    draw.drawDOM($(".content")).then(function (group) {
        

        // export the image and crop it for our desired size
        return draw.exportImage(group, {
            cors: "anonymous"
        });
    })
    .done(function(data) {
        kendo.saveAs({
            dataURI: data,
            fileName: "frame.png"
        });
    });
</script>
</body>
</html>

Answer 1

绘图导出有两个限制，

它不适用于远程文件
它不支持某些关键字，例如背景封面。

在解决了这两个问题后，出口工作了。

使用Kendo，如何使用drawDom导出背景图像

1 个答案: