2

I want to be able to grab an image off an API (Using AJAX, JQuery) and be able to crop a circle out of it (to make it circular) and set it as the favicon for that page. How would I go about doing this (preferably in JS/Jquery)?

I've been able to use JQuery to set the image as a favicon, but I can't seem to make it circular (using CSS's border-radius)...

Please help!

Thanks

FYI: I tried this: $("head").append('<link rel="shortcut icon" href="URL" style="border-radius: 24px;">') for a 48x48 image

cwohlman
  • 763
  • 6
  • 21
osaswama
  • 23
  • 1
  • 4
  • maybe render it on canvas and do the rounding there? CSS will 100% not lead to any results here. – MightyPork Oct 25 '15 at 13:55
  • How would I do that? – osaswama Oct 25 '15 at 13:56
  • May be this answer will help you .. http://stackoverflow.com/questions/4276048/html5-canvas-fill-circle-with-image and also see http://stackoverflow.com/questions/11496734/add-a-background-image-png-to-a-svg-circle-shape – Amitd Oct 25 '15 at 15:50

1 Answers1

3

Here is the solution:

document.querySelector('input').addEventListener('change', function(e){
  var input = this;
  var reader = new FileReader();

  reader.onload = function (e) {
    // Create an image from the file
    var img = document.createElement('img');
        img.src = e.target.result;
        
    // Create canvas to convert the image to base64
    var canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;
    
    var ctx = canvas.getContext('2d');
    
    roundedImage(ctx, 0, 0, canvas.width, canvas.height, 5);
    ctx.clip();
    
    // draw the image on the canvas (the user can't see it).
    ctx.drawImage(img, 0, 0);
    ctx.restore();
    
    document.body.appendChild(canvas);
    
    // set the link's attribute to replace the icon
    document.querySelector('#icon').setAttribute('href', canvas.toDataURL());
  };

  // Start read the image who uploaded
  reader.readAsDataURL(input.files[0]);
});

function roundedImage(ctx,x,y,width,height,radius){
  ctx.beginPath();
  ctx.moveTo(x + radius, y);
  ctx.lineTo(x + width - radius, y);
  ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
  ctx.lineTo(x + width, y + height - radius);
  ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
  ctx.lineTo(x + radius, y + height);
  ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
  ctx.lineTo(x, y + radius);
  ctx.quadraticCurveTo(x, y, x + radius, y);
  ctx.closePath();
}
<link id="icon" rel="icon" type="image/x-icon" />

<input type="file" />
Mosh Feu
  • 28,354
  • 16
  • 88
  • 135
  • OP wants to crop the image into a circle before rendering it. – JLRishe Oct 25 '15 at 15:17
  • I just was updated my code. @JLRishe downvote no needed at all. You can comment and wait hour or something before you downvoting. – Mosh Feu Oct 25 '15 at 15:27
  • @MoshFeu Your original answer missed the main point of the question, which was stated once in the title and twice in the question. So I think a downvote was merited, but I will be happy to reverse my downvote now that you have fixed it. – JLRishe Oct 26 '15 at 06:54
  • @JLRishe I was concentrated in the first part of the question, and from the second I completely forgot. That's why I think we should write a a comment and wait. Thanks anyway. – Mosh Feu Oct 26 '15 at 07:02