javascript - 在带有背景图像的 Canvas 上书写

Question

所以我正在尝试构建一个 Meme-Creator。您已经可以从 Canvas 上传图片作为 background-img。现在我正在尝试做 Meme 字体，但它并没有真正起作用。然而，它在图片中造成了很大的差距。感谢您的帮助和关注! :D

var canvas = document.getElementById("meme-canvas");
var ctx = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;

function readImage() {
  if (this.files && this.files[0]) {
    var FR = new FileReader();
    FR.onload = function(e) {
      var img = new Image();
      img.addEventListener("load", function() {
        ctx.clearRect(0, 0, width, height);
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0);
      });
      img.src = e.target.result;
    };
    FR.readAsDataURL(this.files[0]);
  }
}

function Text() {
  ctx.clearRect(0, 0, width, height);

  var textT = document.getElementById("top-text").value;
  var textB = document.getElementById("bottom-text").value;

  ctx.font = "60px Impact";
  ctx.lineWidth = 3;
  ctx.strokeText(textT, 10, 65);
  ctx.strokeText(textB, 10, 400);
}

document.getElementById("image-input").addEventListener("change", readImage, false);

<input type="file" id="image-input" accept="image/*">
<input type="text" id="top-text" oninput="Text()">
<input type="text" id="bottom-text" oninput="Text()">

<canvas style="position: absolute; width: 400px; top: 100px; left: 10px;" id="meme-canvas"></canvas>

Answer 1

我对您的脚本做了一些修改。因为你需要多次绘制图像，所以我编写了一个绘制图像的函数。每次 2 个文本输入之一更改其值时， Canvas 都会被清除，并且每次您必须重绘所有内容时。

此外，textT 和 textB 只能声明一次。您无需在 Text 函数中声明它们。

我需要多次使用字体大小 (60)，所以我创建了一个变量 fontSize = 60

由于您不知道 Canvas 的大小(取决于上传图像的大小)，您需要计算底部文本的位置 textB = height - fontSize/2 其中高度是 Canvas 的高度:height = canvas.height = img.height;

希望有用。

var canvas = document.getElementById("meme-canvas");
var ctx = canvas.getContext("2d");
var width = (canvas.width = 400);
var height = (canvas.height = 400);
var fontSize = 60;
var img = new Image();

var textT = document.getElementById("top-text");
var textB = document.getElementById("bottom-text");

function readImage() {
  if (this.files && this.files[0]) {
    var FR = new FileReader();
    FR.onload = function(e) {
      img.addEventListener("load", function() {
        width = canvas.width = img.width;
        height = canvas.height = img.height;
        drawImage();
      });
      img.src = e.target.result;
    };
    FR.readAsDataURL(this.files[0]);
  }
}

function drawImage() {
  ctx.drawImage(img, 0, 0);
}

function Text() {
  ctx.font = fontSize + "px Impact";
  ctx.textAlign = "center";
  ctx.lineWidth = 3;
  
  ctx.clearRect(0, 0, width, height);

  drawImage();
  ctx.strokeText(textT.value, width / 2, 65);
  ctx.strokeText(textB.value, width / 2, height - fontSize/2);
}

document
  .getElementById("image-input")
  .addEventListener("change", readImage, false);

textT.addEventListener("input", Text);
textB.addEventListener("input", Text);

canvas{position: absolute; left: 10px; top:60px;border:1px solid #d9d9d9;}

<input type="file" id="image-input" accept="image/*">
<input type="text" id="top-text" />
<input type="text" id="bottom-text" />

<canvas style="" id="meme-canvas"></canvas>