ساخت اپیلیکیشن افکت گذاری روی تصاویر

ارسال توسط:مدیر سایت ۱۰ مهر ۱۳۹۲ درCss, JavaScript, آموزش یک دیدگاه 1928 بازدید

در این آموزش ما به شما نحوه ساخت یک اپیلیکیشن ساده رو میدیم تا شما بتونید عکس خود را از کامپیوترتان به صفحه مرورگرتان بیاورید و افکت دلخواه را روی آن اعمال کنید.ما برای انجام این پروژه باید از چندین کتابخانه javascript استفاده کنیم که عبارتند از

برای مشاهده لینک وارد شود

ساخت اپیلیکیشن تحت وب افکت گذاری روی تصاویر

Caman.js—این یک کتابخانه قدرتمند است که به شما این امکان را می دهد تا افکت های مختلف را روی تصویر اعمال کنید.(این کتابخانه شامل ۱۸ نوع افکت مختلف است.)

Filereader.js امکان کار کردن باdrag/drop را در HTML5 آسان میکند.

jQuery MouseWheel ما از این پلاگین برای scrool بین افکت ها استفاده می کنیم.

در قدم اول ما کد های HTML را مینویسیم:

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />

    <title>Instagram-like Filters with jQuery | 8np Demo</title>
    <link href="assets/css/style.css" rel="stylesheet" />

    <!-- Include the Yanone Kaffeesatz font -->
    <link href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,200" rel="stylesheet" />

</head>
<body>

    <h1>Instagram <b>Filters</b></h1>
    <div id="photo"></div>

    <div id="filterContainer">
        <ul id="filters">
            <li> <a href="#" id="normal">Normal</a> </li>
            <li> <a href="#" id="vintage">Vintage</a> </li>
            <li> <a href="#" id="lomo">Lomo</a> </li>
            <li> <a href="#" id="clarity">Clarity</a> </li>
            <li> <a href="#" id="sinCity">Sin City</a> </li>
            <!-- 14 More filters go here -->
        </ul>
    </div>

    <!-- Libraries -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script src="assets/js/filereader.min.js"></script>
    <script src="assets/js/caman.full.js"></script>
    <script src="assets/js/jquery.mousewheel.min.js"></script>
    <script src="assets/js/script.js"></script>

</body>
</html>

اکنون کد های javascript/jQuery

برای کاردن کدمان باید کار های زیر را انجام دهیم:

۱-قبول کردن عکس هنگامdrag/drop کردن

۲-ساخت یک عنصر جدید با حداکثر سایز۵۰۰*۵۰۰ برای عکس و نگه داشتن آن در حافظه

۳-منتظر کلیک کردن روی افکت ها بمانیم تا هنگام کلیک شدن:

ایجاد یک clone برای عکس اصلی

پاک کردن تمامی افکت های موجود در صفحه

اعمال کردن clone بر روی تگ #photo

اگر افکت انتخابی به غیر از حالت عادی عکس باشد کتابخانه caman فراخوانی میشود

افکت انتخابی توسط کلاس active فعال می شود.

۴-افکت اصلی حذف میشود.

اکنون گفته هایمان را اعمال می کنیم.

assets/js/script.js

$(function() {

    var	maxWidth = 500,
        maxHeight = 500,
        photo = $('#photo'),
        originalCanvas = null,
        filters = $('#filters li a'),
        filterContainer = $('#filterContainer');

    // Use the fileReader plugin to listen for
    // file drag and drop on the photo div:

    photo.fileReaderJS({
        on:{
            load: function(e, file){

                // An image has been dropped.

                var img = $('<img>').appendTo(photo),
                    imgWidth, newWidth,
                    imgHeight, newHeight,
                    ratio;

                // Remove canvas elements left on the page
                // from previous image drag/drops.

                photo.find('canvas').remove();
                filters.removeClass('active');

                // When the image is loaded successfully,
                // we can find out its width/height:

                img.load(function() {

                    imgWidth  = this.width;
                    imgHeight = this.height;

                    // Calculate the new image dimensions, so they fit
                    // inside the maxWidth x maxHeight bounding box

                    if (imgWidth >= maxWidth || imgHeight >= maxHeight) {

                        // The image is too large,
                        // resize it to fit a 500x500 square!

                        if (imgWidth > imgHeight) {

                            // Wide
                            ratio = imgWidth / maxWidth;
                            newWidth = maxWidth;
                            newHeight = imgHeight / ratio;

                        } else {

                            // Tall or square
                            ratio = imgHeight / maxHeight;
                            newHeight = maxHeight;
                            newWidth = imgWidth / ratio;

                        }

                    } else {
                        newHeight = imgHeight;
                        newWidth = imgWidth;
                    }

                    // Create the original canvas.

                    originalCanvas = $('<canvas>');
                    var originalContext = originalCanvas[0].getContext('2d');

                    // Set the attributes for centering the canvas

                    originalCanvas.attr({
                        width: newWidth,
                        height: newHeight
                    }).css({
                        marginTop: -newHeight/2,
                        marginLeft: -newWidth/2
                    });

                    // Draw the dropped image to the canvas
                    // with the new dimensions
                    originalContext.drawImage(this, 0, 0, newWidth, newHeight);

                    // We don't need this any more
                    img.remove();

                    filterContainer.fadeIn();

                    // Trigger the default "normal" filter
                    filters.first().click();
                });

                // Set the src of the img, which will
                // trigger the load event when done:

                img.attr('src', e.target.result);
            },

            beforestart: function(file){

                // Accept only images.
                // Returning false will reject the file.

                return /^image/.test(file.type);
            }
        }
    });

    // Listen for clicks on the filters

    filters.click(function(e){

        e.preventDefault();

        var f = $(this);

        if(f.is('.active')){
            // Apply filters only once
            return false;
        }

        filters.removeClass('active');
        f.addClass('active');

        // Clone the canvas
        var clone = originalCanvas.clone();

        // Clone the image stored in the canvas as well
        clone[0].getContext('2d').drawImage(originalCanvas[0],0,0);

        // Add the clone to the page and trigger
        // the Caman library on it

        photo.html(clone);

        var effect = $.trim(f[0].id);

        Caman(clone[0], function () {

            // If such an effect exists, use it:

            if( effect in this){
                this[effect]();
                this.render();
            }
        });

    });

    // Use the mousewheel plugin to scroll
    // scroll the div more intuitively

    filterContainer.find('ul').on('mousewheel',function(e, delta){

        this.scrollLeft -= (delta * 50);
        e.preventDefault();

    });

});

پایان