Question

我的网站允许用户同时记录画布并在画布上绘图。如果用户开始录制画布并开始在画布上绘制画布上的绘图，它将开始拉伸。有人告诉我，多线程网络工作者应该能够解决问题。但是我不知道该如何开始。

有人可以指导我吗？我应该在postmessage / onmessage中加入什么？

var recordUrl;
var audioUrl;
var audioStream;
var audiorecorder;
var elementToShare = document.getElementById("elementToShare");
var recorder = RecordRTC(elementToShare, {
    type: 'canvas'
});

document.getElementById('start').onclick = function() {

    /*
    <script id="worker" type="javascript/worker">

    <!--M KY -->
        multithreading
        var blob = new Blob([document.getElementById('worker').textContent]);
        var worker = new Worker(window.webkitURL.revokeObjectURL(blob));
        URL.revokeObjectURL(blob);
        return worker;

        worker.onmessage = function(event) {

        }

        worker.postnmessage = function(event) {

        }
        */
    $('#record').trigger('click');

    if (!audioStream)
        navigator.getUserMedia(audioConstraints, function(stream) {
            if (window.IsChrome) stream = new window.MediaStream(stream.getAudioTracks());
            audioStream = stream;

            // "audio" is a default type
            audiorecorder = window.RecordRTC(stream, {
                type: 'audio',
                bufferSize: typeof params.bufferSize == 'undefined' ? 16384 : params.bufferSize,
                sampleRate: typeof params.sampleRate == 'undefined' ? 44100 : params.sampleRate,
                leftChannel: params.leftChannel || false,
                disableLogs: params.disableLogs || false
            });
            audiorecorder.startRecording();
        }, function() {});
    else {
        audio.src = URL.createObjectURL(audioStream);
        audio.muted = true;
        audio.play();
        if (audiorecorder) audiorecorder.startRecording();
    }

    window.isAudio = true;

    recorder.startRecording();
    document.getElementById('start').disabled = true;
    setTimeout(function() {
        document.getElementById('stop').disabled = false;
    }, 1000);
//worker.terminate();
// }
};

画布代码

<div id="cover">
                                <!-- <canvas id="fakecanvas" width="890" height="1267" style="z-index: 2; position: absolute;left:18%"></canvas> -->
                                <canvas id="canvas" width="890" height="1267" style="z-index: 1; border:1px solid black; position: absolute;"></canvas>
                            </div>                          
                        </div>
                    </section>                  
                    <section id="section-2">
                        <div style="width: 100%; height:5%; float:left;">
                        <a id="capture2" onclick="capFunction2();">
                            <input type="image" name="screenshot2" value="Save This Page" style="float: right; width:25px; height:25px;" src="img/camera.png">
                        </a>
                        <script>
                        function downloadCanvas2(link, canvasId, filename) {
                            html2canvas([document.getElementById(canvasId)], {
                                onrendered: function(cvs2) {
                                    //var canvasData = cvs2.toDataURL('image/png');
                                    var link = document.createElement("a");
                                    link.href = cvs2.toDataURL();
                                    link.download = filename;
                                    link.click();
                                }
                            });
                        }

                        document.getElementById('capture2').addEventListener('click', function() {
                            var currentTime2 = new Date().YYYYMMDDHHMMSS();
                            downloadCanvas2(this, 'viewer2', currentTime2 + '.jpg');    
                            }, false);
                        </script>

Answer 1

javaScript是单线程的。每个窗口只有一个javascript线程，通常称为浏览器UI线程（“线程”并不一定适用于所有浏览器。）

问题：

ajax，setTimeout等异步事件是如何发生的？

浏览器附带一个名为Event Loop的内部循环，用于检查队列和进程＆amp;执行它。所以只有在执行开放时它们才会运行。我可以写一篇关于这项工作的长篇文章，但这不在上下文中。

那么解决方案是什么？网络工作者？

是的，它可以完成多线程所具有的一些功能。但它有限制

无法访问DOM。
他们无法访问main中的全局变量或js函数页。
访问某些对象，如窗口，文档和放大器父母受到限制

因此，即使您想要与Web工作人员进行多线程处理，您也可能需要修改代码并使其成为事件驱动编程而不是数据驱动编码。

希望它对你有用

如何在JavaScript中实现多线程？

1 个答案: