3 02 2016

Um dia desses eu estava respondendo algumas questões nos fóruns da MSDN e me deparei com uma dúvida muito interessante. Basicamente o autor da pergunta estava querendo comparar as imagens de dois PictureBoxes, só que ele não estava conseguindo. O problema é que, mesmo as imagens sendo idênticas, a sua metodologia de comparação não estava funcionando. Neste artigo, vamos descobrir o porquê disso e veremos como comparar imagens no Windows Forms da maneira correta.

Entendendo o problema

Imagine a situação em que você tem dois PictureBoxes em um Form e você quer saber se a imagem dos dois é igual ou não. Para entendermos melhor, vamos construir um formulário de exemplo:

Como você pode ver, o formulário é extremamente simples. Ele contém dois PictureBoxes (pictureBox1 e pictureBox2) e um botão (compararImagensButton). Ao clicarmos no botão, analisaremos se as imagens são iguais ou diferentes.

Porém, antes de fazermos a comparação das imagens, vamos fazer o carregamento delas. Para testar a comparação, baixei dois arquivos PNG de exemplo deste site. Se você preferir, você pode baixar um arquivo zip com as duas imagens que eu utilizei aqui. Antes de prosseguir você deve colocar as duas imagens disponíveis no arquivo zip dentro do diretório “bin/debug” do projeto de exemplo:

Após ter extraído as imagens, vá até o construtor do formulário para fazermos o carregamento da mesma imagem (imagem1.png) nos dois PictureBoxes:

        public FormComparacaoImagens()
        {
            InitializeComponent();
            var imagem = Image.FromFile("imagem1.png");
            pictureBox1.Image = imagem;
            pictureBox2.Image = imagem;
        }

Feito isso, dê um duplo clique no botão “Comparar Imagens” para implementarmos o código de comparação das imagens. A primeira ideia que vem na cabeça é compará-las utilizando o operador “==” ou o método “Equals“:

        private void compararImagensButton_Click(object sender, EventArgs e)
        {
            if (ComparaImagem(pictureBox1.Image, pictureBox2.Image))
            {
                MessageBox.Show("As imagens são iguais.");
            }
            else
            {
                MessageBox.Show("As imagens são diferentes.");
            }
        }

        private bool ComparaImagem(Image imagem1, Image imagem2)
        {
            return imagem1 == imagem2 || imagem1.Equals(imagem2);
        }

Execute a aplicação de exemplo e clique no botão “Comparar Imagens“:

E o nosso método retorna que as imagens são iguais. Pronto, está tudo funcionando. Fim do artigo, certo? Errado! Esse método de comparação só funciona porque nós carregamos exatamente a mesma instância de “Image” nos dois PictureBoxes. Se alterarmos só um pouquinho a forma de carregamento, esse método deixará de funcionar:

        public FormComparacaoImagens()
        {
            InitializeComponent();
            pictureBox1.Image = Image.FromFile("imagem1.png");
            pictureBox2.Image = Image.FromFile("imagem1.png");
        }

Conseguiu notar a diferença no carregamento? Ao invés de utilizarmos a mesma instância como imagem dos dois PictureBoxes, nós carregamos duas vezes a imagem do arquivo. E, com isso, mesmo que o conteúdo das imagens dos PictureBoxes seja idêntico, o operador “==” e o método “Equals” entenderá que a imagem é diferente (pois eles comparam se as instâncias de “Image” são diferentes, e não o seu conteúdo).

Para resolver esse impasse, temos duas opções. Ou comparamos as imagens byte a byte ou comparamos as imagens pixel a pixel. Vamos ver a diferença entre essas duas metodologias?

Comparando byte a byte

O primeiro tipo de comparação é a comparação byte a byte. Não sei se você sabe, mas, uma imagem é representada no final das contas por uma cadeia de bytes (aliás, todas as variáveis no final das contas são cadeias de bytes). Dessa forma, se pegarmos cada um dos bytes da imagem e compararmos com os bytes da segunda imagem, conseguimos identificar se as imagens são iguais ou não.

Primeiramente, precisaremos de um método para pegar a representação das imagens em array de bytes. Esse método receberá uma instância de Image, criará um MemoryStream, carregará a imagem nesse MemoryStream e copiará os bytes da imagem em um array através do método Read do MemoryStream:

        private byte[] GetImageByteArray(Image image)
        {
            using (var stream = new System.IO.MemoryStream())
            {
                image.Save(stream, System.Drawing.Imaging.ImageFormat.Bmp);
                stream.Seek(0, System.IO.SeekOrigin.Begin);
                var byteArray = new byte[stream.Length];
                stream.Read(byteArray, 0, Convert.ToInt32(stream.Length));
                return byteArray;
            }
        }

Feito isso, para compararmos as duas imagens, basta pegarmos o byte array de cada uma delas e compará-los utilizando o método SequenceEqual da classe Enumerable:

        private bool ComparaImagem(Image imagem1, Image imagem2)
        {
            return Enumerable.SequenceEqual(GetImageByteArray(imagem1), GetImageByteArray(imagem2));
        }

