Crop an image using another Rect in Unity

user_8980240 0
Viewed 3894

I have a Texture2D, applied on a RawImage, taken from a webcam, which I call "originalImage". I want to crop just a block of this originalImage in base of the position of another rect, called "cropArea". Basically cropArea is a "guide" over my originalImage where I want the user to put his hand, so that I can get another image for just the hand.

The problem is that I can't get the correct pixels of the originalImage relative to the cropArea position. The actually cropped area has an offset relative to cropArea's position I can't understand. Here's a picture showing my problem (I used a random image taken from google as originalImage Texuter2D instead of my webcam)

Crop Issue Screenshot

I have cropArea as child of originalImage in my Hyerarchy, and here's how they were both set up on my inspector when I took the screenshot above.

Images in Inspector

Here's my code (It's a code I've written to reproduce my problem, so there's no other codes involved in the function):

[SerializeField] private RawImage originalImage;
[SerializeField] private RawImage cropArea;
[SerializeField] private RawImage croppedImage;

void Update() {
    if (Input.GetKeyDown(KeyCode.S))
    {
        Texture2D croppedTexture = new Texture2D((int)cropArea.rectTransform.rect.width, (int)cropArea.rectTransform.rect.height);
        Texture2D originalTexture = (Texture2D)originalImage.mainTexture;

        croppedTexture.SetPixels(originalTexture.GetPixels((int)cropArea.rectTransform.anchoredPosition.x, (int)cropArea.rectTransform.anchoredPosition.y, (int)cropArea.rectTransform.rect.width, (int)cropArea.rectTransform.rect.height));
        croppedTexture.Apply();
        croppedImage.texture = croppedTexture;
    }
}

Again, I've tried many combinations in my code, triyng to use localPosition or rect instead of anchoredPosition to get cropArea's position, getting different results, but never the correct one.

I think I maybe missing some relations between the position of cropArea and the pixels to get from originalImage, but I really can't get what is it. Everytime I have to deal with Unity UI in runtime it gets me headache, it's so confused and anti-intuitive.

texture2d unity3d user-interface
4 Answers

Ok, so as I've written under @obywan answer, my problem was that my originalImage was being stretchet to fill the canvas, but the source to crop wasn't the RawImage, but RawImage's texture, which doesn't get stretched instead. I thank obywan for making me realize that my code was actually working fine and for bringing me to think that there might have been a dimension problem.

I've found a working solution writing a function to resize the texture, so that I have a correspondence between texture pixels position and what my eyes actually see in the UI. Once resized the texture, I was able to use cropArea position to get pixels from the resized texture, with the wanted result.

So, this is the resizing texture function:

Texture2D ResizeTexture2D(Texture2D originalTexture, int resizedWidth, int resizedHeight)
{
    RenderTexture renderTexture = new RenderTexture(resizedWidth, resizedHeight, 32);
    RenderTexture.active = renderTexture;
    Graphics.Blit(originalTexture, renderTexture);
    Texture2D resizedTexture = new Texture2D(resizedWidth, resizedHeight);
    resizedTexture.ReadPixels(new Rect(0, 0, resizedWidth, resizedHeight), 0, 0);
    resizedTexture.Apply();
    return resizedTexture;
}

This is instead my Update method with ResizeTexture2D function implemented to work fine:

void Update()
{
    if (Input.GetKeyDown(KeyCode.S))
    {
        Texture2D croppedTexture = new Texture2D((int)cropArea.rectTransform.rect.width, (int)cropArea.rectTransform.rect.height);
        Texture2D originalTexture = (Texture2D)originalImage.mainTexture;
        Texture2D originalTextureResized = ResizeTexture2D(originalTexture, (int)originalImage.rectTransform.rect.width, (int)originalImage.rectTransform.rect.height);
        croppedTexture.SetPixels(originalTextureResized.GetPixels((int)cropArea.rectTransform.anchoredPosition.x, (int)cropArea.rectTransform.anchoredPosition.y, (int)cropArea.rectTransform.rect.width, (int)cropArea.rectTransform.rect.height));
        croppedTexture.Apply();
        croppedImage.texture = croppedTexture;
    }
}
user_89802400

Your script works fine. You just need to adjust hierarchy and pivots. I placed crop area under main image and set pivot of crop area to 0,0 as well as min-max anchors to 0,0,0,0.

See images. (you can ask questions in comments if there is any) enter image description here

enter image description here

enter image description here

user_34727160

4th line in ResizeTexture2D should be: Texture2D resizedTexture = new Texture2D(resizedWidth, resizedHeight);

user_178468120

If you're okay boxing the texture as a Sprite. Then Sprite.Create can handle the cropping for you by using its rect argument:

void Update()
{
    if (Input.GetKeyDown(KeyCode.S))
    {
        Texture2D originalTexture = (Texture2D)originalImage.mainTexture;
        var textureCropArea = Rect.MinMaxRect(cropArea.rectTransform.anchoredPosition.x, cropArea.rectTransform.anchoredPosition.y, cropArea.rectTransform.rect.width, cropArea.rectTransform.rect.height);
        croppedImage.texture = Sprite.Create(originalTexture, textureCropArea, Vector2.one / 2, 100).texture;
    }
}
user_2287380
Related