Rellenar polígono en canvas con imagen

Masane · #1 (**permalink**) 08/07/2015, 11:54

Buenas a todos.

Tengo una herramienta en html5 y javascript que toma una imagen (sin suavizar), muestra una paleta de colores dada y permite modificar las diferentes zonas de la imagen con el color elegido de la paleta (como si fuera Paint).

Lo que necesito es que en vez de rellenar con un color plano rellene la area clicada con una imagen de fondo, como imitando una textura. Estoy trabajando con archivos png sin suavizar, pero no termino de encontrar la solución para sustituir las áreas de color por imágenes a modo de textura.

He encontrado un par de librearías por ahí (Fabric y Babylon), pero no termino de encontrar en su documentación cómo hacer esto, y también he mirado documentación sobre las etiquetas svg y polygon de html5, pero tampoco veo cómo cargar un svg a modo de "plantilla" para poder modificarlo y asignarle a cada área o polígono una imagen de fondo de relleno.

¿Alguien sabría indicarme alguna librería o alguna función para poder hacer esto? Es lo último que necesito hacer para terminar la herramienta y me está dando bastantes problemas.

Os dejo el código de la herramienta por si queréis echarle un ojo:

Código HTML:

Ver original<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=windows-1250">
    <title></title>
  </head>
  <body onload="cargarDibujo();">
    <canvas id="dibujo" width="500" height="500" onclick="cambiarColor();" onmousemove="setCoords(event);" style="position: relative; border: 0;"></canvas>
    <hr />
    <div id="colorElegido" style="display: block; width: 100px; height: 100px; border: 1px solid #000;"></div>
    <p id="coords"></p>    
    <hr />
    <button style="display: block; width: 20px; height: 20px; border: 1px solid #000; background-color: #FFFFFF;" onclick="setColor('#FFFFFF');"></button>
    <button style="display: block; width: 20px; height: 20px; border: 1px solid #000; background-color: #FF0000;" onclick="setColor('#FF0000');"></button>
    <button style="display: block; width: 20px; height: 20px; border: 1px solid #000; background-color: #00FF00;" onclick="setColor('#00FF00');"></button>
    <button style="display: block; width: 20px; height: 20px; border: 1px solid #000; background-color: #0000FF;" onclick="setColor('#0000FF');"></button>
    <button style="display: block; width: 20px; height: 20px; border: 1px solid #000; background-color: #000000;" onclick="setColor('#000000');"></button>
  </body>
  
  <script type="text/javascript">
      var colorNuevoHex;
      var mouseX, mouseY;
      var marco = document.getElementById('dibujo');
      var contexto = marco.getContext('2d');
      var imagenCompleta;
      var colorZonaHex;
      var colorZonaRGB;
      
      function cargarDibujo() {
        marco.width = marco.width;
        var img = new Image();
        img.src = 'khatim-kmar.png';
        img.onload = function() {
          contexto.drawImage(img, 0, 0);
          imagenCompleta = contexto.getImageData(0, 0, marco.width, marco.height);
          contexto.putImageData(imagenCompleta, 0, 0);
        }
      }
      
      function setColor(color) {
        colorNuevoHex = color;
        document.getElementById('colorElegido').style.backgroundColor = colorNuevoHex;
      }
      
      function cambiarColor() {
        var imgData = contexto.getImageData(mouseX, mouseY, 1, 1);
        var colorNuevoRGB = hexToRgb(colorNuevoHex);  
        colorZonaRGB = [imgData.data[0], imgData.data[1], imgData.data[2]]; 
        colorZonaHex = rgbToHex(imgData.data[0], imgData.data[1], imgData.data[2]);
        for (var i=0; i < imagenCompleta.data.length; i+=4) {
          // is this pixel the old rgb?
          if ((imagenCompleta.data[i] == imgData.data[0]) && (imagenCompleta.data[i+1] == imgData.data[1]) && (imagenCompleta.data[i+2] == imgData.data[2])){
              // change to your new rgb
              imagenCompleta.data[i] = colorNuevoRGB.r;
              imagenCompleta.data[i+1] = colorNuevoRGB.g;
              imagenCompleta.data[i+2] = colorNuevoRGB.b;
          }
        } 
        
        contexto.putImageData(imagenCompleta, 0, 0);
      }              
      
      function setCoords(e) {
        if(e.offsetX) {
            mouseX = e.offsetX;
            mouseY = e.offsetY;
        }
        else if(e.layerX) {
            mouseX = e.layerX;
            mouseY = e.layerY;
        }
        
        document.getElementById('coords').innerHTML = mouseX+' X' + ', ' + mouseY + ' Y';
      }
      
      function componentToHex(c) {
          var hex = c.toString(16);
          return hex.length == 1 ? "0" + hex : hex;
      }
      
      function rgbToHex(r, g, b) {
          return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
      }
      
      function hexToRgb(hex) {
          // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
          var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
          hex = hex.replace(shorthandRegex, function(m, r, g, b) {
              return r + r + g + g + b + b;
          });
      
          var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
          return result ? {
              r: parseInt(result[1], 16),
              g: parseInt(result[2], 16),
              b: parseInt(result[3], 16)
          } : null;
      }
    </script>  
</html>