image is not being cropped at right area

[MikeCastillo1]

Hello Sanity Team ,

I have the following issue:

At the documentation says that the crop and hotspot values are respected when using

const originalUrl = builder
    .image(rawImgData.asset._id)
    .width(width)
    .height(height)
    .url()

but when I get the image it does not get cropped on at the right position, it does not respect the hotspot or the crop settings.

it generates this rect values
rect=0,612,4898,2041&w=1920&h=800

Also the values from sanity and gatsby are different!

graphql values from sanity deployment

  "hotspot": {
          "x": 0.5,
          "y": 0.6275135628062258,
          "height": 0.7449728743875486,
          "width": 1
        },
        "crop": {
          "top": 0.2550271256124515,
          "bottom": 0,
          "left": 0,
          "right": 0
        }

gatsby source values

hotspot:{
height: 0.6032911379361867
width: 0.8109965635738828
x: 0.5
y: 0.6210734838766183
}

crop{
left: 0
right: 0
top: 0
}

GROQ values

{
  "_type": "sanity.imageCrop",
  "bottom": 0,
  "left": 0,
  "right": 0,
  "top": 0.2550271256124515
}
{
  "_type": "sanity.imageHotspot",
  "height": 0.7449728743875486,
  "width": 1,
  "x": 0.5,
  "y": 0.6275135628062258
}

I think there is a bug, or maybe I'm doing something wrong.
Let me know if you need more details

Thanks!
Miguel Angel

[estallio]

I have encountered a similar problem. When I specify ...image.jpeg?w=1200&h=1200&fit=clip in the query string of the request, all is working fine - the image is resized to an image with at most 1200x1200 without loosing the aspect-ratio of the original image. If I specify the query via the imageBuilder like so:

imageBuilder
      .image(entry.imageUrl)
      .width(1200)
      .height(1200)
      .fit('clip')
      .url();

the resulting url is ...image.jpeg?rect=1275,0,358,358&w=1200&h=1200&fit=clip and the image is cropped.

In the Sanity documentation for fit, the table states clip: The image is resized to fit within the bounds you specified without cropping or distorting the image..

[dburles]

Also #32

[alexthekiwi]

Running in to this using the next-sanity package too.

Helpers file:

import { createImageUrlBuilder, } from 'next-sanity';

const config = {...}

export const urlFor = (asset) => createImageUrlBuilder(config).image(asset);

Usage within a component:

const imageUrl = urlFor(asset).width(300).height(1200).fit('crop').auto('format');

// The resulting "imageUrl" is cropped to the right height and width, but doesn't respect the focus point?

Examples with an actual image in our studio:

How the image is cropped in the studio:

Original image

Cropped image with w=300&h=900
^ This one should be cropped to the far left, no? It's currently cropping at the centre.

[atu-record]

stumbled upon the same issue -> the focal point is not passed out of the box you have to pass it manually.

urlFor(asset).width(320).height(80).quality(88).focalPoint(hotspot.x,hotspot.y).crop('focalpoint').fit('crop')

so IMHO this is not a bug. but would be helpful to add an example in the documentation
@rexxars - this should be closed

[austencm]

If this isn't a bug, then this part of the docs should be corrected:

<img src={urlFor(author.image).width(200).url()} />

This will ensure that the author image is alway 200 pixels wide, automatically applying any crop specified by the editor and cropping towards the hot-spot she drew.