Comparação de imagens com JQuery e Asp.NET MVC

O desenvolvimento moderno da web se concentra cada vez mais na interação do usuário, e hoje vamos ver um tutorial simples de como realizarmos o efeito de “comparação” entre duas imagens. Twenty Twenty é um desses plugins que fornece visualização de comparação de imagem interativa. Este plugin baseado em JQuery pode ser utilizado para mostrar a comparação de produtos de forma mais interativa.

A primeira coisa a ser necessária, é possuir um projeto de MVC já criado para que possamos utilizar e adicionar as referências do plugin. Faça o download do plugin aqui. Após o download, eu criei uma pasta chamada plugin e adicionei a referência do mesmo em uma view com a estrutura básica necessária, no caso eu adicionei na view Shared->_Layout.cshtml que é a view compartilhada do nosso projeto, sendo o mais recomendado adicionarmos referências por lá:

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8" />  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>@ViewBag.Title</title>  
    @Styles.Render("~/Content/css")  
    @Scripts.Render("~/bundles/modernizr")  
  
    <!-- Font Awesome -->  
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />  
  
    <!-- Img Diff -->  
    @Styles.Render("~/Plugin/Twenty-Twenty/css")  
</head>  
<body>  
    <div class="navbar navbar-inverse navbar-fixed-top">  
        <div class="container">  
            <div class="navbar-header">  
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">  
                    <span class="icon-bar"></span>  
                    <span class="icon-bar"></span>  
                    <span class="icon-bar"></span>  
                </button>  
            </div>  
        </div>  
    </div>  
    <div class="container body-content">  
        @RenderBody()  
        <hr />  
        <footer>  
            <center>  
                <p><strong>Copyright © @DateTime.Now.Year - <a href="http://wwww.asmak9.com/">Asma's Blog</a>.</strong> All rights reserved.</p>  
            </center>  
        </footer>  
    </div>  
  
    @*Scripts*@  
    @Scripts.Render("~/bundles/jquery")  
    @Scripts.Render("~/bundles/bootstrap")  
  
    <!-- Img Diff -->  
    @Scripts.Render("~/Plugin/Twenty-Twenty")  
  
    @RenderSection("scripts", required: false)  
</body>  
</html>

Agora na sua controller (se não existir, crie uma), você precisará adicionar o seguinte código:

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Web;  
using System.Web.Mvc;  
  
namespace ImgDiff.Controllers  
{  
    public class ImgDiffController : Controller  
    {  
        #region Index view method.  
 
        #region Get: /ImgDiff/Index.  
  
        /// <summary>  
        /// Get: /ImgDiff/Index.  
        /// </summary>          
        /// <returns>Return index view</returns>  
        public ActionResult Index()  
        {  
            try  
            {  
            }  
            catch (Exception ex)  
            {  
                // Info  
                Console.Write(ex);  
            }  
  
            // Info.  
            return this.View();  
        }  
 
        #endregion  
 
        #endregion  
    }  
}

Agora na sua view (se não existir, crie uma), adicione as imagens e o trecho do plugin para comparação das imagens:

@{  
    ViewBag.Title = "ASP.NET MVC5: Jquery Image Diff";  
}  
  
  
<div class="row">  
    <div class="panel-heading">  
        <div class="col-md-8">  
            <h3>  
                <i class="fa fa-file-text-o"></i>  
                <span>ASP.NET MVC5: Jquery Image Diff</span>  
            </h3>  
        </div>  
    </div>  
</div>  
  
<div class="row">  
    <section class="col-md-7 col-md-push-3">  
        <div class="large-8 columns">  
            <div class="twentytwenty-container">  
                <img src="~/Content/img/ori.jpg" />  
                <img src="~/Content/img/bright.jpg" />  
            </div>  
        </div>  
    </section>  
</div>  

<script>$(document).ready(function ()  
{  
   $(".twentytwenty-container").twentytwenty({ default_offset_pct: 0.5 });  
});  

</script>

No trecho de código acima, eu adicionei o plugin “Twenty Twenty” JQuery para mostrar minha diferença/comparação de imagens. Também configurei a posição do controle deslizante de comparação padrão para ser centrada, ela pode ser definida entre o intervalo de 0 a 1.

Um grande abraço a todos!

Referências: https://gallery.technet.microsoft.com/ASPNET-MVC5-JQuery-Image-1001a821