E com isso, a comparação funcionará corretamente, retornando que as imagens são iguais quando o conteúdo delas é igual, independentemente se as instâncias de Image apontam para o mesmo lugar ou não.

Edit: o Ari C. Raimundo fez um comentário muito importante sobre essa metodologia de comparação. Ela não funciona caso as imagens tenham “o mesmo conteúdo” só que com formatos diferentes (por exemplo, a mesma imagem salva em PNG e BMP). Ele sugeriu uma metodologia de comparação utilizando BitmapData.Scan0, porém, eu não consegui fazer funcionar com o exemplo que eu encontrei. De qualquer forma, fica a observação que esse método só funciona caso as imagens realmente estejam vindo do mesmo arquivo. Caso essa não seja a sua realidade, a única alternativa que eu encontrei até agora foi fazer a comparação pixel a pixel (que você pode conferir abaixo).

Comparando pixel a pixel

Outra forma de detectarmos se o conteúdo de duas imagens é idêntico seria compararmos cada um dos pixels da imagem. Essa metodologia é bem parecida com a comparação byte a byte, uma vez que os pixels são representados por bytes no final das contas.

E como é que ficaria para compararmos as imagens dessa forma? Bom, primeiro vamos criar um método que compara os pixels de dois Bitmaps:

        private bool ComparaPixels(Bitmap imagem1, Bitmap imagem2)
        {
            if (imagem1.Width != imagem2.Width || imagem1.Height != imagem2.Height)
                return false;

            for (int x = 0; x < imagem1.Width; x++) 
            { 
                for (int y = 0; y < imagem1.Height; y++) 
                { 
                    if (imagem1.GetPixel(x, y) != imagem2.GetPixel(x, y)) 
                    { 
                        return false; 
                    } 
                } 
            }

            return true;
        }

Precisamos trabalhar com Bitmaps nesse caso porque somente essa classe possui o método GetPixel. Como você pode perceber, o método simplesmente detecta a altura e largura da imagem e percorre cada um dos eixos (x e y) comparando cada pixel de uma imagem com o mesmo pixel da outra. Ao encontrar um pixel diferente, retornamos “false“.

Finalmente, uma vez que temos o método “ComparaPixels“, podemos utilizá-lo no nosso método “ComparaImagem“:

        private bool ComparaImagem(Image imagem1, Image imagem2)
        {
            using (var bitmap1 = new Bitmap(imagem1))
            using (var bitmap2 = new Bitmap(imagem2))
            {
                return ComparaPixels(bitmap1, bitmap2);
            }
        }

Repare que precisamos converter as instâncias de Image em Bitmap. É importante que utilizemos a cláusula “using” ao fazermos isso, pois dessa forma a memória será automaticamente liberada logo após a chamada do método “ComparaPixels“.

Qual opção é melhor?

OK, agora você já sabe como comparar o conteúdo de duas imagens, seja comparando byte a byte ou comparando pixel a pixel. Mas, você deve estar se perguntando: qual é a melhor opção nesse caso?

Eu diria que, em questão de estética do código, tanto faz. Ambas as opções são fáceis de entender e o código está bem limpo e confiável. E em questão de performance?

Bom, nos testes que eu realizei comparando as duas metodologias, a comparação byte a byte foi muito mais rápida que a comparação pixel a pixel. Com as imagens de teste que eu disponibilizei para você, a comparação byte a byte demorou em média 31 milisegundos para executar, enquanto que a comparação pixel a pixel demorou em média 650 milisegundos para executar.

Dessa forma, a não ser que você tenha uma necessidade muito específica e realmente tenha que comparar a imagem pixel a pixel (se você tiver que comparar duas imagens em formatos diferentes – PNG e BMP, por exemplo), sugiro que você utilize a comparação byte a byte.

Concluindo

A comparação do conteúdo de imagens no Windows Forms não é uma tarefa tão trivial. Isso porque não podemos simplesmente utilizar os operadores “==” ou “Equals“, uma vez que eles comparam a instância das imagens e não o seu conteúdo.

Nesse artigo você aprendeu a comparar imagens no Windows Forms através de duas metodologias, bem como um pequeno estudo de qual das duas opções é a melhor.

E você, já precisou comparar duas imagens? Qual das duas metodologias você utilizou? Ou você utilizou uma outra metodologia completamente diferente? Conte para nós nos comentários.

Por fim, convido você a inscrever-se na minha newsletter. Ao fazer isso, você receberá um e-mail toda semana sobre o artigo publicado e ficará sabendo também em primeira mão sobre o artigo da próxima semana, além de receber dicas “bônus” que eu só compartilho por e-mail. Inscreva-se utilizando o formulário logo abaixo.

Até a próxima!

André Lima

Photo by John Lester used under Creative Commons
https://www.flickr.com/photos/pathfinderlinden/7155072088/

Escondendo a tab Main Report no Crystal Reports Utilizando o Report Viewer no ASP.NET MVC