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

180
Vistas
SVG to canvas to .webm, not origin-clean

I'm trying to draw the contents of an SVG tag onto a canvas, then get the stream and output a video of the animated SVG. This feature was working correctly in my app until a few months ago. I'm unable to pinpoint what's causing it to now fail. I don't have this issue in FireFox, only Chrome.

From a few hours of debugging, I now think that somehow, when I draw the image on the canvas, it taints it. When a canvas is tainted, there's no way to retrieve the data afterwards. Here's the function that draws on to the canvas:

DrawToCanvas(node) {
    var serializer = new XMLSerializer();
    var source = serializer.serializeToString(node);     // node is the SVG node with the animated content
    var cv = this.Elem("canvas");                        // this.Elem("canvas") returns the canvas node 
    
    // create a file blob of our SVG.
    var blob = new Blob([source], { type: 'image/svg+xml;charset=utf-8' });
    var url = window.URL.createObjectURL(blob);
    var ctx = cv.getContext('2d');
    var img = new Image();

    img.onload = function() {
        ctx.fillStyle = "#f9f9f9";
        ctx.fillRect(0, 0, cv.getAttribute("width"), cv.getAttribute("height"));
        ctx.drawImage(img, 0, 0, cv.getAttribute("width"), cv.getAttribute("height"));
        
        // In the console, if I call ctx.captureStream() here, I get an error: Uncaught DOMException: 
        // Failed to execute 'captureStream' on 'HTMLCanvasElement': Canvas is not origin-clean.

        window.URL.revokeObjectURL(url);
    }
    
    img.src = url;
}

Elsewhere in the app, I create a MediaRecorder from the canvas stream. The user starts and stops it with a button. Whenever dataavailable fires, the data size is 0.

    this.recorder = new MediaRecorder(canvas.captureStream(), { mimeType: 'video/webm' }); // init the recorder
    
    this.recorder.ondataavailable = (function(ev) {
        if (ev.data && ev.data.size > 0) this.chunks.push(ev.data);
    }).bind(this);

Why would an image created by the window taint the canvas? Can someone show me what I'm doing wrong? Thanks.

about 4 years ago · Juan Pablo Isaza
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