Whereto from here? Are there any efforts to make it smarter and get more accurate? It's already pretty good so far for 80% of the cases, but I would like it to reach a higher level of accuracy.

Right now it seems that the skin color defaults to #C69170 and can only take one value. It may be useful to have multiple default values (since not everyone is white) and check all of them in skinDetect.

note: I know the main purpose of this, is to smart crop, and this is already great. Still I have another problem

Context

I want to use this amazing library for uploads in browser. I tried to grab code from testsuite and it works fine.

Unfortunately I find in most cases:

Problem

cropped size in px / original size in px

is always way less than

cropped size in mb / original size in mb

I wished smartcrop.js would let the image quality as is, in this case I think size on memory would drop relatively to the cropped size ( logically as images are raw data? ).

Thanks a lot !!

Adds index.d.ts with Typescript typings for the library.

index.d.ts is the default definitions locations. If the file is in the project root and is named index.d.ts, then there is no need to modify package.json.

Some image processors need to know the type of the image in order to open them as a buffer. This is the case with lwip.

To make this possible, we could pass the filename (or just the extension) to smartcrop as part of the options object, and then make it available to iop.open as a second argument. That way, the iop can decide how best to open the image when open() is called.

(Does this make sense? 😅 )

I have a bunch of 3:2 images that I'd like to crop at 16:9 while keeping as much of the original image as possible. I'd like to do this locally using smartcrop-cli.

Would this be possible using smartcrop.js? It would be a dream that comes true.

EDIT: Every picture has different pixel size, but the same 3:2 aspect ratio. If that's not possible with smartcrop.js native functionality, maybe with a shell script as a wrapper? 🤔🤔

I am looking to crop an image into a circle, hopefully using this library, or a combination of this (to detect a person's face), and then cropping that image into a circle (limitation of another library that doesn't allow css intervention on an image).

The crop fails when I add

meta http-equiv="Content-Security-Policy" content="default-src 'self'"

for security perposes regarding xss how can I be able to fix this???

I think the cause of this is because your code creates script or img tags somewhere but I dont know where, can you help me with that please

Getting this in our builds:

>>> project_name
rm -rf dist/* && tsc
Error: ../../common/temp/node_modules/.registry.npmjs.org/smartcrop/2.0.4/node_modules/smartcrop/index.d.ts(25,1): error TS1046: Top-level declarations in .d.ts files must start with either a 'declare' or 'export' modifier.

Which seems to be coming from this:

const smartcrop: {
  crop(image: CanvasImageSource, options: CropOptions): Promise<CropResult>;
};
export default smartcrop;

I'm not a .d.ts expert - but looking at other examples (https://github.com/stephenmathieson/node-tlds/issues/11) this may be better done this way (based on their actual index.d.ts, not the suggestions, but I'm not sure and this is untested):

declare const smartcrop: {
  crop(image: CanvasImageSource, options: CropOptions): Promise<CropResult>;
};
export = smartcrop;

Hi! I try to use this library in React Native, but in react native i don't have HTMLImages for input. Can i pass base64 image or something else?

Thanks!

Hey guys,

I have this image:

And this is the area smartcrop is giving me to use:

This is the first image that I'm getting this kind of result... Is there something I can do to avoid these?

I know that if I use smartcrop + opencv I can boost the areas with faces and I can get this result:

But I really don't want add opencv to my stack. It's too heavy I was hoping to get this fixed without using heavy artillery.

Ideas?

I was wondering if this library supports a case of:

I want to input containerWidth, containerHeight, as well imageWidth, imageHeight, and imageFacesOnScreen, and I would like to get back:

imageScale, imageX, imageY (basically these 3 parameters help me to scale/reposition the image in the container) thus giving me the best "crop", in essence I am not sure how to create this algorithm, but I dont need any face detection algorithms as I already have them, and I dont need any bitmap manipulation as its all handled. I would essentially need "description" of how to position the face in a container the best way.

I want the image to be 64x64 without transparency around and with content centered. But I only get a 64x64 minimized version of my image, without anything cropped.

I made this reproduce repo

I gave a try to my image in the online tool and the hot zones are correctly detected.

Thanks for that great lib.

I have an image

Smartcrop is shifting centering when I use more square aspect ratio

Is it possible to set detection only for horizontal (top, bottom) so images doesn't shift center?

Hi, @jwagner

This is an awesome library, thank you for creating it!

I am considering to use the library in production environment, with responsiveness support. However, the absolute cropped boundary numbers are not very friendly to responsiveness. If the calculation result is a center point with percentage, we can use the following CSS styles to stick to that center point, then it will show good in PC view or mobile view.

const style = {
  backgroundImage: `url("${imageURL}")`,
  backgroundPosition: `${centerPoint.x}% ${centerPoint.y}%`
}

Now, I am calculating the central point of the crop result as the center point. That is working but not really accurate.

More ideas?

The luminance calculation in smartcrop.js is currently:

function cie(r, g, b) {
    return 0.5126 * b + 0.7152 * g + 0.0722 * r;
}

But going back to the HDTV Rec. 709 (either https://en.wikipedia.org/wiki/Rec._709 or the original https://www.itu.int/dms_pubrec/itu-r/rec/bt/R-REC-BT.709-6-201506-I!!PDF-E.pdf ), these coefficients should be:

0.2126 * r + 0.7152 * g + 0.0722 * b

With two differences: first is that the r and b channels have been swapped, and second is the typo of 0.5126 for 0.2126 in the weight of the red channel. This should also be technically on linear RGB rather than sRGB (as you'll likely get from JS) but that's less of an issue.

The current code weights blue ~7x higher than it should. I don't know whether it's worth changing smartcrop.js results at this point to fix it, though.