locked
GetPixel Color from an Image Not grabbing correct color

    Question

  • Image pallet = sender as Image;
    image = await new WriteableBitmap((int)pallet.ActualWidth, (int)pallet.ActualHeight).FromContent(new Uri("ms-appx:///Assets/Pallet.png"));
    PointerPoint dot = e.GetCurrentPoint(pallet);
    Color color = image.GetPixel((int)dot.Position.X, (int)dot.Position.Y);

    OK, I am using the WriteableBitmapEx add-in for this. I get a color back, but it appears to only be sampling from a very small portion of the Image.

    The Image I am using is 2663x1500; The XAML is:

        <Grid x:Name="LayoutRoot">
            <Grid.Background>
                <ImageBrush ImageSource="/Assets/background.png" Stretch="Fill"/>
            </Grid.Background>
            
            <Image Source="/Assets/Pallet.png" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stretch="Fill" x:Name="Pallet" PointerEntered="Color_PointerEntered" PointerMoved="Color_PointerMoved"/>
    
            <Grid HorizontalAlignment="Right" VerticalAlignment="Bottom" Height="100" Width="100" Background="Transparent" x:Name="sampler"/>
        </Grid>

    So as you see above, I am filling the screen with the image, small or big screen size, doesn't matter.

    When I try to get width or Height of the Image I get NaN, which is understandable since it is not hard coded to a set dimension. But the ActualWidth and Height return something like 667x339 in the emulator which is also fine, I think it is the 4" Screen size in the Emulator (Windows Phone).

    So it seems to be sampling my point from the Large image of only the top left portion that is 667x339, which is why I am getting the wrong color.

    My question is how to I make my WriteableBitmap translate the point, or squish the image into the bounds of the screen so I can get the correct pixel color?

    Thank you!


    Thanks, Bobby Harrell

    Tuesday, April 22, 2014 5:49 PM

Answers

  • Thanks Rob, I figured it out.

    WriteableBitmap image = await new WriteableBitmap(1,1).FromContent(new Uri("ms-appx:///Assets/Pallet.png"));
    WriteableBitmap resized = image.Resize((int)Pallet.ActualWidth, (int)Pallet.ActualHeight, WriteableBitmapExtensions.Interpolation.Bilinear);
    
    PointerPoint dot = e.GetCurrentPoint(Pallet);
    Color color = resized.GetPixel((int)dot.Position.X, (int)dot.Position.Y);
    sampler.Background = new SolidColorBrush(color);


    Thanks, Bobby Harrell

    • Marked as answer by bobbydharrell Thursday, April 24, 2014 3:10 PM
    Tuesday, April 22, 2014 6:35 PM

All replies

  • WriteableBitmap doesn't do that. It will give you access to the PixelArray, but any interpretation of that array is up to you.

    You can control how the image is decoded by using an explicit BitmapDecoder to read in your image. This will let you choose the final size and interpolation mode used when scaling.

    To match the mouse coordinates to physical points on the bitmap you'll probably want to create the WriteableBitmap to match the size of the Image control and not to stretch it. Otherwise you'll have to map between coordinate systems with some resolution loss.

    You can also check with the WriteableBitmapEx team to see if it provides access to this sort of behavior. I can't help directly with the WriteableBitmapEx methods (e.g. FromContent and GetPixel).

    --Rob

    Tuesday, April 22, 2014 6:09 PM
    Owner
  • Thanks Rob, I figured it out.

    WriteableBitmap image = await new WriteableBitmap(1,1).FromContent(new Uri("ms-appx:///Assets/Pallet.png"));
    WriteableBitmap resized = image.Resize((int)Pallet.ActualWidth, (int)Pallet.ActualHeight, WriteableBitmapExtensions.Interpolation.Bilinear);
    
    PointerPoint dot = e.GetCurrentPoint(Pallet);
    Color color = resized.GetPixel((int)dot.Position.X, (int)dot.Position.Y);
    sampler.Background = new SolidColorBrush(color);


    Thanks, Bobby Harrell

    • Marked as answer by bobbydharrell Thursday, April 24, 2014 3:10 PM
    Tuesday, April 22, 2014 6:35 PM