Menu
GIỚI THIỆU
  • Canvas là phần tử mới xuất hiện trong HTML5; Hôm nay chúng ta sử dụng một số thẻ cơ bản của HTML5 Canvas và kết hợp với javascript để tạo Color Picker chuyên nghiệp mà đơn giản nhất.

Sử dụng canvas HTML5 để tạo ứng dụng Color Picker chuyên nghiệp

Hôm nay chúng ta sử dụng một số thẻ cơ bản của HTML5 Canvas và kết hợp với javascript để tạo Color Picker chuyên nghiệp mà đơn giản nhất.

 

Ngay sau đây là hướng dẫn chí tiết để bắt tay vào làm Color Picker

Vậy Canvas là gì?

Canvas là phần tử mới xuất hiện trong HTML5, việc hiểu rõ và sử dụng canvas sẽ giúp các bạn có thể viết được nhiều ứng dụng như games. Trong bài viết này, chúng ta sẽ tạo một ứng dụng nhỏ đơn giản về HTML5 Canvas. Với ứng dụng này, các bạn có thể lấy mã màu theo HEX và RGB mà chúng ta thường gọi với cái tên là ” Color Picker “.

HTML

Tất cả phần tử html cần cho ứng dụng này là một phần tử canvas và các thẻ input cho việc hiển thị mã màu như sau :

<canvas width="600" height="440" id="canvas_picker"></canvas>
<div id="hex">HEX: <input type="text"></input></div>
<div id="rgb">RGB: <input type="text"></input></div>

JavaScript

Bước 1: Đầu tiên chúng ta cần khai báo biến cho canvas như sau :

var canvas = document.getElementById('canvas_picker').getContext('2d');

Bước 2: Kế tiếp chúng ta sẽ ấn định hình nền cho canvas như sau :

var img = new Image();
img.src = 'image.jpg';
$(img).load(function(){
  canvas.drawImage(img,0,0);
});

Bước 3: Kế đến, chúng ta sẽ cần lấy vị trí của con trỏ chuột khi chúng ta click vào canvas.

$('#canvas_picker').click(function(event){
var x = event.pageX - this.offsetLeft;
var y = event.pageY - this.offsetTop;

Bước 4: Và chúng ta sẽ lấy những mã màu từ các vị trí con trỏ chuột như sau :

var imgData = canvas.getImageData(x, y, 1, 1).data;
var R = imgData[0];
var G = imgData[1];
var B = imgData[2];​

Bước 5: Bây giờ chúng ta sẽ lưu trữ những giá trị R, G và B vào chung một biến RGB và hiển thị nó vào các trường input.

var rgb = R + ',' + G + ',' + B;
  $('#rgb input').val(rgb);
});

Bước 6: Kế tiếp là chúng ta sẽ viết thêm 2 hàm chuyển đổi giá trị RGB sang giá trị HEX

function rgbToHex(R,G,B) {return toHex(R)+toHex(G)+toHex(B)}
function toHex(n) {
  n = parseInt(n,10);
  if (isNaN(n)) return "00";
  n = Math.max(0,Math.min(n,255));return "0123456789ABCDEF".charAt((n-n%16)/16) + "0123456789ABCDEF".charAt(n%16);
}

Tổng hợp các bước (Full Code)

Mình xin tổng hợp lại toàn bộ đoạn code cần thiết cho việc viết ứng dụng color picker như sau :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Colorpicker demo</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
 
<canvas width="600" height="440" id="canvas_picker"></canvas>
<div id="hex">HEX: <input type="text"></input></div>
<div id="rgb">RGB: <input type="text"></input></div>
 
<script type="text/javascript">
    var canvas = document.getElementById('canvas_picker').getContext('2d');
 
    // create an image object and get it’s source
    var img = new Image();
    img.src = 'image.jpg';
 
    // copy the image to the canvas
    $(img).load(function(){
      canvas.drawImage(img,0,0);
    });
 
    // http://www.javascripter.net/faq/rgbtohex.htm
    function rgbToHex(R,G,B) {return toHex(R)+toHex(G)+toHex(B)}
    function toHex(n) {
      n = parseInt(n,10);
      if (isNaN(n)) return "00";
      n = Math.max(0,Math.min(n,255));
      return "0123456789ABCDEF".charAt((n-n%16)/16)  + "0123456789ABCDEF".charAt(n%16);
    }
    $('#canvas_picker').click(function(event){
      // getting user coordinates
      var x = event.pageX - this.offsetLeft;
      var y = event.pageY - this.offsetTop;
      // getting image data and RGB values
      var img_data = canvas.getImageData(x, y, 1, 1).data;
      var R = img_data[0];
      var G = img_data[1];
      var B = img_data[2];  var rgb = R + ',' + G + ',' + B;
      // convert RGB to HEX
      var hex = rgbToHex(R,G,B);
      // making the color the value of the input
      $('#rgb input').val(rgb);
      $('#hex input').val('#' + hex);
    });
</script>
 
</body>
</html>

Mình hy vọng qua hướng dẫn làm ứng dụng đơn giản này sẽ giúp các bạn có thể hiểu và sử dụng canvas tốt hơn cho những ứng dụng độc và mới lạ của riêng chính bản thân mình.

Ghi nguồn hoicode.com khi đăng tải lại bài viết này.
Link: Sử dụng canvas HTML5 để tạo ứng dụng Color Picker chuyên nghiệp
Tags: html5 công nghệ html flash hình ảnh html5 video html5
Category: HTML
Mạnh xã hội: Follow fanpage của team https://www.facebook.com/hoicode/ để tiếp tục theo dõi các loạt bài mới nhất về HTML,Java,C,C++,Javascript,HTML,PHP,Python,Database,Mobile.... mới nhất của chúng tôi.

Chia sẻ liên kết

ĐĂNG BÌNH LUẬN: Đăng câu hỏi trên Facebook để được hỗ trợ nhanh nhất.

    Email của bạn sẽ được sử dụng với mục đích thông báo tin tuyển dụng mới hoặc các bài viết mới.

    captcha