如何通過服務器端 node.js 運行 CCapture？

Question

我試圖通過node.js運行CCapture.js的基本代碼（用於測試）

global.navigator = {userAgent: 'node.js'};
global.window = new Object();

var ccaptureJs = require("ccapture.js");

但是當我在終端中執行文件node cap.js （上面的代碼）時，它給出了錯誤：

$ node cap.js
/home/tika/node_modules/ccapture.js/build/CCapture.all.min.js:1
(function (exports, require, module, __filename, __dirname) { function download(t,e,n){function i(t){var e=t.split(/[:;,]/),n=e[1],i="base64"==e[2]?atob:decodeURIComponent,r=i(e.pop()),o=r.length,a=0,s=new Uint8Array(o);for(a;a<o;++a)s[a]=r.charCodeAt(a);return new m([s],{type:n})}function r(t,e){if("download"in l)return l.href=t,l.setAttribute("download",w),l.innerHTML="downloading...",l.style.display="none",f.body.appendChild(l),setTimeout(function(){l.click(),f.body.removeChild(l),e===!0&&setTimeout(function(){h.URL.revokeObjectURL(l.href)},250)},66),!0;var n=f.createElement("iframe");f.body.appendChild(n),e||(t="data:"+t.replace(/^data:([\w\/\-\+]+)/,d)),n.src=t,setTimeout(function(){f.body.removeChild(n)},333)}var o,a,s,h=window,d="application/octet-stream",u=n||d,c=t,f=document,l=f.createElement("a"),p=function(t){return String(t)},m=h.Blob||h.MozBlob||h.WebKitBlob||p,g=h.MSBlobBuilder||h.WebKitBlobBuilder||h.BlobBuilder,w=e||"download";if

TypeError: Cannot read property 'toLowerCase' of undefined
    at Object.<anonymous> (/home/tika/node_modules/ccapture.js/build/CCapture.all.min.js:1:16590)
    at e (/home/tika/node_modules/ccapture.js/build/CCapture.all.min.js:1:10557)
    at Object.<anonymous> (/home/tika/node_modules/ccapture.js/build/CCapture.all.min.js:1:11348)
    at e (/home/tika/node_modules/ccapture.js/build/CCapture.all.min.js:1:10557)
    at Object.<anonymous> (/home/tika/node_modules/ccapture.js/build/CCapture.all.min.js:1:19591)
    at Object.<anonymous> (/home/tika/node_modules/ccapture.js/build/CCapture.all.min.js:1:19609)
    at Module._compile (module.js:643:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)

Answer 1

您不能直接要求 CCapture。 CCapture 取決於開箱即用的環境。 但是你可以使用jsdom來模擬它。

為此，您需要：

安裝 jsdom： npm i jsdom 。
安裝node-canvas作為 jsdom 默認不支持 Canvas API。
- brew install pkg-config cairo libpng jpeg giflib - 安裝依賴項（Mac OS，其他操作系統說明請參見包文檔）
- npm i canvas - 安裝包
現在您可以像這樣在后端使用 CCapture（請參閱我的評論）：

 const jsdom = require("jsdom"); const { JSDOM } = jsdom; const fs = require("fs"); const _ = require("lodash"); const { window } = new JSDOM( ` <body> <script src='./node_modules/ccapture.js/build/CCapture.all.min.js'></script> <canvas id='animation' width='400' height='200'></canvas> </body> `, // We need these options to allow JSDOM to require CCapture from node_modules { runScripts: "dangerously", resources: "usable" } ); const document = window.document; // Do our stuff after DOM is ready. window.onload = () => { const canvas = document.getElementById("animation"); const ctx = canvas.getContext("2d"); // Doing some random animation here const render = () => { ctx.fillStyle = "blue"; ctx.font = "30px Impact"; ctx.rotate(_.random(0.1, 0.2)); ctx.fillText("Awesome!", 50, 100); }; // Framerate for capturer is 1 per second just for example const capturer = new window.CCapture({ format: "png", framerate: 1, verbose: true }); capturer.start(); // Doing 3 renders, and capture the canvas const interval = setInterval(() => { render(); capturer.capture(canvas); }, 1000); // Now clearing the interval, stopping capturer setTimeout(() => { clearInterval(interval); capturer.stop(); // Saving the file using FileReader (from JSDOM) and node.js API capturer.save(blob => { const reader = new window.FileReader(); reader.onload = () => { const arrayBuffer = reader.result; const uint8Array = new Uint8Array(arrayBuffer); // Sync for simplicity fs.writeFileSync("./images.tar", uint8Array, { encoding: "binary" }); }; reader.readAsArrayBuffer(blob); }); }, 4000); };

上面的腳本生成一個帶有png圖像的.tar文件：

警告：至於現在 jsdom 不支持webm格式。 雖然與png完美配合。

如何通過服務器端 node.js 運行 CCapture？

問題描述

1 個解決方案

解決方案1
3 2018-02-19 21:37:59

如何通過服務器端 node.js 運行 CCapture？

問題描述

1 個解決方案

解決方案1 3 2018-02-19 21:37:59

解決方案1
3 2018-02-19 21:37:59