Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

388
Vistas
How do I fill the transparent area inside an image using javascript?

I added a white border to a PNG image with Konvajs example

konvajs link

I want to turn the transparent area inside the white border to white. So I want to paint the windows of the car white. (Red areas are transparent.)

example

Expected result: result

about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

One thing you could maybe do is converting you image to a SVG.

You would then have a path for your car windows with some class. You could afterward change the style of the SVG class in JS.

enter image description here

enter image description here

about 4 years ago · Juan Pablo Isaza Denunciar

0

To fix the problem you want background color white. As your link there are a function called removeTransparency it makes the image background color white see it.

      // make all pixels opaque 100% (except pixels that 100% transparent)
      function removeTransparency(canvas) {
        var ctx = canvas.getContext('2d');

        var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        var nPixels = imageData.data.length;
        for (var i = 3; i < nPixels; i += 4) {
          if (imageData.data[i] > 0) {
            imageData.data[i] = 255;
          }
        }
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.putImageData(imageData, 0, 0);
        return canvas;
      }
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda