initial commit

1 files changed, 339 insertions, 0 deletions

diff --git a/files/ca/web/api/canvas_api/tutorial/using_images/index.html b/files/ca/web/api/canvas_api/tutorial/using_images/index.html
new file mode 100644
index 0000000000..6d568024ee
--- /dev/null
+++ b/files/ca/web/api/canvas_api/tutorial/using_images/index.html
@@ -0,0 +1,339 @@
+---
+title: Usar imatges
+slug: Web/API/Canvas_API/Tutorial/Using_images
+tags:
+  - Advanced
+  - Canvas
+  - Graphics
+  - HTML
+  - Tutorial
+translation_of: Web/API/Canvas_API/Tutorial/Using_images
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations" )}}</div>
+
+<div class="summary">
+<p>Fins ara hem creat les nostres pròpies <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes">formes</a> i <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">aplicat estils</a> a elles. Una de les característiques més interessants de {{HTMLElement("canvas")}} és la capacitat d'usar imatges.  Aquestes poden ser usades per fer composicions fotogràfiques dinàmiques o com a telons de fons de gràfics, per sprites en jocs, etcètera. Les imatges externes es poden utilitzar en qualsevol format compatible amb el navegador, com PNG, GIF o JPEG. Fins i tot es pot utilitzar la imatge produïda per altres elements de canvas a la mateixa pàgina que la font!</p>
+</div>
+
+<p> Importar imatges en un llenç és bàsicament un procés de dos passos:</p>
+
+<ol>
+ <li>Obtenir una referència a un objecte {{domxref("HTMLImageElement")}} o a un altre element de canvas com a font. També és possible utilitzar imatges proporcionant una URL.</li>
+ <li>Dibuixi la imatge en el llenç usant la funció <code>drawImage()</code>.</li>
+</ol>
+
+<p>Feu un cop d'ull a com fer això.</p>
+
+<h2 id="Obtenir_imatges_per_dibuixar">Obtenir imatges per dibuixar</h2>
+
+<p>L'API de canvas pot utilitzar qualsevol dels següents tipus de dades com a font d'imatge:</p>
+
+<dl>
+ <dt>{{domxref("HTMLImageElement")}}</dt>
+ <dd>Aquestes són imatges creades usant el constructor <code>Image()</code>, així com qualsevol element {{HTMLElement("img")}}.</dd>
+ <dt>{{domxref("SVGImageElement")}}</dt>
+ <dd>Aquestes són imatges incrustades usant l'element {{SVGElement("image")}}.</dd>
+ <dt>{{domxref("HTMLVideoElement")}}</dt>
+ <dd>L'ús d'un element HTML {{HTMLElement("video")}} com a font d'imatge, pren el marc actual del vídeo i ho utilitza com a imatge.</dd>
+ <dt>{{domxref("HTMLCanvasElement")}}</dt>
+ <dd>Es pot utilitzar un altre element {{HTMLElement("canvas")}} com la seva font d'imatge</dd>
+</dl>
+
+<p>Aquestes fonts es refereixen col·lectivament pel tipus {{domxref("CanvasImageSource")}}.</p>
+
+<p>Hi ha diverses maneres d'obtenir imatges per usar-les en un llenç.</p>
+
+<h3 id="Usar_imatges_de_la_mateixa_pàgina">Usar imatges de la mateixa pàgina</h3>
+
+<p>Es pot obtenir una referència a les imatges en la mateixa pàgina que el llenç utilitzant una de les següents opcions:</p>
+
+<ul>
+ <li>La col·lecció {{domxref("document.images")}}.</li>
+ <li>El mètode {{domxref("document.getElementsByTagName()")}}.</li>
+ <li>Si es coneix l'ID de la imatge específica que es desitja utilitzar, es pot usar {{domxref("document.getElementById()")}} per recuperar aquesta imatge específica.</li>
+</ul>
+
+<h3 id="Usar_imatges_d'altres_dominis">Usar imatges d'altres dominis</h3>
+
+<p>Usant l'atribut {{htmlattrxref("crossorigin", "img")}} d'un element {{HTMLElement("img")}} (reflectit per la propietat {{domxref("HTMLImageElement.crossOrigin")}} property), es pot sol·licitar permís per carregar una imatge d'un altre domini per usar-la cridant a <code>drawImage()</code>. Si el domini d'allotjament permet l'accés de domini creuat a la imatge, la imatge es pot utilitzar en el  llenç sense corrompre's; en cas contrari, usar la imatge <a href="https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F">corromprà el llenç</a>.</p>
+
+<h3 id="Usar_altres_elements_de_canvas">Usar altres elements de canvas</h3>
+
+<p>Igual que amb les imatges normals, accedim a altres elements de canvas usant el mètode {{domxref("document.getElementsByTagName()")}} o {{domxref("document.getElementById()")}}. Hem d'estar segurs d'haver dibuixat alguna cosa en el llenç font abans d'usar-ho en el llenç de destinació.</p>
+
+<p>Un dels usos més pràctics d'això seria usar un segon element de canvas com a vista en miniatura de l'altre canvas més gran.</p>
+
+<h3 id="Crear_una_imatge_des_de_zero">Crear una imatge des de zero</h3>
+
+<p>Una altra opció és crear nous {{domxref("HTMLImageElement")}} en un script. Per fer-ho, hem d'utilitzar el constructor adequat <code>Image()</code>:</p>
+
+<pre class="brush: js">var img = new Image();   // Create new img element
+img.src = 'myImage.png'; // Set source path
+</pre>
+
+<p>Quan s'executa aquest script, la imatge comença a carregar-se.</p>
+
+<p>Si intentem cridar <code>drawImage()</code> abans que la imatge s'hagi acabat de carregar, no farà res (o, en navegadors antics, fins i tot pot arribar a produir una excepció). Per tant, ens hem d'assegurar d'utilitzar l'esdeveniment <em>load</em> per no intentar-ho abans de que la imatge es carregui:</p>
+
+<pre class="brush: js">var img = new Image();   // Create new img element
+img.addEventListener('load', function() {
+  // execute drawImage statements here
+}, false);
+img.src = 'myImage.png'; // Set source path
+</pre>
+
+<p>Si només s'utilitza una imatge externa, això pot ser un bon enfocament, però una vegada que es necessiti rastrejar més d'una, es necessitarà recórrer a una mica més intel·ligent. Està fora de l'abast d'aquest tutorial examinar tàctiques de precàrrega d'imatges, però cal tenir-ho en ment.</p>
+
+<h3 id="Incrustar_una_imatge_mitjançant_dades_URL">Incrustar una imatge mitjançant dades: URL</h3>
+
+<p>Una altra forma possible d'incloure imatges és a través de les <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/data_URIs">dades: url</a>. Les URLs de dades permeten definir completament una imatge com una cadena de caràcters codificats en Base64, directament en el codi.</p>
+
+<pre class="brush: js">var img = new Image();   // Create new img element
+img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
+</pre>
+
+<p>Un avantatge de les URL de dades és que la imatge resultant està disponible immediatament sense un altre viatge d'anada i tornada al servidor. Un altre avantatge potencial és que també és possible encapsular en un sol arxiu tots els nostres arxius <a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a>, <a href="/en-US/docs/Web/JavaScript" title="/en-US/docs/Web/JavaScript">JavaScript</a>, <a href="/en-US/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a> i imatges, fent-los més portàtils a altres ubicacions.</p>
+
+<p>Alguns desavantatges d'aquest mètode són que la imatge no està emmagatzemada a la memòria cau, i per a imatges més grans la url codificada pot arribar a ser bastant llarga.</p>
+
+<h3 id="Usar_marcs_d'un_vídeo">Usar marcs d'un vídeo</h3>
+
+<p>També es pot utilitzar marcs d'un vídeo, presentat per un element {{HTMLElement("video")}} (fins i tot si el vídeo no és visible). Per exemple, si tenim un element {{HTMLElement("video")}} amb l'ID "myvideo", es pot fer:</p>
+
+<pre class="brush: js">function getMyVideo() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    return document.getElementById('myvideo');
+  }
+}
+</pre>
+
+<p>Això retorna l'objecte {{domxref("HTMLVideoElement")}} per al vídeo, que, com s'ha explicat anteriorment, és un dels objectes que es pot utilitzar com <code>CanvasImageSource</code>.</p>
+
+<h2 id="Dibuixar_imatges">Dibuixar imatges</h2>
+
+<p>Una vegada que tenim una referència al nostre objecte d'imatge font podem usar el mètode <code>drawImage()</code> para representar-la en el llenç. Com veurem més endavant el mètode <code>drawImage()</code> està sobrecarregat i té diverses variants. En la seva forma més bàsica, es veu així:</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y)")}}</dt>
+ <dd>Dibuixa el <code>CanvasImageSource</code> especificat pel paràmetre <code>image</code> en les coordenades (<code>x</code>, <code>y</code>).</dd>
+</dl>
+
+<div class="note">
+<p>Les imatges SVG han d'especificar un amplada i una alçada en l'element arrel &lt;svg&gt;.</p>
+</div>
+
+<h3 id="Exemple_Un_gràfic_de_línia_senzilla">Exemple: Un gràfic de línia senzilla</h3>
+
+<p>En el següent exemple, utilitzarem una imatge externa com a fons per un petit gràfic de línia. L'ús de fons pot fer que el script sigui considerablement més petit perquè evitem la necessitat de codi per generar el fons. En aquest exemple, només estem utilitzant una imatge, per la qual cosa s'utilitza el controlador d'esdeveniments <code>load</code> de l'objecte image per executar les sentències de dibuix. El mètode <code>drawImage()</code> col·loca el fons en la coordenada (0,0), que és la cantonada superior esquerra del llenç.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="180" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js;highlight[5]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var img = new Image();
+  img.onload = function() {
+    ctx.drawImage(img, 0, 0);
+    ctx.beginPath();
+    ctx.moveTo(30, 96);
+    ctx.lineTo(70, 66);
+    ctx.lineTo(103, 76);
+    ctx.lineTo(170, 15);
+    ctx.stroke();
+  };
+  img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png';
+}</pre>
+
+<p><span class="s3gt_translate_tooltip_variant" id="s3gt_translate_tooltip_variant_to_id_0">El gràfic resultant és el següent</span>:</p>
+
+<p>{{EmbedLiveSample("Example_A_simple_line_graph", 220, 160, "https://mdn.mozillademos.org/files/206/Canvas_backdrop.png")}}</p>
+
+<h2 id="Escalar">Escalar</h2>
+
+<p>La segona variant del mètode <code>drawImage()</code> afegeix dos nous paràmetres i ens permet col·locar imatges a escala en el llenç.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y, width, height)")}}</dt>
+ <dd>Això afegeix els paràmetres <code>width</code> i <code>height</code>, que indiquen la grandària al que s'ha d'escalar la imatge en dibuixar-la sobre el llenç.</dd>
+</dl>
+
+<h3 id="Exemple_Mosaic_d'una_imatge">Exemple: Mosaic d'una imatge</h3>
+
+<p>En aquest exemple, usarem una imatge com a fons de pantalla i la repetirem diverses vegades sobre el llenç. Això es fa, simplement, fent un bucle i col·locant les imatges escalades en diferents posicions. En el codi següent, el primer cicle de bucle itera sobre les files. El segon cicle <code>for</code> itera sobre les columnes. La imatge s'escala a un terç de la seva grandària original, que és de 50x38 píxels.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Les imatges poden tornar-se borroses en augmentar l'escala o granuloses si es redueixen massa. Escalar és millor no fer-ho, si tenim una mica de text que ha de seguir sent llegible.</p>
+</div>
+
+<div class="hidden">
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var img = new Image();
+  img.onload = function() {
+    for (var i = 0; i &lt; 4; i++) {
+      for (var j = 0; j &lt; 3; j++) {
+        ctx.drawImage(img, j * 50, i * 38, 50, 38);
+      }
+    }
+  };
+  img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+}</pre>
+
+<p>El llenç resultant es veu així:</p>
+
+<p>{{EmbedLiveSample("Example_Tiling_an_image", 160, 160, "https://mdn.mozillademos.org/files/251/Canvas_scale_image.png")}}</p>
+
+<h2 id="Retallar">Retallar</h2>
+
+<p>La tercera i última variant del mètode <code>drawImage()</code> té vuit paràmetres a més de la font d'imatge. Ens permet retallar una secció de la imatge font, després escalar-la i dibuixar-la en el llenç.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)")}}</dt>
+ <dd>Donada una <code>image</code>, aquesta funció pren l'àrea de la imatge font especificada pel rectangle, la cantonada superior esquerra de la qual és (<code>sx</code>, <code>sy</code>) i l'amplada de la qual i l'alçada són <code>sWidth</code> i <code>sHeight</code> i la dibuixa en el llenç, col·locant-la sobre el llenç a (<code>dx</code>, <code>dy</code>) i escalant-la a la grandària especificada per <code>dWidth</code> i <code>dHeight</code>.</dd>
+</dl>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/225/Canvas_drawimage.jpg" style="float: right; height: 290px; width: 300px;">Per entendre realment què fa això, pot ajudar, mirar la imatge a la dreta. Els primers quatre paràmetres defineixen la ubicació i la grandària del retall en la imatge font. Els últims quatre paràmetres defineixen el rectangle en el qual dibuixar la imatge sobre el llenç de destinació.</p>
+
+<p>El retallar pot ser una eina útil quan es desitja fer composicions. Es pot tenir tots els elements en un sol arxiu d'imatge i usar aquest mètode per compondre un dibuix complet. Per exemple, si es vol fer una gràfic, tenint una imatge PNG que contingui tot el text necessari en un sol arxiu i depenent de les dades, es podria canviar l'escala del gràfic amb bastant facilitat. Un altre avantatge és que no es necessita carregar cada imatge individualment, la qual cosa millora el rendiment de la càrrega.</p>
+
+<h3 id="Exemple_Enquadrar_una_imatge">Exemple: Enquadrar una imatge</h3>
+
+<p>En aquest exemple, usarem el mateix rinoceront que en l'exemple anterior, però li retallarem el cap i el compondrem en un marc d'imatge. La imatge del marc és una imatge PNG de 24 bits que inclou una ombra. A causa que les imatges PNG de 24 bits inclouen un canal alfa complet de 8 bits, a diferència de les imatges GIF i PNG de 8 bits, es poden col·locar en qualsevol fons sense que preocupi el color mat.</p>
+
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+   &lt;div style="display:none;"&gt;
+     &lt;img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227"&gt;
+     &lt;img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150"&gt;
+   &lt;/div&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<pre class="brush: js">function draw() {
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+
+  // Draw slice
+  ctx.drawImage(document.getElementById('source'),
+                33, 71, 104, 124, 21, 20, 87, 104);
+
+  // Draw frame
+  ctx.drawImage(document.getElementById('frame'), 0, 0);
+}</pre>
+
+<p>Aquesta vegada hem pres un enfocament diferent per carregar les imatges. En lloc de carregar-les creant nous objectes {{domxref("HTMLImageElement")}}, les incloem com a etiquetes {{HTMLElement("img")}} directament en el nostre codi font HTML i recuperem les imatges d'aquestes . Les imatges s'oculten de la sortida, establint la propietat CSS {{cssxref("display")}} a <em>none</em> per a aquestes imatges.</p>
+
+<p>{{EmbedLiveSample("Example_Framing_an_image", 160, 160, "https://mdn.mozillademos.org/files/226/Canvas_drawimage2.jpg")}}</p>
+
+<p>El propi script és molt senzill. Cada {{HTMLElement("img")}} se li assigna un atribut ID, la qual cosa facilita la selecció dels mateixos mitjançant {{domxref("document.getElementById()")}}. A continuació, simplement usem <code>drawImage()</code> per retallar el rinoceront de la primera imatge i escalar-lo en el llenç, després dibuixem el marc en la part superior usant una segona crida a <code>drawImage()</code>.</p>
+
+<h2 id="Exemple_de_galeria_d'art">Exemple de galeria d'art</h2>
+
+<p>En l'últim exemple d'aquest capítol, construirem una petita galeria d'art. La galeria consisteix en una taula que conté diverses imatges. Quan es carrega la pàgina, s'insereix un element {{HTMLElement("canvas")}} per a cada imatge i es dibuixa un marc al seu voltant.</p>
+
+<p>En aquest cas, cada imatge té una amplada i alçada fixa, igual que el marc que es dibuixa al seu al voltant. Es pot millorar el script (seqüència de comandaments) perquè usi l'amplada i l'alçada de la imatge, perquè el marc s'adapti perfectament al seu voltant.</p>
+
+<p>El següent codi ha de ser autoexplicatiu. Recorrem el contenidor {{domxref("document.images")}} i afegim nous elements canvas. Probablement l'única cosa que cal tenir en compte, per a aquells que no estan tan familiaritzats amb el DOM, és l'ús del mètode {{domxref("Node.insertBefore")}}. <code>insertBefore()</code> és un mètode del node pare (una cel·la de taula) de l'element (image) en que previament inserirem un nou node (l'element canvas).</p>
+
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+     &lt;table&gt;
+      &lt;tr&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5399/gallery_1.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5401/gallery_2.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5403/gallery_3.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5405/gallery_4.jpg"&gt;&lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;tr&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5407/gallery_5.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5409/gallery_6.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5411/gallery_7.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5413/gallery_8.jpg"&gt;&lt;/td&gt;
+      &lt;/tr&gt;
+     &lt;/table&gt;
+     &lt;img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150"&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p><span id="result_box" lang="ca"><span>I aquí hi ha una mica de CSS per fer que les coses es vegin bé</span></span>:</p>
+
+<pre class="brush: css">body {
+  background: 0 -100px repeat-x url(https://mdn.mozillademos.org/files/5415/bg_gallery.png) #4F191A;
+  margin: 10px;
+}
+
+img {
+  display: none;
+}
+
+table {
+  margin: 0 auto;
+}
+
+td {
+  padding: 15px;
+}
+</pre>
+
+<p>Javascript ho lliga tot junt, per dibuixar les imatges emmarcades:</p>
+
+<pre class="brush: js">function draw() {
+
+  // Loop through all images
+  for (var i = 0; i &lt; document.images.length; i++) {
+
+    // Don't add a canvas for the frame image
+    if (document.images[i].getAttribute('id') != 'frame') {
+
+      // Create canvas element
+      canvas = document.createElement('canvas');
+      canvas.setAttribute('width', 132);
+      canvas.setAttribute('height', 150);
+
+      // Insert before the image
+      document.images[i].parentNode.insertBefore(canvas,document.images[i]);
+
+      ctx = canvas.getContext('2d');
+
+      // Draw image to canvas
+      ctx.drawImage(document.images[i], 15, 20);
+
+      // Add frame
+      ctx.drawImage(document.getElementById('frame'), 0, 0);
+    }
+  }
+}</pre>
+
+<p>{{EmbedLiveSample("Art_gallery_example", 725, 400)}}</p>
+
+<h2 id="Controlar_el_comportament_d'escalat_de_la_imatge">Controlar el comportament d'escalat de la imatge</h2>
+
+<p>Com es va esmentar anteriorment, l'escalat d'imatges pot donar com a resultat objectes borrosos o bloquejats a causa del procés d'escalat. Es pot utilitzar la propietat {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} del context de dibuix, per controlar l'ús d'algoritmes de suavitzat d'imatge en escalar imatges dins del seu context. Per defecte, això és <code>true</code>, la qual cosa significa que les imatges se suavitzaran en escalar-les. Aquesta característica es pot deshabilitar d'aquesta manera:</p>
+
+<pre class="brush: js">ctx.mozImageSmoothingEnabled = false;
+ctx.webkitImageSmoothingEnabled = false;
+ctx.msImageSmoothingEnabled = false;
+ctx.imageSmoothingEnabled = false;
+</pre>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations")}}</p>