删除javascript中的文件上传选项不起作用答案

【问题标题】：removing file upload option in javascript not working删除javascript中的文件上传选项不起作用
【发布时间】：2020-04-24 01:10:01
【问题描述】：

我是 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>

【问题讨论】：

不清楚您需要做什么，删除要上传的代码或使其工作以便可以上传。此外，您在控制台中显示的代码中也有错误-您有一些不属于的PHP-我更改了引号，因此它不会立即给出错误，但是还有更多错误
您缺少此处使用的元素：var canvas = document.getElementById('imageCanvas');
你也不见了name1
@mplungjan 我想删除浏览文件选项

标签： javascript html image canvas

【解决方案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>

【讨论】：