0

我正在尝试将 SVG 标记的内容绘制到画布上，然后获取流并输出动画 SVG 的视频。直到几个月前，此功能在我的应用程序中才能正常工作。我无法确定是什么导致它现在失败。我在 FireFox 中没有这个问题，只有 Chrome。

经过几个小时的调试，我现在认为，当我在画布上绘制图像时，它会以某种方式污染它。当画布被污染时，之后就无法检索数据。这是绘制到画布上的函数：

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;
}

在应用程序的其他地方，我从画布流中创建了一个 MediaRecorder。用户使用按钮启动和停止它。每当 dataavailable 触发时，数据大小为 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);

为什么窗口创建的图像会污染画布？有人可以告诉我我做错了什么吗？谢谢。

4

0 回答 0