javascript - 删除 JavaScript 中的文件上传选项不起作用

Question

我是 javascript 新手，正在修改 javascript 代码，该代码在图像上绘制动态文本，并且用户可以上传它。

图片将被修复，用户无法上传自己的图片。

无论我做什么，我都无法从此代码中删除“选择要上传的图像”选项。谁能帮我解决这个问题吗？

我的代码如下:

var text_title = "Heading";
var text_title1 = "Heading";
var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);
var canvas = document.getElementById('imageCanvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.crossOrigin = "anonymous";

window.addEventListener('load', DrawPlaceholder)

function DrawPlaceholder() {
  img.onload = function() {
    DrawOverlay(img);
    DrawText();
    DynamicText(img)
  };
  img.src = 'uploads/<?php echo $image["image"] ?>';

}

function DrawOverlay(img) {
  ctx.drawImage(img, 0, 0);
  ctx.fillStyle = 'rgba(230, 14, 14, 0)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
}

function DrawText() {
  ctx.fillStyle = "black";
  ctx.textBaseline = 'middle';
  ctx.font = "50px 'Montserrat'";
  ctx.fillText(text_title, 50, 50);
  ctx.fillText(text_title1, 150, 250);
}

function DynamicText(img) {
  document.getElementById('name').addEventListener('keyup', function() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    DrawOverlay(img);
    DrawText();
    text_title = this.value;
    ctx.fillText(text_title, 50, 50);
  });

  document.getElementById('name1').addEventListener('keyup', function() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    DrawOverlay(img);
    DrawText();
    text_title1 = this.value;
    ctx.fillText(text_title1, 150, 250);
  });


}

function handleImage(e) {
  var reader = new FileReader();
  var img = "";
  var src = "";
  reader.onload = function(event) {
    img = new Image();
    img.onload = function() {
      canvas.width = img.width;
      canvas.height = img.height;
      ctx.drawImage(img, 0, 0);
    }
    img.src = event.target.result;
    src = event.target.result;
    canvas.classList.add("show");
    DrawOverlay(img);
    DrawText();
    DynamicText(img);
  }

  reader.readAsDataURL(e.target.files[0]);

}

function convertToImage() {
  window.open(canvas.toDataURL('png'));
}
document.getElementById('download').onclick = function download() {
  convertToImage();
}

<input class="controls__input" type="file" id="imageLoader" name="imageLoader" />
<label class="controls__label" for="name">First, choose an image.</label>

Answer 1

像这样吗？

var text_title = "Heading";

var canvas = document.getElementById('imageCanvas');
var ctx = canvas.getContext('2d');
var img = new Image();
// img.crossOrigin = "anonymous";

window.addEventListener('load', DrawPlaceholder)

function DrawPlaceholder() {
  img.onload = function() {
    DrawOverlay(img);
    DrawText(text_title);
    DynamicText(img)
  };
  img.src = 'https://via.placeholder.com/500x500';

}

function DrawOverlay(img) {
  ctx.drawImage(img, 0, 0);
  ctx.fillStyle = 'rgba(230, 14, 14, 0)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
}

function DrawText(text) {
  ctx.fillStyle = "black";
  ctx.textBaseline = 'middle';
  ctx.font = "50px 'Montserrat'";
  ctx.fillText(text, 50, 50);
}

function DynamicText(img) {
  document.getElementById('name').addEventListener('keyup', function() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    DrawOverlay(img);
    text_title = this.value;
    DrawText(text_title);
  });
}

canvas {
  height: 300px;
  width: 500px;
}

<input type="text" id="name" value="John" /><br/>
<canvas id="imageCanvas"></canvas>