Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

how do I export a background image with drawDom

2 Answers 176 Views
Drawing API
This is a migrated thread and some comments may be shown as answers.
Patrick
Top achievements
Rank 1
Patrick asked on 04 Apr 2016, 02:47 AM

Background image wont export from Kendo.
Is there a way to get the background image to export to the png file.
I am not clear why the background image won't export.
Dojo is here: http://dojo.telerik.com/@jcbowyer/exuZi

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet - Background Image won't export</title>
 
 
    <script src="http://code.jquery.com/jquery-1.9.1.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>

2 Answers, 1 is accepted

Sort by
0
Patrick
Top achievements
Rank 1
answered on 05 Apr 2016, 03:39 PM
exportdrawing.zip

This is a bit more complex than original post.  The background in original post would not export because of cross domain which is documented.    However, I am unable to export a background that is local if it is set via angular.  An updated example of the failed export background is attached.

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
 
    <!--
        Customize the content security policy in the meta tag below as needed. Add 'unsafe-inline' to default-src to enable inline JavaScript.
        For details, see http://go.microsoft.com/fwlink/?LinkID=617521
    -->
    <meta http-equiv="Content-Security-Policy" content="default-src  'self' http://cdn.kendostatic.com ; http://ajax.googleapis.com http://code.jquery.com ; https://caredarewebapi.azurewebsites.net ; https://localhost:44309/   https://localhost:44300/  https://caredarestorage.blob.core.windows.net/ 'unsafe-eval' 'unsafe-inline' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
    <title>CorovaStartupNavigationTest</title>
 
    <!-- CorovaStartupNavigationTest references -->
    <link href="css/kendo.mobile.all.min.css" rel="stylesheet" />
 
    <style>
        .divSection {
            display: table;
            width: 100%;
            height: 100%;
            z-index: 0;
        }
 
        .divRandomText {
            height: 100%;
            font-size: large;
            line-height: 130%;
            padding: 10% 15% 15% 15%;
            display: table-cell;
            vertical-align: middle;
            white-space: normal;
        }
 
        .divBackgroundImage {
            background-color: white;
            height: 100%;
            width: 100%;
            position: absolute;
            right: 0px;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            *z-index: -1;
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000', GradientType=1);
        }
    </style>
 
 
    <script src="scripts/index.js"></script>
</head>
<body kendo-mobile-application skin="'flat'" ng-app="sushiMobileApp">
    <kendo-mobile-view id="index" ng-controller="indexController">
        <kendo-mobile-header>
            <kendo-mobile-nav-bar>
                Home View
                <kendo-mobile-button k-align="'right'" k-on-click="export(kendoEvent)">
                    Export
                </kendo-mobile-button>
            </kendo-mobile-nav-bar>
 
        </kendo-mobile-header>
     
        <div class="divBackgroundImage" ng-style="{'background-image': 'url(' + slide.image + ')'}">
        </div>
 
          
 
 
    </kendo-mobile-view>
    <script src="cordova.js"></script>
    <script src="scripts/platformOverrides.js"></script>
    <script src="scripts/jquery.min.js"></script>
    <script src="scripts/angular.js"></script>
    <script src="scripts/kendo.all.min.js"></script>
 
    <script>
        angular.module('sushiMobileApp', ['kendo.directives'])
         .controller('indexController', ['$scope', function ($scope) {
             $scope.slide = {};
 
             $scope.slide.image = 'images/pexels-photo-large.jpg';
             $scope.slide.cardName = 'Title';
             $scope.slide.careCardDate = 'Today';
             $scope.slide.text = 'Text';
 
             $scope.export = function (e) {
 
                 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($(".divBackgroundImage")).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>

0
Dimo
Telerik team
answered on 06 Apr 2016, 07:32 AM
Hello Patrick,

The problem is not related to Angular, but to the way background-size is set as a keyword ("cover"). Keywords are currently not supported. Please use a value of 100%, which should represent the same thing.

Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Drawing API
Asked by
Patrick
Top achievements
Rank 1
Answers by
Patrick
Top achievements
Rank 1
Dimo
Telerik team
Share this question
or