Question

任何人都知道如何将webgl动画嵌入到powerpoint中。任何可以在服务器端使用的工具来捕获动画gif？

我没有将webgl html直接嵌入powerpoint中。

Answer 1

您可以通过调用toDataURL（）创建webgl的图像，如

var canvas = document.createElement("canvas");
var gl = canvas.getContext("experimental-webgl");

function render() {
  gl.clearColor(Math.random(), Math.random(), Math.random(), 1);
  gl.clear(gl.COLOR_BUFFER_BIT);

  // takes a 'screenshot' of the canvas.
  var image = canvas.toDataURL();
  requestAnimationFrame(render);
}
render();

要制作动画，您可以将每个屏幕截图发送到服务器

...
var image = canvas.toDataURL();
var req = new XMLHTTPRequest();
req.open("POST", "http://localhost:8080", true);
var data = {
  cmd: 'screenshot',
  dataURL: image,
};
req.setRequestHeader("Content-type", "application/json");
req.send(JSON.stringify(data));

这是一个node.js服务器，它将截屏保存为.png文件。然后你可以将它们加载到某个程序中，将它们变成一个gif。

var port = 8080
var screenshotCount = 0;

var http = require('http'),
    url = require('url'),
    fs = require('fs'),
    util = require('util'),
    path = require('path'),
    querystring = require('querystring');

function postHandler(request, callback) {
  var query_ = { };
  var content_ = '';

  request.addListener('data', function(chunk) {
    content_ += chunk;
  });

  request.addListener('end', function() {
    query_ = JSON.parse(content_);
    callback(query_);
  });
}

function sendJSONResponse(res, object) {
  res.writeHead(200, {'Content-Type': 'application/json'});
  res.write(JSON.stringify(object), 'utf8');
  res.end();
}

function startsWith(str, start) {
  return (str.length >= start.length &&
          str.substr(0, start.length) == start);
}

function saveScreenshotFromDataURL(dataURL) {
  var EXPECTED_HEADER = "data:image/png;base64,";
  if (startsWith(dataURL, EXPECTED_HEADER)) {
    var filename = "screenshot-" + (screenshotCount++) + ".png";
    fs.writeFile(
        filename,
        dataURL.substr(
            EXPECTED_HEADER.length,
            dataURL.length - EXPECTED_HEADER.length),
        'base64');
    util.print("Saved Screenshot: " + filename + "\n");
  }
}

server = http.createServer(function(req, res) {
  // your normal server code
  if (req.method == "POST") {
    postHandler(req, function(query) {
      switch (query.cmd) {
        case 'screenshot':
          saveScreenshotFromDataURL(query.dataURL);
          sendJSONResponse(res, { ok: true });
          break;
        default:
          util.print("err: unknown post: " + query + "\n");
          break;
      }
    });
  }
}),

server.listen(port);

请注意，服务器仅保存屏幕截图，不提供文件（为简洁起见）。因此，您需要添加该功能或从其他服务器提供文件。

在webpoint中嵌入webgl或从webgl渲染动画gif

1 个答案: