How does Stack Overflow auto-generate the gravatars for those users who do not upload a picture or who have not created a Gravatar icon?
Where do these random avatars come from, and how can I generate them for my own site?
The 'random' colorful gravatars are displayed because this query string parameter is being added to every gravatar source URL: d=identicon
This is done so that if the user doesn't have a gravatar image associated with his email, this 'random' image is displayed, instead of the default blue gravatar image.
The following displays the 'default' blue image because the parameter is not included:
Yet, the same URL with the d=identicon parameter included, shows this:
This is the URL used for the example: https://www.gravatar.com/avatar/94d093eda664addd6e450d7e9881bcad?s=32&d=identicon&r=PG
By the way these images (called Identicons) are not really random, but are generated based on the email hash.
See How is the default user avatar generated? for some Language Implementations of this algorithm.
Related
I'm currently working on a chrome extension that injects a content script into a webpage that allows the user to autofill a form, and everything seems to be working correctly, with the text inputs. But I have not been able to figure out how to upload an image programmatically (simulating user input).
I need help creating a function that takes in a parameter of image url or data uri, and automatically triggers the file upload as if the user uploaded the image manually, to an input selector of my choice. End result should still keep the thumbnail and similar resolution intact.
Scope:
triggers file(image specifically) input automatically. Must include thumbnail and similar resolution intact
must include a parameter for image url/ or data uri
must include a parameter for input selector I target
must work from a chrome extension content script
must work on any file/image input on any page would be ideal
can be written in javascript or jquery, whichever you prefer
An extension that solves this problem perfectly can be found here, so I know this is possible, I just have not been able to replicate it: https://chrome.google.com/webstore/detail/upload-image-from-url/eiglgndkjiabiepkliiemoabepkkhacb. (the code is obfuscated, so I can't figure out how to replicate.
Hi I am making an online image editor using fabric js.
I am trying to show the user an image similar to the canvas that the user has worked on by importing it from Google and the canvas can be converted to a base64 url through toDataURl().
At this time, to get the image search result corresponding to this, https://www.google.com/searchbyimage?image_url={base64url} I enter the following address, but an error occurs.
How to fix the base64 url to get the desired image result search
I'm trying to use cropper.js for the following scenario:
User uploads image via form input
User crops the image down resulting in crop a
Crop a is shown as a new image
User crops the image further resulting in crop b
Both cropped images are sent to the server
For some reason when I put the base64 data urls generated via my code into a decoder or image tag I get either a broken image or a tiny sliver of the image. Here are the relevant parts of my code:
Html exists on the page including an image tag: with id=originalImg
cropper = $('#originalImg');
cropper.cropper({
dragMode: 'crop',
checkCrossOrigin: true,
guides: false
});
User uses the cropper.js interface to select a crop, then clicks a button which gets the cropped section with:
cropper.cropper('getCroppedCanvas').toDataURL('image/jpeg');
I then replace the originalImg tag with a new image tag with the source from step two, and then do step 1 and 2 above again.
Any idea why the resulting base64 seems wonky?
In the past I've used the Image Field Module to require a user to provide an image of specific dimensions and it's worked great. I like the new Media Library Picker Field and it's integration with the Image Editor module to allow for cropping and re-sizing.
What I'd like to do is use the Media Library Picker Field but require the user to crop and/or re-size the image to specific dimensions. Is there any way to configure it that way? So far, the best I've come up with is to provide some help text to the user suggesting that they re-size the image to desired dimensions.
Should I just stick with the Image Field if I must have the image meet specific dimensions or is there a better way with the Media Library Picker Field?
You can't enforce that the image is supplied with specific dimensions using the Orchard 1.7+ media processing features, however you can ensure that it is displayed with correct dimensions.
Orchard 1.7 introduces the concept of media profiles, which effectively allow you to create a bunch of image transformations, name them, and then use them arbitrarily throughout your site.
On a recent project I was given a load of customer profile pictures for a testimonial page on an Orchard site. They were supplied in a variety of different sizes, and I knew I needed at least 2 different sizes (one for the main testimonial page, and a smaller one for testimonial widgets shown on other pages).
In the Admin Dashboard, I went to Media -> Profiles and created a new Media Profile called Customer_Profile_Regular, then added a Resize filter to scale it down to 100x100px (the resize filter is quite flexible, and you can create your own filters easily by implementing the IImageFilterProvider interface).
I did the same for a second profile, Customer_Profile_Small, scaling down to 50x50.
Then, using Shape Tracing, I overrode the existing Media Library Picker field display shape, and replaced it with this:
#{
var imagesField = Model.ContentItem.Testimonial.CustomerProfile;
}
#if(imagesField.MediaParts.Any()) {
<div class="customer-profile-image">
#Display.MediaUrl(Profile: "Customer_Profile_Regular", Path: imagesField.MediaParts.First().MediaUrl)
</div>
}
For the testimonial widget, it was simply a case of creating a similar shape override, supplying the other profile name.
Now I can upload any image to my media library, and use it as a customer profile image on a testimonial. Orchard will automatically resize (or perform other operations on) the image based on the profile I tell it to use, the result of which is stored in the site's Media folder so that it is only regenerated when necessary.
I'm building functionality that allows users to upload an image, then crop it to a square (for profile pictures etc...)
Currently, the process works like this:
User selects image from hd
Image is uploaded to S3
S3 Path is sent back to view, and image with jCrop is shown
On submit button being clicked, my controller action gets the coords set above
Now I'd like to crop this image to the given coords (note- I'm using lpatters fork of node-imagemagick as it contains 'offset'
Unfortunately, .crop only accepts a path - which we don't have, since it's hosted on S3 at this point.
Is there any workaround?
I saw tmp, but this may be a little overkill?
What about using some of the other entry points such as "resize" that then allow you to provide the custom arguments? I'm using streams in this code: https://github.com/jeffwilcox/4th-cloud/blob/master/lib/webserver.js#L542