{"id":265,"date":"2012-12-04T20:44:34","date_gmt":"2012-12-04T18:44:34","guid":{"rendered":"http:\/\/webowiec.net\/blog\/?p=265"},"modified":"2015-04-07T10:51:35","modified_gmt":"2015-04-07T08:51:35","slug":"html5-tlo-strony-na-pelnym-ekranie","status":"publish","type":"post","link":"https:\/\/webowiec.net\/blog\/html5-tlo-strony-na-pelnym-ekranie\/","title":{"rendered":"[html5] T\u0142o strony na pe\u0142nym ekranie"},"content":{"rendered":"

Specyficzne projekty wymagaj\u0105 specyficznych rozwi\u0105za\u0144. Jednym z nich jest konieczno\u015b\u0107 uzyskania obrazkowego t\u0142a strony na ca\u0142ym ekranie, niezale\u017cnie od rozdzielczo\u015bci ekranu<\/strong>.
\nZ pomoc\u0105 przychodzi HTML5, a w\u0142a\u015bciwie CANVAS (kt\u00f3rego mo\u017cliwo\u015bci sprawdzali\u015bmy np. tutaj: [canvas] Gradient HSV \u2013 pe\u0142en zakres kolor\u00f3w<\/a><\/p>\n

Schemat dzia\u0142ania jest nast\u0119puj\u0105cy:
\n1. Tworzymy element CANVAS
\n2. Wczytujemy grafik\u0119\/obrazek, kt\u00f3ry chcemy umie\u015bci\u0107 jako t\u0142o strony
\n3. Importujemy grafik\u0119 do elementu CANVAS, nadaj\u0105c mu wymiary ekranu
\n4. Exportujemy element CANVAS do elementuw sekcj\u0119: background-image<\/code>.<\/p>\n

W pierwszej kolejno\u015bci tworzymy element CANVAS (np. na ko\u0144cu strony, zaraz przed <<\/strong>\/<\/strong>body<\/strong>><\/strong>):<\/p>\n

[html]
\n<canvas id="canvas" style="display:none;"><\/canvas>
\n[\/html]<\/p>\n

W JavaScript wczytujemy utworzony CANVAS oraz obrazek t\u0142a strony (bg.jpg<\/strong>). Po jego za\u0142adowaniu skalujemy go do wymiar\u00f3w ekranu (screen.width<\/strong>, screen.height<\/strong>), przypisuj\u0105c do CANVAS (drawImage<\/strong>). Na koniec exportujemy otrzymany obrazek jako t\u0142o strony (document.body.style.backgroundImage<\/strong>), do czego naj\u0142atwiej wykorzysta\u0107 funkcj\u0119 “toDataURL<\/strong>“, kt\u00f3ra zamieni obraz do postaci binarnej (data:image\/jpeg;base64,…<\/strong>).<\/p>\n

[php]
\nvar can = document.getElementById(‘canvas’);
\nvar ctx = can.getContext(‘2d’);
\nvar img = new Image();
\nimg.onload = function(){
\n can.width = screen.width; \/\/ pobieramy szeroko\u015b\u0107 ekranu
\n can.height = screen.height; \/\/ pobieramy wysoko\u015b\u0107 ekranu
\n ctx.drawImage(img, 0, 0, can.width, can.height);
\n document.body.style.backgroundImage = ‘url(‘+can.toDataURL(‘image\/jpeg’)+’)’;
\n}
\nimg.src = ‘bg.jpg’; \/\/ wczytanie grafiki
\n[\/php]<\/p>\n

Gotowy kod ca\u0142o\u015bciowo:<\/p>\n

[html]
\n<html>
\n<style type="text\/css">
\nbody{ background: white no-repeat; }
\n<\/style>
\n<body>
\nFull screen background image: <br> <img src="bg.jpg">
\n<canvas id="canvas" style="display:none;"><\/canvas>
\n<script type="text\/javascript">
\nvar can = document.getElementById(‘canvas’);
\nvar ctx = can.getContext(‘2d’);
\nvar img = new Image();
\nimg.onload = function(){
\n can.width = screen.width; \/\/ pobieramy szeroko\u015b\u0107 ekranu
\n can.height = screen.height; \/\/ pobieramy wysoko\u015b\u0107 ekranu
\n ctx.drawImage(img, 0, 0, can.width, can.height);
\n document.body.style.backgroundImage = ‘url(‘+can.toDataURL(‘image\/jpeg’)+’)’;
\n}
\nimg.src = ‘bg.jpg’; \/\/ wczytanie grafiki
\n<\/script>
\n<\/body>
\n<\/html>
\n[\/html]<\/p>\n

Demo: https:\/\/webowiec.net\/blog\/demo\/bg.html<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Specyficzne projekty wymagaj\u0105 specyficznych rozwi\u0105za\u0144. Jednym z nich jest konieczno\u015b\u0107 uzyskania obrazkowego t\u0142a strony na ca\u0142ym ekranie, niezale\u017cnie od rozdzielczo\u015bci ekranu. Z pomoc\u0105 przychodzi HTML5, a w\u0142a\u015bciwie CANVAS (kt\u00f3rego mo\u017cliwo\u015bci sprawdzali\u015bmy np. tutaj: [canvas] Gradient HSV \u2013 pe\u0142en zakres kolor\u00f3w … <\/i> Czytaj ca\u0142o\u015b\u0107<\/a><\/p>\n","protected":false},"author":4,"featured_media":453,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,437,5,3,6],"tags":[469,478,438,471,470,153,468,476,481,480,152,300,472,11,16,233,448,232,479,17,55,482,56,10,53,467,477,473,475,474,9,8,7],"class_list":["post-265","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to","category-javascript-2","category-poradniki","category-porady-dla-webmasterow","category-tourtale","tag-background-image-css","tag-backround-w-kazdej-rozdzielczosci-ekranu","tag-canvas","tag-canvas-jako-background-image","tag-canvas-jako-tlo-strony","tag-css","tag-css-backgroundimage","tag-css-tlo-strony-na-calym-ekranie","tag-eran","tag-full-image-size-background","tag-html","tag-html5","tag-jak-umiescic-canvas-w-bacground-image","tag-jak-zrobic-strone-www","tag-jak-zrobic-swoja-strone-www","tag-javascript","tag-javascript-canvas","tag-js","tag-js-canvas","tag-porady-dla-webmasterow-2","tag-robienie-www","tag-screen","tag-strona-internetowa","tag-strony-internetowe","tag-strony-www","tag-tlo-strony","tag-tlo-strony-na-calej-rozdzielczosci","tag-tlo-strony-na-caly-ekran","tag-tlo-strony-na-kazda-rozdzielczosc","tag-tlo-strony-na-pelnym-ekranie","tag-tworzenie-stron-www","tag-webmaster","tag-webowiec"],"_links":{"self":[{"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/posts\/265","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/comments?post=265"}],"version-history":[{"count":4,"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/posts\/265\/revisions"}],"predecessor-version":[{"id":454,"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/posts\/265\/revisions\/454"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/media\/453"}],"wp:attachment":[{"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/media?parent=265"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/categories?post=265"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/tags?post=265"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}