代码之家 › 专栏 › 技术社区 › Duntik

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

canvas node.js

Duntik · 技术社区 · 7 年前

我使用node js作为服务器。对不起,我对这项技术很感兴趣。 Im我的主文件索引。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');
});

在这个页面中,我有使用网络摄像头的代码

  <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>

在我的。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');
  }
}

所以问题是,我如何从画布转换为图像,并将照片发送到主索引。js?发送到cloudinary后

1 回复 | 直到 7 年前

Guillaume Piedigrossi 6 年前

您可以使用画布的base64图像,然后将其另存为文件: 常数fs=要求('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();

推荐文章