{"id":1673,"date":"2010-05-07T12:14:41","date_gmt":"2010-05-07T10:14:41","guid":{"rendered":"https:\/\/www.artera.net\/it\/blog\/?p=1673"},"modified":"2023-02-27T14:58:39","modified_gmt":"2023-02-27T14:58:39","slug":"html5-canvas-e-immagini","status":"publish","type":"post","link":"https:\/\/www.artera.net\/it\/sviluppo\/html5-canvas-e-immagini\/","title":{"rendered":"HTML5: Canvas e immagini"},"content":{"rendered":"

La gestione delle immagini con il Canvas<\/strong> \u00e8 una delle feature pi\u00f9 interessanti per lo sviluppo web che ci viene offerta da HTML5<\/strong>. Grazie al Canvas, infatti, possiamo importare immagini all’interno dei nostri documenti per elaborarle dinamicamente in modo da ottenere, ad esempio, foto-composizioni. Avremo inoltre la possibilit\u00e0 di modificare le dimensioni delle immagini importate, potremo aggiungere del testo e sfruttare molte altre funzionalit\u00e0 che analizzeremo in questo post.<\/p>\n

Importare immagini in Canvas<\/h3>\n

Per utilizzare un’immagine all’interno di Canvas \u00e8 necessaria l’importazione che consiste in due passaggi:<\/p>\n

    \n
  1. Istanziare un oggetto Image<\/strong> di Javascript e selezionare l’immagine da importare.<\/li>\n
  2. Disegnare l’immagine sul Canvas<\/strong> utilizzando la funzione drawImage<\/em>.<\/li>\n<\/ol>\n

    Analizziamo le 4 modalit\u00e0 che ci permettono di definire quale immagine utilizzare (primo step):<\/p>\n

    1) Usare immagini presenti sulla pagina web<\/strong><\/p>\n

    Possiamo avere accesso a tutte le immagini presenti nella pagina web tramite l’array document.images, oppure tramite document.getElementsByTagName, document.getElementById e cos\u00ec via. Chiaramente, chi utilizza un framework Javascript, come ad esempio Mootools<\/a>, pu\u00f2 utilizzare le funzioni offerte da esso ($, $$, ecc…).<\/p>\n

    2) Usare altri Canvas presenti nella pagina web<\/strong><\/p>\n

    Cos\u00ec come per le immagini possiamo accedere ad altri elementi canvas, allo stesso modo (document.getElementsByTagName, document.getElementById, $, $$, ecc…). Ovviamente, per poter utilizzare questa propriet\u00e0, devi aver precedentemente disegnato qualcosa nel Canvas in questione.<\/p>\n

    3) Creare immagini utilizzando l’url del file<\/strong><\/p>\n

    Il metodo pi\u00f9 utilizzato per importare l’immagine \u00e8 quello di istanziare un oggetto<\/strong> della classe Image<\/em> di Javascript. Lo svantaggio principale \u00e8 legato alla lentezza di caricamento delle immagini: \u00e8 necessario gestire il preload delle immagini <\/a>per evitare che lo script si blocchi<\/strong> nel bel mezzo del suo funzionamento perch\u00e8 deve caricare le immagini.<\/p>\n

    [javascript]
    \nvar immagine=new Image();
    \nimmagine.onload=function(){
    \n \/\/istruzioni per disegnare l’immagine nel Canvas
    \n}
    \nimmagine.src="immagini\/la-mia-immagine.jpg";
    \n[\/javascript]<\/p>\n

    Nel caso le immagini da caricare siano molteplici, la gestione del preload diventa complessa ed \u00e8 necessario pensare ad uno script che gestisca il caricamento delle immagini.<\/p>\n

    4) Importare l’immagine tramite data: url<\/strong><\/p>\n

    Il metodo data: url \u00e8 uno scheme per includere all’interno delle pagine web alcune informazioni come se fossero risorse esterne. Possiamo, cos\u00ec, definire un’immagine in forma di stringa codificata in base64 direttamente nel codice.<\/p>\n

    [javascript]
    \nvar immagine_src=’data:image\/png;base64,iVBORw0KGgoAAAANSUAASUVORK5CYII=’;
    \n[\/javascript]<\/p>\n

    Disegnare l’immagine sul Canvas<\/h3>\n

    Importata l’immagine con il metodo, tra i 4 di cui sopra, che preferiamo, possiamo, finalmente, visualizzare l’immagine sul nostro Canvas. Il metodo drawImage, che ci serve proprio per disegnare l’immagine sul Canvas, pu\u00f2 essere utilizzato in 3 modi differenti.<\/p>\n

    [javascript]
    \ndrawImage(immagine, x, y)
    \n[\/javascript]<\/p>\n

    dove immagine<\/em> \u00e8 l’immagine importata come descritto sopra e x<\/em> e y<\/em> sono le coordinate di partenza per la visualizzazione dell’immagine.<\/p>\n

    Esempio 1: importare un’immagine e sovrapporre una figura<\/strong><\/p>\n

    \"Canvas<\/a>
    \nUtilizzando un’immagine selezionata dal mio     post precedente<\/a> in cui introducevo la creazione delle figure geometriche nel Canvas, vediamo ora, come sovrapporre un quadrato blu all’interno del grafico:<\/div>\n

    [javascript]
    \nfunction draw() {
    \n\tvar canvas = document.getElementById("canvas");
    \n\tif (canvas.getContext) {
    \n\t\tvar ctx = canvas.getContext("2d");
    \n\t\tvar img = new Image();
    \n\t\timg.onload = function(){
    \n\t\t\tctx.drawImage(img,0,0);
    \n\t\t\tctx.beginPath();
    \n\t\t\tctx.fillStyle = "rgb(0, 0, 200)";
    \n\t\t\tctx.fillRect(67,59,50,50);
    \n\t\t\tctx.fill();
    \n\t\t}
    \n\t\timg.src = ‘coords.gif’;
    \n\t}
    \n}
    \n[\/javascript]<\/p>\n

    Ridimensionare un’immagine<\/h3>\n

    Un altro modo per utilizzare la funzione drawImage \u00e8 il seguente:<\/p>\n

    [javascript]
    \ndrawImage(immagine, x, y, larghezza, altezza);
    \n[\/javascript]<\/p>\n

    Ovviamente larghezza<\/em> ed altezza<\/em> identificano le dimensioni con le quali ridimensionare l’immagine all’interno del canvas.<\/p>\n

    Esempio 2: ridimensionamento e visualizzazione dell’immagine<\/strong><\/p>\n

    Importiamo nuovamente l’immagine usata gi\u00e0 nell’esempio precedente e, ridimensionandola, la stampiamo pi\u00f9 volte grazie a due cicli for:<\/p>\n

    [javascript]
    \nfunction draw() {
    \n\tvar canvas = document.getElementById("canvas");
    \n\tif (canvas.getContext) {
    \n\t\tvar ctx = canvas.getContext("2d");
    \n\t\tvar img = new Image();
    \n\t\timg.onload = function(){
    \n\t\t\tfor (xx=0;xx<4;xx++){
    \n\t\t\t\tfor (yy=0;yy<4;yy++){
    \n\t\t\t\t\tctx.drawImage(img,xx*100,yy*100,100,100);
    \n\t\t\t\t}
    \n\t\t\t}
    \n\t\t}
    \n\t\timg.src = ‘coords.gif’;
    \n\t}
    \n}
    \n[\/javascript]<\/p>\n

    il risultato:
    \n    \"Canvas<\/a>
    \n    <\/a><\/p>\n

    Ritagliare un’immagine<\/h3>\n

    L’ultimo modo per utilizzare la funzione drawImage \u00e8 utile per ritagliare parte di un’immagine:<\/p>\n

    [javascript]
    \ndrawImage(immagine, sx, sy, sLarghezza, sAltezza, dx, dy, dLarghezza, dAltezza)
    \n[\/javascript]<\/p>\n

    I parametri che hanno come prefisso s<\/em> (sx, sy, sLarghezza, sAltezza) identificano il punto di partenza e le dimensioni del ritaglio all’interno dell’immagine sorgente immagine<\/em>. I parametri che, invece, hanno come prefisso d<\/em> (dx, dy, dLarghezza, dAltezza) identificano il punto di partenza e le dimensioni del ritaglio all’interno dell’immagine di destinazione.<\/p>\n

    Utilizzare in questo modo la funzione drawImage pu\u00f2 essere utile nel caso ci sia un’immagine unica della quale usare pi\u00f9 parti differenti, in modo da non istanziare pi\u00f9 volte la stessa.<\/p>\n

    Esempio 3: ritagliare parte di un banner
    \n<\/strong><\/p>\n

    Come ultimo esempio vogliamo prendere un banner dalla home page del nostro sito www.artera.it e ritagliarne parte del ragno (pu\u00f2 essere utile nel caso tu voglia fare uno scherzo a qualche collega sensibile).<\/p>\n

    Ecco il banner:<\/p>\n

    \"Il<\/a><\/p>\n

    Ecco la nostra funzione draw<\/em>:<\/p>\n

    [javascript]
    \nfunction draw() {
    \n\tvar canvas = document.getElementById("canvas");
    \n\tif (canvas.getContext) {
    \n\t\tvar ctx = canvas.getContext("2d");
    \n\t\tvar img=new Image();
    \n\t\timg.onload=function(){
    \n\t\tctx.drawImage(img,450,30,80,130,10,10,80,130);
    \n\t\t};
    \n\t\timg.src="artera-selez-dominio.gif";
    \n\t}
    \n}
    \n[\/javascript]<\/p>\n

    … e, tentare per credere, ecco il nostro pericolosissimo<\/em> ragno Artera<\/strong>:<\/p>\n

    \"Canvas:<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

    \"CanvasLa gestione delle immagini con il Canvas<\/strong> \u00e8 una delle feature pi\u00f9 interessanti per lo sviluppo web che ci viene offerta da HTML5<\/strong>. Grazie al Canvas, infatti, possiamo importare immagini all’interno dei nostri documenti per elaborarle dinamicamente in modo da ottenere, ad esempio, foto-composizioni. Avremo inoltre la possibilit\u00e0 di modificare le dimensioni delle immagini importate, potremo aggiungere del testo e sfruttare molte altre funzionalit\u00e0 che analizzeremo in questo post.<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[108],"tags":[122,125,106],"class_list":["post-1673","post","type-post","status-publish","format-standard","hentry","category-sviluppo","tag-canvas","tag-disegnare-su-web","tag-html5"],"yoast_head":"\n\u2022 HTML5: Canvas e immagini - Artera<\/title>\n<meta name=\"description\" content=\"Leggi dal blog: HTML5: Canvas e immagini. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.artera.net\/it\/sviluppo\/html5-canvas-e-immagini\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u2022 HTML5: Canvas e immagini - Artera\" \/>\n<meta property=\"og:description\" content=\"Leggi dal blog: HTML5: Canvas e immagini. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.artera.net\/it\/sviluppo\/html5-canvas-e-immagini\/\" \/>\n<meta property=\"og:site_name\" content=\"Artera\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/artera.net\/\" \/>\n<meta property=\"article:published_time\" content=\"2010-05-07T10:14:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-27T14:58:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/05\/canvas-immagini-1.png\" \/>\n<meta name=\"author\" content=\"Sergio Ravera\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sergio Ravera\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/html5-canvas-e-immagini\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/html5-canvas-e-immagini\\\/\"},\"author\":{\"name\":\"Sergio Ravera\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#\\\/schema\\\/person\\\/48ffb6b3727677643fbfd3ecf0a10aa0\"},\"headline\":\"HTML5: Canvas e immagini\",\"datePublished\":\"2010-05-07T10:14:41+00:00\",\"dateModified\":\"2023-02-27T14:58:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/html5-canvas-e-immagini\\\/\"},\"wordCount\":860,\"commentCount\":4,\"publisher\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/html5-canvas-e-immagini\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2010\\\/05\\\/canvas-immagini-1.png\",\"keywords\":[\"canvas\",\"disegnare su web\",\"html5\"],\"articleSection\":[\"Sviluppo\"],\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/html5-canvas-e-immagini\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/html5-canvas-e-immagini\\\/\",\"url\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/html5-canvas-e-immagini\\\/\",\"name\":\"\u2022 HTML5: Canvas e immagini - Artera\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/html5-canvas-e-immagini\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/html5-canvas-e-immagini\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2010\\\/05\\\/canvas-immagini-1.png\",\"datePublished\":\"2010-05-07T10:14:41+00:00\",\"dateModified\":\"2023-02-27T14:58:39+00:00\",\"description\":\"Leggi dal blog: HTML5: Canvas e immagini. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/html5-canvas-e-immagini\\\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/html5-canvas-e-immagini\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/html5-canvas-e-immagini\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2010\\\/05\\\/canvas-immagini-1.png\",\"contentUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2010\\\/05\\\/canvas-immagini-1.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/html5-canvas-e-immagini\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.artera.net\\\/it\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML5: Canvas e immagini\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#website\",\"url\":\"https:\\\/\\\/www.artera.net\\\/it\\\/\",\"name\":\"Artera\",\"description\":\"Swiss Premium Hosting\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.artera.net\\\/it\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#organization\",\"name\":\"Artera\",\"url\":\"https:\\\/\\\/www.artera.net\\\/it\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/artera-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/artera-logo.png\",\"width\":300,\"height\":77,\"caption\":\"Artera\"},\"image\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/artera.net\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/artera\\\/\",\"https:\\\/\\\/www.instagram.com\\\/artera_swiss\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#\\\/schema\\\/person\\\/48ffb6b3727677643fbfd3ecf0a10aa0\",\"name\":\"Sergio Ravera\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g\",\"caption\":\"Sergio Ravera\"},\"description\":\"Raised in a family tradition of merchants, my entrepreneurial spirit drove me to launch my first e-commerce venture in 1998. My vision and dedication led, in 2002, to the founding of Artera, now a leading brand in premium managed cloud hosting services. As Chief Executive Officer, I lead DHH Switzerland SA, part of the international DHH S.p.A. group, listed on the Milan Stock Exchange with the reference code (AIM \u2013 ISIN: IT0005203622). It is under this brand that the Artera brand continues to grow and thrive. In addition to my commitment to the business world, I am an active researcher in the field of new technologies, always fascinated by cutting-edge innovations in the industry.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/sergioravera\\\/\"],\"url\":\"https:\\\/\\\/www.artera.net\\\/it\\\/author\\\/sergio-ravera\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u2022 HTML5: Canvas e immagini - Artera","description":"Leggi dal blog: HTML5: Canvas e immagini. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.artera.net\/it\/sviluppo\/html5-canvas-e-immagini\/","og_locale":"it_IT","og_type":"article","og_title":"\u2022 HTML5: Canvas e immagini - Artera","og_description":"Leggi dal blog: HTML5: Canvas e immagini. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.","og_url":"https:\/\/www.artera.net\/it\/sviluppo\/html5-canvas-e-immagini\/","og_site_name":"Artera","article_publisher":"https:\/\/www.facebook.com\/artera.net\/","article_published_time":"2010-05-07T10:14:41+00:00","article_modified_time":"2023-02-27T14:58:39+00:00","og_image":[{"url":"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/05\/canvas-immagini-1.png","type":"","width":"","height":""}],"author":"Sergio Ravera","twitter_card":"summary_large_image","twitter_misc":{"Scritto da":"Sergio Ravera","Tempo di lettura stimato":"4 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.artera.net\/it\/sviluppo\/html5-canvas-e-immagini\/#article","isPartOf":{"@id":"https:\/\/www.artera.net\/it\/sviluppo\/html5-canvas-e-immagini\/"},"author":{"name":"Sergio Ravera","@id":"https:\/\/www.artera.net\/it\/#\/schema\/person\/48ffb6b3727677643fbfd3ecf0a10aa0"},"headline":"HTML5: Canvas e immagini","datePublished":"2010-05-07T10:14:41+00:00","dateModified":"2023-02-27T14:58:39+00:00","mainEntityOfPage":{"@id":"https:\/\/www.artera.net\/it\/sviluppo\/html5-canvas-e-immagini\/"},"wordCount":860,"commentCount":4,"publisher":{"@id":"https:\/\/www.artera.net\/it\/#organization"},"image":{"@id":"https:\/\/www.artera.net\/it\/sviluppo\/html5-canvas-e-immagini\/#primaryimage"},"thumbnailUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/05\/canvas-immagini-1.png","keywords":["canvas","disegnare su web","html5"],"articleSection":["Sviluppo"],"inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.artera.net\/it\/sviluppo\/html5-canvas-e-immagini\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.artera.net\/it\/sviluppo\/html5-canvas-e-immagini\/","url":"https:\/\/www.artera.net\/it\/sviluppo\/html5-canvas-e-immagini\/","name":"\u2022 HTML5: Canvas e immagini - Artera","isPartOf":{"@id":"https:\/\/www.artera.net\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.artera.net\/it\/sviluppo\/html5-canvas-e-immagini\/#primaryimage"},"image":{"@id":"https:\/\/www.artera.net\/it\/sviluppo\/html5-canvas-e-immagini\/#primaryimage"},"thumbnailUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/05\/canvas-immagini-1.png","datePublished":"2010-05-07T10:14:41+00:00","dateModified":"2023-02-27T14:58:39+00:00","description":"Leggi dal blog: HTML5: Canvas e immagini. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.","breadcrumb":{"@id":"https:\/\/www.artera.net\/it\/sviluppo\/html5-canvas-e-immagini\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.artera.net\/it\/sviluppo\/html5-canvas-e-immagini\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.artera.net\/it\/sviluppo\/html5-canvas-e-immagini\/#primaryimage","url":"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/05\/canvas-immagini-1.png","contentUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/05\/canvas-immagini-1.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.artera.net\/it\/sviluppo\/html5-canvas-e-immagini\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.artera.net\/it\/"},{"@type":"ListItem","position":2,"name":"HTML5: Canvas e immagini"}]},{"@type":"WebSite","@id":"https:\/\/www.artera.net\/it\/#website","url":"https:\/\/www.artera.net\/it\/","name":"Artera","description":"Swiss Premium Hosting","publisher":{"@id":"https:\/\/www.artera.net\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.artera.net\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/www.artera.net\/it\/#organization","name":"Artera","url":"https:\/\/www.artera.net\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.artera.net\/it\/#\/schema\/logo\/image\/","url":"https:\/\/www.artera.net\/wp-content\/uploads\/2019\/09\/artera-logo.png","contentUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2019\/09\/artera-logo.png","width":300,"height":77,"caption":"Artera"},"image":{"@id":"https:\/\/www.artera.net\/it\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/artera.net\/","https:\/\/www.linkedin.com\/company\/artera\/","https:\/\/www.instagram.com\/artera_swiss\/"]},{"@type":"Person","@id":"https:\/\/www.artera.net\/it\/#\/schema\/person\/48ffb6b3727677643fbfd3ecf0a10aa0","name":"Sergio Ravera","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/secure.gravatar.com\/avatar\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g","caption":"Sergio Ravera"},"description":"Raised in a family tradition of merchants, my entrepreneurial spirit drove me to launch my first e-commerce venture in 1998. My vision and dedication led, in 2002, to the founding of Artera, now a leading brand in premium managed cloud hosting services. As Chief Executive Officer, I lead DHH Switzerland SA, part of the international DHH S.p.A. group, listed on the Milan Stock Exchange with the reference code (AIM \u2013 ISIN: IT0005203622). It is under this brand that the Artera brand continues to grow and thrive. In addition to my commitment to the business world, I am an active researcher in the field of new technologies, always fascinated by cutting-edge innovations in the industry.","sameAs":["https:\/\/www.linkedin.com\/in\/sergioravera\/"],"url":"https:\/\/www.artera.net\/it\/author\/sergio-ravera\/"}]}},"_links":{"self":[{"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts\/1673","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/comments?post=1673"}],"version-history":[{"count":10,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts\/1673\/revisions"}],"predecessor-version":[{"id":216234,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts\/1673\/revisions\/216234"}],"wp:attachment":[{"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/media?parent=1673"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/categories?post=1673"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/tags?post=1673"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}