I'm developing an app that grabs the HTML from a webpage and looks at images, within the HTML, that can be compressed and resized.
I can do the first part no problem in node, using Sharp here:
https://www.npmjs.com/package/sharp
I can, of course, resize the same image here too. I just don't know what dimensions to use. I don't want a tiny image to scale up and so on.
Can I somehow detect the size of the image on screen using the HTML I got to begin with?
Thanks in advance.
EDIT:
Sorry for any confusion. I need to know how big the image is being displayed on the page. So, the image may be 400x400 but the css could limit it to 200x200.
If I have a large image (1000x1000) but it's only being shown on screen at 500x500, I'd know it's a great candidate for resizing.
I'm just not sure how I can resize based on it's css dimensions.
I think in Sharp there's a metadata function that lets you access image metadata, e.g. format, width, height, etc.
Example:
const image = sharp(inputJpg);
image.metadata().then(function(metadata) {
// print image width and height
console.log({
width: metadata.width,
height: metadata.height
});
});
In Sharp library,
You can get dimension from this document:
http://sharp.dimens.io/en/stable/search.html?q=dimension
Hope it will help you.
const sharpImage = sharp('test/test.jpg');
image.metadata().then(function(metadata) {
console.log(metadata);
});
Related
I'm trying to replace the image using google doc api. Image is replaced but it takes the dimensions of previous and so gets cropped.
I also tried by providing height and width but it didn't work.
When I reset the image manually in google doc then the full image is showing in doc and after reset image, its height and width can be changed accordingly. But google doc API did not provide an option to reset image.
Here is a little code which replaces the image in a Google doc :
"replaceImage": {
"imageObjectId": IMAGE_ID",
"uri": REPLACED_IMAGE_URL,
"imageReplaceMethod": IMAGE_REPLACE_METHOD,
}
Is there any possible way to replace the image so that it can replace the previous image properly.
Thanks.
I don't think it is possible to avoid cropping when using the replaceImage request. As it can be seen in the official documentation, the only valid value for imageReplaceMethod is CENTER_CROP, which "Scales and centers the image to fill the bounds of the original image. The image may be cropped in order to fill the original image's bounds. The rendered size of the image will be the same as that of the original image.".
I hope this is of any help.
I have been trying to implement a feed App like Instagram or Facebook. ImageViews have match_parent width (screen width) and wrap_content height.
The code I have used...
Glide.with(context)
.load(imageURL)
.thumbnail(0.1f)
.diskCacheStrategy(DiskCacheStrategy.ALL)
.into(imageView)
;
That results into loading thumbnail first. The thumbnail is very small in size. I was expected that the thumbnail will display a faded image with the original image height.
Without thumbnail, the ImageViews do not populate any image (when loading) and then suddenly the original images comes into picture. I cannot use any place holder image as the height of the place holder image may not match the actual image to be loaded, makes it a bad user experience.
I have also tried...
Glide.with(context)
.load(imageURL)
.diskCacheStrategy(DiskCacheStrategy.ALL)
.placeholder(null)
.into(imageView)
;
But it is not working! I was wondering how the Instagram App does those fade in loading with images (with original image height)?
I have looked into various websites including the Glide Github issues and stack overflow, but unable to find any solution! I have already wasted about 6 hours of my day. What is the way out of this problem?
Use override attribute:
Glide.with(context)
.load(imageURL)
.override(18,18)
.thumbnail(0.1f)
.diskCacheStrategy(DiskCacheStrategy.ALL)
.into(imageView);
Also as Instagram is owned by Facebook it might be the case that they use Fresco library (not sure though).
How do I actually crop and compress (resize to snippet size) the image on back-end?
I'm using croppie on front-end: https://foliotek.github.io/Croppie/
I'm completely lost, small guidance would be very helpful.
Thanks!
Why do you want crop your pic on back-end? This operation should have be done in browser. When you use result({ type, size, format, quality, circle }) function, you can get data of cropped pic. If type is base64, you can save the data to file after base64_decode it.
I've got app based on google maps. Each user is one pin on it.
I want to create pin image basing on user profile photo.
What I need to do is
Resize given image to given size (50x50px)
Make this image circle
Below this image, put base pin image (png) that has place on it for circle photo
Save final image as pin photo
Final image should be png with transparency enabled.
Is there any node library that can do such things?
Imagemagick supports image composition, and node has Imagemagick bindings.
Even though, I guess you can achieve your goal via CSS only:
resize -> browser will do;
make it circle -> border-radius: 50%;
base pin image background -> background-image.
How to set image size when using liferay-ui:logo-selector as
<liferay-ui:logo-selector
defaultLogoURL='<%=themeDisplay.getPathImage() + "/organization_logo?img_id=0"%>'
editLogoURL="<%=editOrganizationLogoURL%>" imageId="<%=logoId%>"
logoDisplaySelector=".organization-logo" showBackground="<%=false%>" />
I just can't get it done.I can change image size while displaying logo using img html tag.
As #rasabihariKumar mentioned in the comment, it is not possible to set the image size i.e. the height or width of the logo through <liferay-ui:logo-selector>.
One thing you can do is upload the logo with the correct dimensions
or else extend the <liferay-ui:logo-selector> tag through a hook or ext so that you can send the image width and height to the tag.
Or you can change the image size through javascript after the whole page is loaded through javascript. This answer may help you.