1

I am trying to make a website code with HTML, CSS, and JavaScript which will allow someone to upload an image and:

  1. crop the picture to fit a face within a circle (just like a profile picture)
  2. add text to the picture around the edge and
  3. print out the picture

So far I've been able to come up with this from one of Martin Zikmund's answers on how to add a profile picture which can take a picture and crop it into a circle (it's not centered though), and right now the printing step can be crudely accomplished by printing out the page, however I'm unsure of how I can add in the text around the edge and if I can allow the user to only print out said picture.

All that I've been able to put together so far again is attributed to this answer

$("#profileImage").click(function(e) {
    $("#imageUpload").click();
});

function fasterPreview( uploader ) {
    if ( uploader.files && uploader.files[0] ){
          $('#profileImage').attr('src', 
             window.URL.createObjectURL(uploader.files[0]) );
    }
}

$("#imageUpload").change(function(){
    fasterPreview( this );
});
#imageUpload
{
    display: none;
}

#profileImage
{
    cursor: pointer;
}

#profile-container {
    width: 1.125in;
    height: 1.125in;
    overflow: hidden;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

#profile-container img {
    width: 150px;
    height: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="profile-container">
   <image id="profileImage" src="https://lorempixel.com/100/100" />
</div>
<input id="imageUpload" type="file" 
       name="profile_photo" placeholder="Photo" required="" capture>
System_Lag
  • 11
  • 3
  • 2
    What exactly isn't working? – Charlie Mar 29 '18 at 21:02
  • to be clear - you want to add text to the image? – Steven Black Mar 29 '18 at 21:06
  • @Charlie It isn't what isn't working, but how I can improve it. Currently the biggest issue is some images aren't centered properly, but I'd like to modify the code to adjust an image (e.g. the face isn't exactly in the center, the image could be adjusted to fit the face better), but I'd also like to add the ability to type across the border similar to word art in MS Word, and to add a proper print or download function to avoid wasting ink printing out the whole page. – System_Lag Mar 29 '18 at 21:07
  • @StevenBlack Yes, I'm looking to be able to add text around the border of the image similar to [this](https://docs.google.com/drawings/d/e/2PACX-1vRVGmPzu79n-wid759QI8jh7zJ7C23CyG6opZ5FHDIY8wU2LYrhqhkqigXNl3upEcxjo6YYz6fwW4xP/pub?w=960&h=720) – System_Lag Mar 29 '18 at 21:17
  • Have you tried searching for crop library? I found one pretty easily. Integrating it with text tools probably won't be trivial. – Charlie Mar 30 '18 at 01:26

0 Answers0