برش و آپلود تصویر با Thumbnail با استفاده از jQuery و HTML5 در MVC

در این مقاله ما قصد داریم که با طرح یک مثال نحوه برش و آپلود تصویر با نمایش زنده Thumbnail با استفاده از jQuery و HTML5 Canvas در ASP.Net MVC توضیح دهیم.

عکس ها با استفاده از پلاگین Jcrop جی کوئری برش می خورند و با استفاده از HTML5 Canvas به صورت زنده در Thumbnail نمایش داده خواهند شد و در نهایت عکس برش خورده در یک پوشه در سرور با استفاده از Asp.Net Mvc آپلود و ذخیره می شود.

View

View شامل عناصر FileUpload ،Image ، Button ،Submit Button ، HTML5 Canvas و hidden field است.

در داخل رویداد Jquery(document).ready یک رویداد Change برای کنترل کردن FileUpload و یک رویداد هم برای Click برای Html Button تعریف می کنیم.

زمانی که یک فایل در داخل کنترل FileUpload انتخاب می شود ، آن توسط HTML5 FileReader API خوانده می شود و سپس عکس در داخل عنصر Image داده خواهد شد و در نهایت پلاگین Jcrop جی کوئری بر روی عنصر Image پیاده سازی می شود.

پلاگین Jcrop جی کوئری تابع SetCoordinates را در رویدادهای onChange و OnSelect فراخوانی می کند که به ما اجازه ذخیره مختصات و ابعاد را می دهد به عنوان مثال طول و عرض عکس برش خورده در hidden fields.

هنگامی که دکمه Crop کلیک می شود، ابتدا یک نمونه از Canvas HTML5 ساخته می شود و سپس تصویر را در یک شی Image با (OnLoad event handler) مدیریت رویداد onLoad قرار می دهد.

در داخل (OnLoad event handler) مدیریت رویداد onLoad ، عکس اصلی در Canvas با استفاده از طول و عرض ذخیره شده دوباره ترسیم می شود ، به عنوان مثال طول و عرض تصویر برش خورده.

در نهایت base64 string تصویر برش خورده با استفاده از تابع toDataURL از canvas فراخوانی و در imgCropped hidden field ذخیره می شود.

@{
    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;

کنترلر

کنترلر شامل دو اکشن متد است:

یک متد برای مدیریت عملیات از نوع Get که در داخلش یک View ساده برگشت داده خواهد شد.

اکشن متد دومی برای رسیدگی به عملیات از نوع Post برای اپلود کردن عکس برش خورده استفاده می شود و اکشن متد از نوع Get زمانی که بر روی دکمه Upload کلیک میشود فراخوانی می شود.

عکس بریده شده از imgCropped hidden field به عنوان BASE64 string با استفاده از نامش از درخواست خوانده می شود.

از فهرست و سپس این رشته به ارایه ای از بایت که در نهایت در پوشه با استفاده از کلاس 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");
    }
}

آموزش asp.net mvc

فایل های ضمیمه

5980_Example.zip

مرجع تخصصی برنامه نویسان

انجمن تخصصی برنامه نویسان فارسی زبان

دوره های در حال ثبت نام آکادمی برنامه نویسان

برش و آپلود تصویر با Thumbnail با استفاده از jQuery و HTML5 در MVC

فایل های ضمیمه

برنامه نویسان

اگر نیاز به یک مشاور در زمینه طراحی سایت ، برنامه نویسی و بازاریابی الکترونیکی دارید