{"id":4475,"date":"2010-09-14T18:22:44","date_gmt":"2010-09-14T16:22:44","guid":{"rendered":"https:\/\/www.artera.net\/it\/blog\/?p=4475"},"modified":"2023-02-27T14:55:34","modified_gmt":"2023-02-27T14:55:34","slug":"canvas-cambiare-il-colore-di-unimmagine-e-renderla-semi-trasparente","status":"publish","type":"post","link":"https:\/\/www.artera.net\/it\/sviluppo\/canvas-cambiare-il-colore-di-unimmagine-e-renderla-semi-trasparente\/","title":{"rendered":"Canvas: Cambiare il colore di un&#8217;immagine e renderla semi-trasparente"},"content":{"rendered":"<p><img decoding=\"async\" class=\"alignleft size-full wp-image-4488\" style=\"margin-right:10px\" title=\"Utilizzare il canvas per modificare le immagini\" src=\"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/09\/img.png\" alt=\"Utilizzare il canvas per modificare le immagini\" width=\"173\" height=\"155\" \/>Con l&#8217;articolo di oggi vado a unirmi ai miei colleghi che gi\u00e0 in passato hanno scritto riguardo l&#8217;uso del <a href=\"https:\/\/www.artera.net\/it\/blog\/tag\/canvas\">tag canvas<\/a> e vi presento questo piccolo esperimento.<\/p>\n<p>In uno dei nostri ultimi siti, ci sarebbe stato comodo poter usare un&#8217;<strong>unica immagine, in varianti di colore diverse,<\/strong> senza per\u00f2 dover creare una copia dell&#8217;immagine per ciascuna tonalit\u00e0. L&#8217;immagine \u00e8 <strong>semitrasparente<\/strong> ed \u00e8 presentata di volta in volta su uno <strong>sfondo diverso<\/strong>, quindi nessuna delle tecniche utilizzate in passato mi \u00e8 sembrata adatta allo scopo.<\/p>\n<p>Il <strong>canvas invece sembrava adatto<\/strong> ma purtroppo su <strong>explorer<\/strong> ancora il supporto manca, quindi alla fine \u00e8 risultato utile solo allo scopo di farci qualche esperimento.<\/p>\n<p>L&#8217;idea \u00e8 di caricare un&#8217;immagine all&#8217;interno di un canvas, convertirla in scala di grigi e aggiungere una tonalit\u00e0 a scelta, creando cos\u00ec la variante desiderata.<\/p>\n<h3>Caricare un&#8217;immagine all&#8217;interno del canvas<\/h3>\n<p>Il primo passo da fare \u00e8 quello di caricare i dati dell&#8217;immagine all&#8217;interno del canvas. La sorgente verr\u00e0 presa da un <strong>tag IMG<\/strong>.<br \/>\nSupponendo di non conoscere a priori la dimensione dell&#8217;immagine sorgente, impostiamo inizialmente il canvas per avere una dimensione di 0x0 pixel, per poi ridimensionarla tramite il javascript alla stessa grandezza dell&#8217;immagine sorgente.<\/p>\n<p>L&#8217;html, \u00e8 semplicemente costituito da questi due elementi:<\/p>\n<p>[html gutter=&#8221;false&#8221;]<br \/>\n&lt;img id=&quot;source&quot; src=&quot;data:image\/gif;base64,&#8230;&quot; alt=&quot;Hosting Home&quot; \/&gt;<br \/>\n&lt;canvas id=&quot;dest&quot; width=&quot;0&quot; height=&quot;0&quot;&gt;&lt;\/canvas&gt;<br \/>\n[\/html]<\/p>\n<p>Da notare che nell&#8217;esempio<strong> inseriamo i dati dell&#8217;immagine direttamente nell&#8217;html<\/strong> codificati in base64. Questo perch\u00e9 a causa della <strong>same origin policy<\/strong> non possiamo leggere i dati di un&#8217;immagine proveniente da un dominio diverso da quello della pagina html.<\/p>\n<p>A questo punto per caricare l&#8217;immagine nel canvas, ci basta utilizzare la funzione drawImage, passandogli l&#8217;elemento IMG in input.<\/p>\n<p>[javascript]<br \/>\nvar img = document.id(&#8216;source&#8217;);<br \/>\nvar canvas = document.id(&#8216;dest&#8217;);<\/p>\n<p>\/\/ Imposto il canvas delle stesse dimensioni dell&#8217;immagine originale<br \/>\nvar s = img.getSize();<br \/>\ncanvas.set(&#8216;width&#8217;, s.x);<br \/>\ncanvas.set(&#8216;height&#8217;, s.y);<br \/>\n\/\/ Ora potremmo anche nascondere l&#8217;immagine originale<br \/>\n\/\/img.setStyle(&#8216;display&#8217;, &#8216;none&#8217;);<\/p>\n<p>\/\/ Disegno l&#8217;immagine all&#8217;interno del canvas<br \/>\nvar context = canvas.getContext(&#8216;2d&#8217;);<br \/>\ncontext.drawImage(img, 0, 0);<br \/>\n[\/javascript]<\/p>\n<p>PS: per semplicit\u00e0 nell&#8217;esempio abbiamo utilizzato <a href=\"https:\/\/www.artera.net\/it\/blog\/tag\/mootools\">MooTools<\/a>, ma il codice \u00e8 abbastanza generico da essere facilmente adattabile ad altri framework javascript.<\/p>\n<h3>Manipoliamo l&#8217;immagine<\/h3>\n<p>Caricata l&#8217;immagine, possiamo leggerne i dati e passandoci l&#8217;intera immagine pixel per pixel, variarne la tonalit\u00e0.<\/p>\n<p>I dati dei pixel possono essere recuperati con la funzione <em>getImageData<\/em> del <em>context<\/em>.<br \/>\nPer motivi di performance salviamo l&#8217;<em>array<\/em> <em>data<\/em> contenente i valori in una variabile temporanea. Questa operazione velocizza notevolmente la lettura in Firefox per qualche ragione.<\/p>\n<p>L&#8217;array dei dati va girato di 4 byte per volta. Questo perch\u00e9 i valori contenuti al suo interno sono 4 per ogni pixel, ovvero i valori dei canali RGB e A (per la trasparenza).<\/p>\n<p>Per ogni pixel, calcolo quindi la luminanza (variabile basecol) e, dato che ho scelto di rendere verde il risultato, moltiplico per 1,5 il pixel del verde (non andando oltre il valore massimo di 255).<\/p>\n<p>Al fine di rendere le cose pi\u00f9 interessanti ho deciso anche di rendere completamente trasparenti i pixel bianchi.<\/p>\n<p>Eccovi il risultato:<br \/>\n[iframe src=&#8221;\/\/jsfiddle.net\/85PBv\/2\/embedded\/&#8221;]<\/p>\n","protected":false},"excerpt":{"rendered":"<p><img decoding=\"async\" class=\"alignleft size-full wp-image-4488\" style=\"margin-right:10px\" title=\"Utilizzare il canvas per modificare le immagini\" src=\"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/09\/img.png\" alt=\"Utilizzare il canvas per modificare le immagini\" width=\"173\" height=\"155\" \/>Con l&#8217;articolo di oggi vado a unirmi ai miei colleghi che gi\u00e0 in passato hanno scritto riguardo l&#8217;uso del <a href=\"https:\/\/www.artera.net\/it\/blog\/tag\/canvas\">tag canvas<\/a> e vi presento questo piccolo esperimento.<br \/>\nIn uno dei nostri ultimi siti, ci sarebbe stato comodo poter usare un&#8217;<strong>unica immagine, in varianti di colore diverse,<\/strong> senza per\u00f2 dover creare una copia dell&#8217;immagine per ciascuna tonalit\u00e0.<\/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,106,96],"class_list":["post-4475","post","type-post","status-publish","format-standard","hentry","category-sviluppo","tag-canvas","tag-html5","tag-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>\u2022 Canvas: Cambiare il colore di un&#039;immagine e renderla semi-trasparente - Artera<\/title>\n<meta name=\"description\" content=\"Leggi dal blog: Canvas: Cambiare il colore di un&#039;immagine e renderla semi-trasparente. 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\/canvas-cambiare-il-colore-di-unimmagine-e-renderla-semi-trasparente\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u2022 Canvas: Cambiare il colore di un&#039;immagine e renderla semi-trasparente - Artera\" \/>\n<meta property=\"og:description\" content=\"Leggi dal blog: Canvas: Cambiare il colore di un&#039;immagine e renderla semi-trasparente. 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\/canvas-cambiare-il-colore-di-unimmagine-e-renderla-semi-trasparente\/\" \/>\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-09-14T16:22:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-27T14:55:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/09\/img.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=\"3 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\\\/canvas-cambiare-il-colore-di-unimmagine-e-renderla-semi-trasparente\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/canvas-cambiare-il-colore-di-unimmagine-e-renderla-semi-trasparente\\\/\"},\"author\":{\"name\":\"Sergio Ravera\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#\\\/schema\\\/person\\\/48ffb6b3727677643fbfd3ecf0a10aa0\"},\"headline\":\"Canvas: Cambiare il colore di un&#8217;immagine e renderla semi-trasparente\",\"datePublished\":\"2010-09-14T16:22:44+00:00\",\"dateModified\":\"2023-02-27T14:55:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/canvas-cambiare-il-colore-di-unimmagine-e-renderla-semi-trasparente\\\/\"},\"wordCount\":556,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/canvas-cambiare-il-colore-di-unimmagine-e-renderla-semi-trasparente\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2010\\\/09\\\/img.png\",\"keywords\":[\"canvas\",\"html5\",\"javascript\"],\"articleSection\":[\"Sviluppo\"],\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/canvas-cambiare-il-colore-di-unimmagine-e-renderla-semi-trasparente\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/canvas-cambiare-il-colore-di-unimmagine-e-renderla-semi-trasparente\\\/\",\"url\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/canvas-cambiare-il-colore-di-unimmagine-e-renderla-semi-trasparente\\\/\",\"name\":\"\u2022 Canvas: Cambiare il colore di un'immagine e renderla semi-trasparente - Artera\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/canvas-cambiare-il-colore-di-unimmagine-e-renderla-semi-trasparente\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/canvas-cambiare-il-colore-di-unimmagine-e-renderla-semi-trasparente\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2010\\\/09\\\/img.png\",\"datePublished\":\"2010-09-14T16:22:44+00:00\",\"dateModified\":\"2023-02-27T14:55:34+00:00\",\"description\":\"Leggi dal blog: Canvas: Cambiare il colore di un'immagine e renderla semi-trasparente. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/canvas-cambiare-il-colore-di-unimmagine-e-renderla-semi-trasparente\\\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/canvas-cambiare-il-colore-di-unimmagine-e-renderla-semi-trasparente\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/canvas-cambiare-il-colore-di-unimmagine-e-renderla-semi-trasparente\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2010\\\/09\\\/img.png\",\"contentUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2010\\\/09\\\/img.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/canvas-cambiare-il-colore-di-unimmagine-e-renderla-semi-trasparente\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.artera.net\\\/it\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Canvas: Cambiare il colore di un&#8217;immagine e renderla semi-trasparente\"}]},{\"@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 Canvas: Cambiare il colore di un'immagine e renderla semi-trasparente - Artera","description":"Leggi dal blog: Canvas: Cambiare il colore di un'immagine e renderla semi-trasparente. 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\/canvas-cambiare-il-colore-di-unimmagine-e-renderla-semi-trasparente\/","og_locale":"it_IT","og_type":"article","og_title":"\u2022 Canvas: Cambiare il colore di un'immagine e renderla semi-trasparente - Artera","og_description":"Leggi dal blog: Canvas: Cambiare il colore di un'immagine e renderla semi-trasparente. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.","og_url":"https:\/\/www.artera.net\/it\/sviluppo\/canvas-cambiare-il-colore-di-unimmagine-e-renderla-semi-trasparente\/","og_site_name":"Artera","article_publisher":"https:\/\/www.facebook.com\/artera.net\/","article_published_time":"2010-09-14T16:22:44+00:00","article_modified_time":"2023-02-27T14:55:34+00:00","og_image":[{"url":"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/09\/img.png","type":"","width":"","height":""}],"author":"Sergio Ravera","twitter_card":"summary_large_image","twitter_misc":{"Scritto da":"Sergio Ravera","Tempo di lettura stimato":"3 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.artera.net\/it\/sviluppo\/canvas-cambiare-il-colore-di-unimmagine-e-renderla-semi-trasparente\/#article","isPartOf":{"@id":"https:\/\/www.artera.net\/it\/sviluppo\/canvas-cambiare-il-colore-di-unimmagine-e-renderla-semi-trasparente\/"},"author":{"name":"Sergio Ravera","@id":"https:\/\/www.artera.net\/it\/#\/schema\/person\/48ffb6b3727677643fbfd3ecf0a10aa0"},"headline":"Canvas: Cambiare il colore di un&#8217;immagine e renderla semi-trasparente","datePublished":"2010-09-14T16:22:44+00:00","dateModified":"2023-02-27T14:55:34+00:00","mainEntityOfPage":{"@id":"https:\/\/www.artera.net\/it\/sviluppo\/canvas-cambiare-il-colore-di-unimmagine-e-renderla-semi-trasparente\/"},"wordCount":556,"commentCount":0,"publisher":{"@id":"https:\/\/www.artera.net\/it\/#organization"},"image":{"@id":"https:\/\/www.artera.net\/it\/sviluppo\/canvas-cambiare-il-colore-di-unimmagine-e-renderla-semi-trasparente\/#primaryimage"},"thumbnailUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/09\/img.png","keywords":["canvas","html5","javascript"],"articleSection":["Sviluppo"],"inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.artera.net\/it\/sviluppo\/canvas-cambiare-il-colore-di-unimmagine-e-renderla-semi-trasparente\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.artera.net\/it\/sviluppo\/canvas-cambiare-il-colore-di-unimmagine-e-renderla-semi-trasparente\/","url":"https:\/\/www.artera.net\/it\/sviluppo\/canvas-cambiare-il-colore-di-unimmagine-e-renderla-semi-trasparente\/","name":"\u2022 Canvas: Cambiare il colore di un'immagine e renderla semi-trasparente - Artera","isPartOf":{"@id":"https:\/\/www.artera.net\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.artera.net\/it\/sviluppo\/canvas-cambiare-il-colore-di-unimmagine-e-renderla-semi-trasparente\/#primaryimage"},"image":{"@id":"https:\/\/www.artera.net\/it\/sviluppo\/canvas-cambiare-il-colore-di-unimmagine-e-renderla-semi-trasparente\/#primaryimage"},"thumbnailUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/09\/img.png","datePublished":"2010-09-14T16:22:44+00:00","dateModified":"2023-02-27T14:55:34+00:00","description":"Leggi dal blog: Canvas: Cambiare il colore di un'immagine e renderla semi-trasparente. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.","breadcrumb":{"@id":"https:\/\/www.artera.net\/it\/sviluppo\/canvas-cambiare-il-colore-di-unimmagine-e-renderla-semi-trasparente\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.artera.net\/it\/sviluppo\/canvas-cambiare-il-colore-di-unimmagine-e-renderla-semi-trasparente\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.artera.net\/it\/sviluppo\/canvas-cambiare-il-colore-di-unimmagine-e-renderla-semi-trasparente\/#primaryimage","url":"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/09\/img.png","contentUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/09\/img.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.artera.net\/it\/sviluppo\/canvas-cambiare-il-colore-di-unimmagine-e-renderla-semi-trasparente\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.artera.net\/it\/"},{"@type":"ListItem","position":2,"name":"Canvas: Cambiare il colore di un&#8217;immagine e renderla semi-trasparente"}]},{"@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\/4475","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=4475"}],"version-history":[{"count":1,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts\/4475\/revisions"}],"predecessor-version":[{"id":216419,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts\/4475\/revisions\/216419"}],"wp:attachment":[{"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/media?parent=4475"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/categories?post=4475"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/tags?post=4475"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}