برنامه نویسان نوین پندار خاص ترین مرجع آموزش برنامه نویسی
در این آموزش ما به شما نحوه ساخت یک اپیلیکیشن ساده رو میدیم تا شما بتونید عکس خود را از کامپیوترتان به صفحه مرورگرتان بیاورید و افکت دلخواه را روی آن اعمال کنید.ما برای انجام این پروژه باید از چندین کتابخانه 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();
});
});
پایان
+10
هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.
Thank\’s