Question

我使用节点js作为服务器。对不起，我对这项技术非常感兴趣。我是我的主文件index.js（我使用express + bodyparser和ejs作为引擎）我将图片上传模块添加到cloudinary：

    var cloudinary = require('cloudinary');
cloudinary.uploader.upload("THERE HAVE TO BE THE IMAGE", function(result) {
      console.log(result)
    });

然后路由到页面

app.get('/camera', function(req, res) {
  res.render('camera');
});

在此页面中，我有代码可以使用webcamera

  <div class="app">
    <video id="camera-stream"></video>
    <img id="snap">
    <p id="error-message"></p>
    <div class="controls">
      <a href="#" id="take-photo" title="Take Photo"><i class="material-icons">camera_alt</i></a>
    </div>
    <canvas id="simple_sketch"></canvas>
  </div>

在这个页面的my.js中，我有代码每5秒从网络摄像头拍照。有女巫制作照片。

function takeSnapshot(){
var hidden_canvas = document.querySelector('canvas'),
      context = hidden_canvas.getContext('2d');

  var width = video.videoWidth,
      height = video.videoHeight;

  if (width && height) {
    hidden_canvas.width = width;
    hidden_canvas.height = height;

    context.drawImage(video, 0, 0, width, height);
    return hidden_canvas.toDataURL('image/png');
  }
}

所以问题是，我如何从画布转换为图像并将照片发送到主index.js？并发送到cloudinary

Answer 1

您可以使用画布的base64图像，然后将其另存为文件： const fs = require（'fs）;

var canvas = new Canvas(img.width, img.height);
var ctx = canvas.getContext('2d');

// Write labels & values
ctx.font = '50px Arial';
ctx.fillText('Awesome!', 50, 100);
var buf = canvas.toBuffer();
fs.writeFileSync('./public/your_file.png', buf);

然后，您可以创建文件，或将base64用于： ctx.toDataURL（）;

如何使用api将图片从画布发送到服务器？

1 个答案: