尝试在画布中添加文本

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 );
}

上面的代码工作正常，并且确实接近预期的效果，这是上面代码的示例输出

最终的文本格式应如下所示 （文本栏应位于图像的底部，而不是中间，并且字体要大得多）

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

我试过了，但是字体和字体大小保持不变。

在将其附加到div之前，从drawCanvas（）调用了此函数，因为它不起作用，我只是在画布本身上添加了名为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

确保在上下文而非画布元素本身上设置方法和属性。

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

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