Replace “choose file” upload button with set image library

#javascript #html

Top comments (1)

Just in Case:
I found code that allows a user to write custom text on an image on front end on a previous stack question stackoverflow.com/questions/175643...

I would just like to replace the button "choose file" upload button with a dropdown selector where users can only select images from my library and a button to download the image with the custom text on. Please help. Herewith the code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var
maxSize=600, // Max width or height of the image
font='italic small-caps bold 40px/50px arial', // font style
fontColor='white', // font color
textX=50, // text x position
textY=50, // text y position
h=function(e){
var fr=new FileReader();
fr.onload=function(e){
var img=new Image();
img.onload=function(){
var r=maxSize/Math.max(this.width,this.height),
w=Math.round(this.width*r),
h=Math.round(this.height*r),
c=document.createElement("canvas"),cc=c.getContext("2d");
c.width=w;c.height=h;
cc.drawImage(this,0,0,w,h);

cc.font=font;
cc.fillStyle=fontColor;
cc.fillText(document.getElementById('t').value,textX,textY);

this.src=c.toDataURL();
document.body.appendChild(this);
}
img.src=e.target.result;
}
fr.readAsDataURL(e.target.files[0]);
}
window.onload=function(){
document.getElementById('f').addEventListener('change',h,false);
}
</script>
</head>
<body>
1.write text
<input type="text" id="t">
2.add image
<input type="file" id="f">
</body>
</html>

DEV Community

Replace “choose file” upload button with set image library

Top comments (1)

Read next

One Level of Abstraction: The Key to Clean Functions

Dockerize PERN-TypeScript App Using Prisma ORM With Docker Compose

Stop Using Try-Catch: A Better Way to Handle Errors in JavaScript

What is the best programming language? [2024/2025]