Напишите на холсте с фоновым изображением

Question

Итак, я пытаюсь создать Мем-Творца.Вы уже можете загружать фотографии в качестве 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

Несколько проблем, с которыми я столкнулся:

• Если вы измените размер холста, вам не следует использовать переменные, потому что они не будут правильными, или вам нужно будет отслеживать их
• Если вы выполняете clearRect, вы должны знать, что вы очищаете, и заново рисовать его.
• Шрифт не выглядел слишком четким, поэтому я добавил белую тень для лучшей контрастности
• Нижний текст должен быть относительно высоты холста

Вот код:

var canvas = document.getElementById("meme-canvas");
var ctx = canvas.getContext("2d");
var img = new Image();

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

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

  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.font = "60px Impact";
  ctx.shadowColor = "white" 
  ctx.shadowOffsetX = ctx.shadowOffsetY = 2
  ctx.lineWidth = 3;
  if (img) ctx.drawImage(img, 0, 0);
  ctx.strokeText(textT, 10, 45);
  ctx.strokeText(textB, 10, canvas.height -10);
}

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

<input type="file" id="image-input" accept="image/*"><br>
<input type="text" id="top-text" placeholder="Top text" oninput="draw()"><br>
<input type="text" id="bottom-text" placeholder="Bottom text" oninput="draw()"><br>

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

Answer 2

Я сделал несколько изменений в вашем скрипте.потому что вам нужно нарисовать изображение несколько раз, я написал функцию, которая рисует изображение.Холст очищается каждый раз, когда один из двух вводимых текстов меняет свое значение, и каждый раз, когда вам нужно все перерисовать.

Также textT и textB могут быть объявлены только один раз.Вам не нужно объявлять их в функции Text.

Мне нужно использовать размер шрифта (60) более одного раза, поэтому я создал переменную fontSize = 60

Так какВы не знаете размер вашего холста (зависит от размера загружаемого изображения), вам нужно вычислить позицию для нижнего текста textB = height - fontSize/2, где высота - высота холста: 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>