canvas转视频下载

Warning: Don’t paste code into the DevTools Console that you don’t understand or haven’t reviewed yourself. This could allow attackers to steal your identity or take control of your computer. Please type ‘allow pasting’ below and hit Enter to allow pasting.

Canvas 页面涉及 JavaScript 渲染，有人可能教你在控制台粘贴代码去“下载”或“修改”网页内容。但攻击者也可以通过这种方式让你运行恶意脚本，比如窃取账号、控制浏览器，所以 Chrome 加了这个提示。

如何继续粘贴你自己理解过的代码？

只需在控制台输入：

allow pasting

然后按 Enter，就可以解除限制，粘贴你自己信任的代码了。

 

---

 

代码很简单，大佬不用看，萌新可以学习下！代码是cv别人的的！

cv不丢人，能解决问题就行！

现在很多网页都恶心人，用什么canvas加载图片或视频，一点都不方便我们这些白嫖的人，下面的代码就是用来下载canvas的视频的。

 

用法需要知道mu标canvas的id或者class ，没有的话点开控制台加一个很简单，

然后将下面的 dom_tag 变量修改成你的id或者class，复制代码到浏览器控制台，回车执行，等待10秒就行了

想录制更长的 修改 duration 的值就行了 毫秒为单位

 

(() => {
    let duration = 10000  // 录制时长
    let dom_tag = "#cad" // canvas的id或者class
    let canvas_1710078902034 = document.querySelector(dom_tag)  // 变量名起长一点，防止重复   
    function record(canvas, time) {
        var recordedChunks = [];
        return new Promise(function (res, rej) {
            var stream = canvas.captureStream(25 /*fps*/);
            mediaRecorder = new MediaRecorder(stream, {
                mimeType: "video/webm; codecs=vp9"
            });

            //ondataavailable will fire in interval of `time || 4000 ms`
            mediaRecorder.start(time || 4000);

            mediaRecorder.ondataavailable = function (event) {
                recordedChunks.push(event.data);
                // after stop `dataavilable` event run one more time
                if (mediaRecorder.state === 'recording') {
                    mediaRecorder.stop();
                }
            }

            mediaRecorder.onstop = function (event) {
                var blob = new Blob(recordedChunks, { type: "video/mp4" });
                var url = URL.createObjectURL(blob);
                res(url);
            }
        })
    }
    function createDownloadVideo(canvas, duration) {
        let videoName = new Date().valueOf();
        const recording = record(canvas, duration)
        // play it on another video element
        var video$ = document.createElement('video')
        document.body.appendChild(video$)
        recording.then(url => video$.setAttribute('src', url))

        // download it
        var link$ = document.createElement('a')
        link$.setAttribute('download', videoName)
        recording.then(url => {
            link$.setAttribute('href', url)
            link$.click()
        })
    }
    createDownloadVideo(canvas_1710078902034, duration)
})()

　

不用谢，请叫我红领巾