移除JavaScript中的文件上传选项未生效。

huangapple go评论83阅读模式
英文:

removing file upload option in javascript not working

问题

以下是您要翻译的内容:

"I am new to javascript and am modifying a javascript code which has draws dynamic text on image and user can upload it.

The image will be fixed, user can't upload his own image.

Whatever I do, I am not able to remove the "choose image to upload" option from this code. Can anyone please help me with this?

My code is below:


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/';

}

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




"

英文:

I am new to javascript and am modifying a javascript code which has draws dynamic text on image and user can upload it.

The image will be fixed, user can't upload his own image.

Whatever I do, I am not able to remove the "choose image to upload" option from this code. Can anyone please help me with this?

My code is below:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

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

window.addEventListener(&#39;load&#39;, DrawPlaceholder)

function DrawPlaceholder() {
  img.onload = function() {
    DrawOverlay(img);
    DrawText();
    DynamicText(img)
  };
  img.src = &#39;uploads/&lt;?php echo $image[&quot;image&quot;] ?&gt;&#39;;

}

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

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

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

  document.getElementById(&#39;name1&#39;).addEventListener(&#39;keyup&#39;, 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 = &quot;&quot;;
  var src = &quot;&quot;;
  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(&quot;show&quot;);
    DrawOverlay(img);
    DrawText();
    DynamicText(img);
  }

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

}

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

<!-- language: lang-html -->

&lt;input class=&quot;controls__input&quot; type=&quot;file&quot; id=&quot;imageLoader&quot; name=&quot;imageLoader&quot; /&gt;
&lt;label class=&quot;controls__label&quot; for=&quot;name&quot;&gt;First, choose an image.&lt;/label&gt;

<!-- end snippet -->

答案1

得分: 1

这样吗?

var text_title = "标题";

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>
英文:

Like this?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

var text_title = &quot;Heading&quot;;

var canvas = document.getElementById(&#39;imageCanvas&#39;);
var ctx = canvas.getContext(&#39;2d&#39;);
var img = new Image();
// img.crossOrigin = &quot;anonymous&quot;;

window.addEventListener(&#39;load&#39;, DrawPlaceholder)

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

}

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

function DrawText(text) {
  ctx.fillStyle = &quot;black&quot;;
  ctx.textBaseline = &#39;middle&#39;;
  ctx.font = &quot;50px &#39;Montserrat&#39;&quot;;
  ctx.fillText(text, 50, 50);
}

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

<!-- language: lang-css -->

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

<!-- language: lang-html -->

&lt;input type=&quot;text&quot; id=&quot;name&quot; value=&quot;John&quot; /&gt;&lt;br/&gt;
&lt;canvas id=&quot;imageCanvas&quot;&gt;&lt;/canvas&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2020年1月6日 21:27:09
  • 转载请务必保留本文链接:https://go.coder-hub.com/59612979.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定