Replace “choose file” upload button with set image library

JavaScript
,
1

I found code that allows a user to write custom text on an image on front end on a previous stack question https://stackoverflow.com/questions/17564368/allow-users-to-write-a-custom-text-on-an-image

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>
2

Hi @walter18, first replace the file input with a select that you populate with the image paths:

<select id="f">
  <option value="/images/foo.jpeg">foo</option>
  <option value="/images/bar.jpeg">bar</option>
  <option value="/images/baz.jpeg">baz</option>
</select>

Then in your JS you don’t need the file reader any more – just set

img.src = e.target.value

directly.

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.