Lập trình web

Hướng dẫn tạo ứng dụng như Instagram trên website

Chia sẻ nhanh

Trong hướng dẫn này, chúng tôi sẽ tạo ra một ứng dụng web đơn giản cho phép bạn kéo một bức ảnh từ máy tính của bạn vào cửa sổ trình duyệt. Đồng thời có thể áp dụng style định sẵn cho bức ảnh đó. Nó tương tự Instagram.

Để hoàn thiện ứng dụng này,chúng tôi sẽ sử dụng một số thư viện JavaScript như sau:
- Caman.js: Đây là thư viện cho phép bạn áp dụng hiệu ứng khác nhau vào một hình ảnh. Nó đi kèm 18 bộ lọc cài sẵn mà chúng ta sẽ sử dụng trong ví dụ này. Có thể tạo ra nhiều hơn nếu bạn muốn.
- Filereader.js: Đây là thư viện cho phép bạn kéo thả. tương tác mạnh mẽ với HTML5.
- jQuery mousewheel: Plugin này để di chuyển các bộ lọc bằng scroll mouse.
- Bên cạnh đó, chúng tôi sử dụng jquery phiên bản mới nhất tại thời điểm viết bài :)



Bước 1: Tạo HTML có nội dung như sau

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

	<title>Instagram-like Filters with jQuery | HiFlyer 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>




Bước 2: Để ứng dụng run tốt chúng ta chú ý tới cách thức làm việc như sau.
a. Cho phép kéo thả ảnh
b. Tạo bản sao của bức ảnh đó với kích thước max: 500px x 500px
c. Áp dụng hiệu ứng cho bản sao đó.

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();

	});

});


Để theo dõi tốt hơn, các bạn có thể download source code hoặc xem demo tại đây.

DEMO | DOWNLOAD SOURCE CODE

Bình luận

TOP

Bạn đã sẵn sàng chuyển ý tưởng tuyệt vời
của bạn thành hiện thực?