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>
<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>
There are two limitations of the drawing export,
It does not work on remote files
It does not support certain keywords such as cover for the background.
After addressing those 2 issues the export worked.
Related
I am trying to setup Laravel with Vue, but for some reason nothing is being rendered at the moment.
This is the code I have:
main layout file (main.blade.php)
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
<title>Pathfinder Character Sheet</title>
<link href="{{ asset('css/app.css') }}"/ rel="stylesheet">
<link href="{{ asset('css/light-bootstrap-dashboard.css') }}" rel="stylesheet">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.7.0/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="https://static.fontawesome.com/css/fontawesome-app.css" rel="stylesheet">
</head>
<body>
<div id=character-sheet>
<master></master>
</div>
<link rel="js" href="{{ asset('js/app.js') }}">
</body>
</html>
app.js file
import Vue from 'vue'
import Master from './components/layout/Master'
require('./bootstrap');
require('./light-bootstrap-dashboard');
window.Event = new Vue()
window.Vue = Vue
const app = new Vue({
el: '#character-sheet',
components: {
Master
},
template: '<Master/>',
});
Master.vue
<template>
<div class="wrapper" id="character-sheet">
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt excepturi, ex exercitationem laborum beatae nostrum molestiae inventore eos amet ut debitis nam accusamus illum ipsa soluta ipsam officiis doloremque rerum.</span>
</div>
</template>
<script>
export default {
name: "Master"
}
</script>
I am not getting any error, just a blank screen (app.js file is loaded).
What am I doing wrong here?
Remove the id="character-sheet" from Master.vue
In app.js use as follows.....
Vue.component('master', require('./components/layout/Master.vue').default);
const app = new Vue({
el: '#character-sheet' });
Run the command: npm run dev
Your HTML Id is not quoted.
Change <div id=character-sheet>
To <div id="character-sheet">
id must be unique, you're putting two elements with same id nested. Try not putting the component inside that tag.
...
<body>
<master></master>
<link rel="js" href="{{ asset('js/app.js') }}">
</body>
...
Im trying to get data from an endpoint api/data which passes an object. But when I run my app I dont see anything in my console and in the network tab I dont see any xhr request. There is no warning and errors in console too. Am I doing anything wrong here? I have checked the endpoint and its passing data from backend properly.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>FLashy</title>
<link rel="stylesheet" href="http://localhost:8000/css/bootstrap.min.css" media="screen" title="no title">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4" id="app">
<h3 class="Text center">Datas</h3>
<p>
#{{ datas }}
</p>
</div>
</div>
</div>
<!-- scripts -->
<script src="http://localhost:8000/js/jquery-2.2.4.min.js"></script>
<script src="http://localhost:8000/js/bootstrap.min.js" charset="utf-8"></script>
<script src="http://localhost:8000/js/vue.js" charset="utf-8"></script>
<script src="http://localhost:8000/js/vue-resource.min.js" charset="utf-8"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
},
methods:{
fetchData: function(){
this.$http.get('api/data').then(function(response){
// this.$set('datas', response.data);
console.log(response);
}, function(response){
// error callback
});
},
ready: function(){
this.fetchData();
}
}
});
</script>
</body>
</html>
web.php
Route::get('api/data', function(){
$a = [];
$a['id'] = 1;
$a['message'] = 'Lorem ipsum dolor sit amet, consectetur';
$a['status'] = 'Completed';
return response()->json($a,200);
});
Your ready hook is inside methods: {} handler but in reality should be outside:
methods: {
fetchData: function () {
// your AJAX here
}
},
ready: function () {
this.fetchData()
}
I'm facing a huge difficulty right now. I did not succeed in finding how to fix it.
I'm trying to display csv datas without empty lines. I thought the SPL library could permit it. But whatever i do i can't find why it's not working.
Could you?
Here's my code (quite simple):
<?php
// Lecture du fichier csv
$csv = new SplFileObject('fichiers/tempo/test.csv', 'r');
// Flags pour ignorer les lignes vides
$csv->setFlags(SplFileObject::READ_CSV | SplFileObject::READ_AHEAD | SplFileObject::SKIP_EMPTY | SplFileObject::DROP_NEW_LINE);
$csv->setCsvControl(';');
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<link rel="icon" type="image/png" href="images/favicon.png" />
<title>Nas - Insertion de données</title>
</head>
<body>
<table>
<?php
$tableau = array();
// On parcours les lignes du fichier csv en lecture ==> $csv
foreach($csv as $line){
echo '<tr>';
foreach($line as $var){
echo '<td>-'.$var.'</td>';
}
echo '</tr>';
}
?>
</table>
</body>
</html>
My flags do nothing, and i don't know what i'm doing wrong.....
Thank you.
You should use these flags to ignore empty lines:
$file->setFlags(
SplFileObject::READ_CSV |
SplFileObject::SKIP_EMPTY |
SplFileObject::READ_AHEAD |
SplFileObject::DROP_NEW_LINE
);
Thank you for your time. I tried with php 5.4, 5.5, 5.6 and 7.0 but it did nothing. Then i choose to put the following test to every loop:
foreach($csv as $line){
// Ignoring empty lines
if(implode($line) == null)continue;
...
At least it works!
My Csv is something like:
Wine List;;;;;;;;;;
;;;;;;;;;;
;This wine is stored at the chƒteau or at our supplier's warehouse and will be available for collection later on.;;;;;;;;;
;;;;;;;;;;
Product Type;Vintage;Wine;Appellation;Classement;Qty;Size;Price;W-A;W-S;Comments
Red wine;2013;Aiguilhe (d');Castillon - c“tes de bordeaux;;216;750 mL;11,80 ?;87-89s;86-89;
Red wine;2012;Aiguilhe (d');Castillon - c“tes de bordeaux;;168;750 mL;12,50 ?;89-91;89;
Red wine;2011;Aiguilhe (d');Castillon - c“tes de bordeaux;;395;750 mL;12,60 ?;88;89;
I am new in Laravel. I watched some tutorials on youtube and try something did a blade template but it couldn't load, it gave me a message
Whoops, looks like something went wrong.
my code
Route.php
<?php
Route::get('list', 'HsController#getList');
HsController.php
<?php
class HsController extends BaseController {
public function getList()
{
return View::make('List');
}
}
in views folder i have a folder named Layout include some files such as: main.blade.php, foot.blade.php, menu.blade.php
main.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="">
</head>
<body>
#include('layout.menu');
#yield('content');
#include('layout.foot');
</body>
</html>
foot.blade.php
<div>
Footer. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat
</div>
menu.blade.php
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Test</li>
</ul>
</nav>
and important thing is list.blade.php :
#extends('layouts.main')
#section('content')
<p>This is my body content.</p>
#stop
please correct my code
thank you very much
First error is in list.blade.php file
You have:
#extends('layouts.main')
it should be:
#extends('layout.main')
because the folder name is Layout. Another possible problem is the name of Layout directory. You should change it into lowercase layout - because on Linux webserver it won't probably work.
I have a multi-language website which correctly detects the user language (the site's language changes accordingly), but can't be correctly shared in Google+.
The site exists in two languages, therefore I have set up two different sets of meta properties, one for each language:
English:
<link rel="canonical" href="http://en.perehana.com/"/>
<meta property="og:title" content="Perehana, the best way to find perfect gifts!"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://www.perehana.com"/>
<meta property="og:image" content="http://www.perehana.com/img/large-icon.jpg"/>
<meta property="og:site_name" content="Perehana"/>
<meta property="og:description" content="No gift ideas for Christmas, birthdays, weddings, births or any other event? Perehana allows you to enter gift ideas and to reserve your family and friends' ideas before buying them."/>
<meta property="og:locale" content="en_GB"/>
<meta property="fb:app_id" content="242045389185230"/>
<meta property="og:locale:alternate" content="fr_FR"/>
<meta itemprop="name" content="Perehana, the best way to find perfect gifts!"/>
<meta itemprop="description" content="No gift ideas for Christmas, birthdays, weddings, births or any other event? Perehana allows you to enter gift ideas and to reserve your family and friends' ideas before buying them."/>
<meta itemprop="image" content="http://www.perehana.com/img/square_logo.png"/>
French:
<link rel="canonical" href="http://fr.perehana.com/"/>
<meta property="og:title" content="Perehana, le meilleur moyen de faire plaisir à coup sûr !"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://www.perehana.com"/>
<meta property="og:image" content="http://www.perehana.com/img/large-icon.jpg"/>
<meta property="og:site_name" content="Perehana"/>
<meta property="og:description" content="En manque d'idées de cadeaux à l'approche de Noël, des anniversaires, des mariages ou des naissances ? Perehana est un site qui vous permet de saisir des idées-cadeaux et de réserver celles de votre famille et de vos amis. Vous pouvez ensuite aller les acheter sans qu'ils le sachent."/>
<meta property="og:locale" content="fr_FR"/>
<meta property="fb:app_id" content="242045389185230"/>
<meta property="og:locale:alternate" content="en_GB"/>
<meta itemprop="name" content="Perehana, le meilleur moyen de faire plaisir à coup sûr !"/>
<meta itemprop="description" content="En manque d'idées de cadeaux à l'approche de Noël, des anniversaires, des mariages ou des naissances ? Perehana vous permet de saisir des idées-cadeaux et de réserver celles de votre famille et de vos amis. Vous pouvez ensuite aller les acheter sans qu'ils le sachent."/>
<meta itemprop="image" content="http://www.perehana.com/img/square_logo.png"/>
As you can see, the locales and alternates are correctly set.
This is how I call the G+ API (this is an example for a French user):
<div class="g-plusone" data-size="medium" data-href="http://www.perehana.com"></div>
<script type="text/javascript">
window.___gcfg = {
lang: 'fr'
};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
According to the user's language, the correct properties are displayed.
The problem occurs when I want to share it via Google+, the title and description that Google automatically chooses for the site are in English, even if my G+ user account is in French... :-(
Thanks to anyone who can help!
I assume you're using the Accept-Language HTTP header to do this on your website.
The page fetcher used for sharing on to Google+ does not propagate any of the HTTP headers from the user who initiated the action, so your website will fall back to whatever the default language is.
You can work around this by using GET parameters to set the language. If you are sharing from the +1 button, share button or share link you can then set the current language into the target url parameter, data-href, for that plugin.
It looks like you've already filed a feature request for this in the Google+ issue tracker. If it wasn't you, star the issue to receive update notifications.