توضیحات و دانلود

برش و بارگذاری تصویر با تصویر کوچک با استفاده از jQuery و HTML5 در ASP.Net MVC
0 0
برش و بارگذاری تصویر با تصویر کوچک با استفاده از jQuery و HTML5 در ASP.Net MVC

با سلام در این مقاله با یک مثال چگونگی برش و بارگذاری تصویر با پیش نمایش زنده تصاویر کوچک با استفاده از jQuery و HTML5 Canvas در ASP.Net MVC Razor توضیح خواهیم داد .
تصویر با استفاده از پلاگین Jcrop jQuery برش داده می شود و پیش نمایش Live Thumbnail با استفاده از بوم HTML5 نمایش داده می شود و در آخر تصویر Cropped در پوشه ای از سرور با استفاده از ASP.Net MVC Razor بارگذاری و ذخیره می شود.
View
View شامل یک عنصر FileUpload ، یک عنصر تصویر، یک دکمه ارسال ، یک عنصر بوم HTML5 و برخی از عناصر زمینه پنهان است.
در داخل فایل دستی برای تهیه فایل jQuery ، یک رویداد handler تغییر به کنترل FileUpload اختصاص داده می شود و یک رویداد handler کلیک به دکمه HTML اختصاص می یابد.
هنگامی که یک فایل در کنترل HTML FileUpload انتخاب می شود ، با استفاده از HTML5 FileReader API فراخوانی و سپس تصویر در عنصر Image نمایش داده می شود و در آخر ، پلاگین Jcrop jQuery روی عنصر Image اعمال می شود.
پلاگین Jcrop فراخوانی می کند تا عملکرد SetCoordinates را در رویدادهای onChange و onSelect داشته باشد ، که به ما این امکان را می دهد تا مختصات و ابعاد یعنی قد و عرض تصویر خرد شده را در قسمت های مخفی ذخیره کنیم.
با کلیک بر روی دکمه Crop ، ابتدا نمونه ای از بوم HTML5 ایجاد می شود و سپس با رویداد OnLoad ، تصویر را در یک شی تصویر بارگذاری می کند.
با استفاده از مختصات و ابعاد ذخیره شده ، از جمله ارتفاع و عرض تصویر برش داده شده ، در داخل تابلوی رویداد OnLoad ، تصویر اصلی بر روی بوم تغییر شکل می یابد.
در نهایت رشته base64 تصویر برش داده شده با استفاده از روش toDataURL از بوم گرفته می شود و در قسمت پنهان imgCropped ذخیره می شود.

@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
</head>
<body>
    @using (Html.BeginForm("Save", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
        <input type="file" id="FileUpload1"/>
        <br/>
        <br/>
        <table border="0" cellpadding="0" cellspacing="5">
            <tr>
                <td>
                    <img id="Image1" src="" alt="" style="display: none"/>
                </td>
                <td>
                    <canvas id="canvas" height="5" width="5"></canvas>
                </td>
            </tr>
        </table>
        <br/>
        <input type="button" id="btnCrop" value="Crop" style="display: none"/>
        <input type="submit" id="btnUpload" value="Upload" style="display: none"/>
        <input type="hidden" name="imgX1" id="imgX1"/>
        <input type="hidden" name="imgY1" id="imgY1"/>
        <input type="hidden" name="imgWidth" id="imgWidth"/>
        <input type="hidden" name="imgHeight" id="imgHeight"/>
        <input type="hidden" name="imgCropped" id="imgCropped"/>
    }
 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/tapmodo/Jcrop/master/js/jquery.Jcrop.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#FileUpload1').change(function () {
                $('#Image1').hide();
                var reader = new FileReader();
                reader.onload = function (e) {
                    $('#Image1').show();
                    $('#Image1').attr("src", e.target.result);
                    $('#Image1').Jcrop({
                        onChange: SetCoordinates,
                        onSelect: SetCoordinates
                    });
                }
                reader.readAsDataURL($(this)[0].files[0]);
            });
 
            $('#btnCrop').click(function () {
                var x1 = $('#imgX1').val();
                var y1 = $('#imgY1').val();
                var width = $('#imgWidth').val();
                var height = $('#imgHeight').val();
                var canvas = $("#canvas")[0];
                var context = canvas.getContext('2d');
                var img = new Image();
                img.onload = function () {
                    canvas.height = height;
                    canvas.width = width;
                    context.drawImage(img, x1, y1, width, height, 0, 0, width, height);
                    $('#imgCropped').val(canvas.toDataURL());
                    $('#btnUpload').show();
                };
                img.src = $('#Image1').attr("src");
            });
        });
        function SetCoordinates(c) {
            $('#imgX1').val(c.x);
            $('#imgY1').val(c.y);
            $('#imgWidth').val(c.w);
            $('#imgHeight').val(c.h);
            $('#btnCrop').show();
        };
    </script>
</body>
</html>

فضاهای نام
شما باید نامهای زیر را وارد کنید.

using System.IO;

Controller
Controller از دو روش تشکیل شده است.
روش انجام عملیات GET
در داخل این روش Action ، به سادگی View داده می شود.
روش دستیابی به عملکرد POST برای بارگذاری تصویر Cropped
با کلیک بر روی دکمه بارگذاری ، این روش فراخوانی می شود. تصویر برش داده شده به عنوان رشته BASE64 از قسمت پنهان imgCropped با استفاده از نام آن از مجموعه Request.Form خوانده می شود و سپس به یک Array Byte تبدیل که در نهایت با استفاده از کلاس FileStream در پوشه ذخیره می شود.

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }
 
    [HttpPost]
    public ActionResult Save()
    {
        string base64 = Request.Form["imgCropped"];
        byte[] bytes = Convert.FromBase64String(base64.Split(',')[1]);
        using (FileStream stream = new FileStream(Server.MapPath("~/Images/Cropped.png"), FileMode.Create))
        {
            stream.Write(bytes, 0, bytes.Length);
            stream.Flush();
        }
        return RedirectToAction("Index");
    }
}

 


دانلود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

ارسال نظر
ارسال پیام به :