尝试在画布

Question

我正在制定PWA，用于进行调查，所以我正在做的是， 我正在从视频（在应用程序内）捕获快照并将其保存在画布中，这样可以正常工作。

现在我需要在上面添加日期，时间和地理坐标。

我的Javascript代码

var video = document.querySelector('video');
var takenPhotosDiv = document.getElementById( "taken-photos" );


var button = document.querySelector('button');
button.onclick = function() {
  drawCanvas();
};


var drawCanvas = function(){
  var canvas = window.canvas =  document.createElement('canvas');
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
   canvas.getContext('2d').fillText( "30-08-2017" + "   " + "15:25" + "  " + "(79.85858454, 17.56852655)", 50, 150 );
  takenPhotosDiv.appendChild( canvas );
}

上面的代码工作正常，它确实接近预期，这里是上面代码的示例输出

最终的文字格式应该看起来像this（文字栏应位于图片的底部，而不是位于中间，字体更大）

PS：我不仅需要以上述格式显示，甚至需要保存并稍后在Firebase上推送它。

编辑：

var addTextToCanvas = function( canvas ){
  canvas.lineWidth = 2;
  canvas.fillStyle = "blue";
  canvas.font = "bold 20px sans-serif";
  canvas.textBaseline = "bottom";
  canvas.fillText( "30-08-2017" + "   " + "15:25" + "  " + "(79.85858454, 17.56852655)", 0, 100 );
  return canvas;  
};

我尝试了这个，但字体和字体大小保持不变。

这个函数是从drawCanvas（）调用的，就在它附加到div之前，因为它不起作用，我只是在画布上添加了一个名为fillText的文件

编辑2：

Answer 1

试试这个

var canvas = window.canvas =  document.createElement('canvas');
var ctx = canvas.getContext('2d'); 

var text = "30-08-2017\n15:25\n(79.85858454, 17.56852655)";
ctx.font = "30px Arial";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText(text, canvas.width/2, canvas.height/2); 

Answer 2

确保在上下文上设置方法和属性，而不是在canvas元素本身上设置。

我们还需要计算文本的实际垂直位置。由于它与底部对齐，我们可以使用画布的高度减去一些底部填充：

var y = canvas.height - 10;

所以，例如：

var addTextToCanvas = function( context ) { // pass in 2D context
  var y = context.canvas.height - 10;
  context.fillStyle = "blue";
  context.font = "bold 20px sans-serif";
  context.textBaseline = "bottom";
  context.fillText( "30-08-2017"+"   "+"15:25"+"  "+"(79.85858454, 17.56852655)", 10, y );
  return context;  
};

或者如果你想传递画布：

var addTextToCanvas = function( canvas ) {
  var context = canvas.getContext("2d");
  var y = canvas.height - 10;
  context.fillStyle = "blue";
  context.font = "bold 20px sans-serif";
  context.textBaseline = "bottom";
  context.fillText( "30-08-2017"+"   "+"15:25"+"  "+"(79.85858454, 17.56852655)", 10, y );
  return context;  
};

lineWidth在此处不执行任何操作，因此可以将其删除。

我建议您全局存储一次上下文。它与您每次获得的上下文相同，但每次使用时都会有更多的开销请求。

功能示例：

var ctx = c.getContext("2d");

var addTextToCanvas = function( context ) {
  context.fillStyle = "blue";
  context.font = "bold 20px sans-serif";
  context.textBaseline = "bottom";
  
  var y = context.canvas.height - 10;
  context.fillText( "30-08-2017"+"   "+"15:25"+"  "+"(79.85858454, 17.56852655)", 10, y );
  return context;  
};

addTextToCanvas(ctx);

#c {border: 1px solid #999}

<canvas id=c width=600 height=180></canvas>

最后，要提取为图像，需要在canvas元素上进行调用而不是上下文（可能会令人困惑）：

var dataUrl = canvas.toDataURL();   // saves out PNG image

或JPEG：

var dataUrl = canvas.toDataURL("image/jpeg", 0.75);