FabricJS (Canvas library) và xây dựng tool chế ảnh – thư viện Javascript

Yeah, quay lại series Javascript World đầy hào hứng thật ra thất nghiệp ở nhà viết bậy bạ chơi.  Nay mình giới thiệu cho các bạn 1 library thao tác trên Canvas – FabricJS. Rồi sử dụng thư viện này làm tool chế ảnh đơn giản như Haivl ngày xưa!

Bài viết này không có nhận được xu nào từ FabricJS, Nếu ai đó làm ở FabricJS đọc được tiếng Việt thì có thể liên hệ tui quảng cáo nhé.

Lên kế hoạch thao tác Fabric Javascript

Các nhân vật xuất hiện

  • Bootstrap – Hậu cần xây dựng hậu trường, bối cảnh
  • FabricJS – Nhân vật chính
  • Google & Stackoverflow – Đạo diễn

Tìm hiểu nhân vật chính

Trang chủ : http://fabricjs.com/
Trước khi đọc dòng này thì chắc chắn rằng bạn đã vào trang chủ của nhân vật chính để hiểu sơ sơ về nhân vật chính tham gia bộ tool chế ảnh này nhé. Hehe

Lên kịch bản

Sản phẩm cuối cùng giống giống cái tool chế ảnh này: http://xem.vn/builder/meme/6
Link để chơi thôi không coi cũng không sao đâu! Đây giao diện cuối cùng của app

Hơi xấu, nhưng chịu khó nhìn cũng được

Tiến hành thôi

Chương trình khá lớn nên tui chia ra 1 file HTML (index.html), 1 file JS để xử lý (tool.js), 1 đống file hình ảnh làm Background cho Canvas. Hình là nguồn tài nguyên quý giá và vô tận bạn có thể tìm kiếm trên google mà chưa phải trả phí. Nếu bạn muốn trả phí thì nó không thuộc phạm trù bài viết này

Dựng hậu trường (index.html)

Khúc đầu

Một số thư viện và style nho nhỏ

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link type="text/css" rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css" />
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
    <script src="http://fabricjs.com/lib/fabric.js"></script>
    <style>
        canvas{
            border: 1px solid #ccc;
            margin: auto;
        }
        .canvas-container{
           margin: auto;
        }
        .thumbnail{
         height: 163px;
        }
    </style>
</head>

Khúc body 6 múi

Giao diện, chia

<body>
<h1 class="text-center">Tool chế ảnh</h1>
<div class="container">
<div class="row">
<div class="col-lg-8">
<h2>Canvas</h2>
<div>
                <canvas width="600" height="400"  id="canvas"></canvas>
            </div>
</div>
<div class="col-lg-4">
<div class="row">
<h2>Editor <a  id="ctrlSave" href="#"><i class="glyphicon glyphicon-save"></i></a></h2>
</div>
<div class="row">
<h3>Text</h3>
<div class="row">
<div class="col-lg-12">  
                         <div class="input-group">
                          <input id="ctrlText" type="text" class="form-control" placeholder="Text">
                          <div id="ctrlAddText" class="input-group-addon"><i class="glyphicon glyphicon-send"></i></div>
                        </div>
                    </div>
 
</div>
</div>
 
<div class="row">
<h3>Background</h3>
<div class="col-lg-6">
<img class="thumbnail img-responsive" src="bg/bg1.jpg" />
</div>
<div class="col-lg-6">
<img class="thumbnail img-responsive" src="bg/bg2.jpg" />
</div>
<div class="col-lg-6">
<img class="thumbnail img-responsive" src="bg/bg3.jpg" />
</div>
<div class="col-lg-6">
<img class="thumbnail img-responsive" src="bg/bg4.jpg" />
</div>
</div>
</div>
</div>
</div>
<script src="js/tool.js"></script>
</body>
</html>

Ta sẽ tập trung vào một số đối tượng class thumbnail, id : canvas, ctrlText, ctrlAddText, ctrlSave

Click thumbnail -> set background Canvas
Click ctrlAddText -> lấy text (value) của ctrlText thêm vào Canvas
Rồi kéo thả chữ vào vị trí các kiểu =))
Click ctrlSave -> Canvas chuyển thành file Hình ảnh rồi tải xuống máy người dùng

Xem việc làm javascript đãi ngộ tốt trên TopDev

Action (tool.js)

Khởi tạo đối tượng Canvas

var canvas = new fabric.Canvas('canvas', {});

Hãy tưởng tượng fabric là nhà máy sản xuất người mẫu. Canvas là người mẫu, còn các hoạt động khác nhằm lên đồ, trang điểm, trang phục các kiểu cho người mẫu này.

Đối tượng xử lý phần Background

var BackgroundImage = {
setEvent: function(){
$('.thumbnail').click(function(){
BackgroundImage.handleEvent(this)
})
},
handleEvent: function(imgElement) {
var src = $(imgElement).attr('src')
    fabric.Image.fromURL(src, function(oImg) {
       canvas.setBackgroundImage(oImg, canvas.renderAll.bind(canvas))
       canvas.setWidth(oImg.width);
       canvas.setHeight(oImg.height);
    });
}
}

Đây là phần mặc đồ cho người mẫu canvas. Ta sẽ chọn những bộ đồ từ mấy .thumbnail. Có cái hơi kỳ, đồ thì nhiều size, nhưng người mẫu thì chỉ có 1 nên người mẫu phải ăn uống tăng giảm ký (setWidth), giảm chiều cao (setHeight) cho vừa với bộ đồ! Haha

Đối tượng xử lý Text

var Text = {
setEvent: function(){
$('#ctrlAddText').click(function(){
Text.handleEvent();
})
},
handleEvent: function(){
var content = $('#ctrlText').val();
var param = {
fill: 'black', // color
fontSize: 35,
};
var textObj = new fabric.Text(content, param);
canvas.add(textObj)
}
}

Phần trang điểm cho người mẫu bằng phụ kiện (Text). Sau này bạn có thể mở rộng làm color, font size, đậm, nghiêng, gạch dưới, … cho đối tượng Text này. Tham khảo docs của Fabric để biết thêm chi tiết.

Đối tượng xử lý Download

var Download = {
setEvent: function(){
$('#ctrlSave').click(function(){
Download.handleEvent(this);
})
},
handleEvent: function(anchorElement){
var dataURL = document.getElementById('canvas').toDataURL('image/png');
anchorElement.href = dataURL;
anchorElement.download = "RandomName.png"
}
}

Chụp hình đóng cuốn, gửi tới fan hâm mộ ?

Lưu ý nhỏ : #ctrlSave phải là thẻ a, chỉ có thể là thẻ a, không gì khác ngoài thẻ a. Vì thế mới set vào thuộc tính href + download.

Khởi tạo Chương trình

BackgroundImage.setEvent();
Text.setEvent();
Download.setEvent();
Đọc đến khúc này thì cũng là lúc kết thúc chương trình rồi =))

Lời kết

Source code thì mình có để ở đây, bạn nào lười đọc có thể vào đây coi, cứ vào đây: Link 16 phút

Mình cũng có viết 1 tool chế ảnh tương tự cũng trên thư viện này, cũng phong cách code này, nhưng bự và bừa bãi hơn nhiều! ( Nên nay mình cũng muốn chia sẽ nhẹ thôi, không muốn phức tạp hóa công cụ gì hết, các bạn cứ thỏa sức tỏa sáng tạo trong việc lập trình. Hehe.

TopDev Via Codedem

Tham khảo các vị trí tuyển dụng lập trình viên hấp dẫn tại Topdev