Lập trình tự thiết kế Thiệp Tết

Bài viết chia sẻ về một vài đoạn mã tự lập trình thiết để kế thiệp Tết gửi cho người thân hoặc khách hàng bằng cách sử dụng thư viện Fabricjs.

Từ ngày PVI phát hành bảo hiểm điện tử, mình bận rộn hơn vì phải xuất ấn chỉ bảo hiểm điện tử cho khách hàng vừa phải giải thích cho khách hàng hiểu về bảo hiểm điện tử là gì.

Trong các công việc đó có việc gửi mã QR cho khách hàng là khâu làm mình mệt mỏi nhất vì hình ảnh mã QR gửi sang khách hàng lưu vào điện thoại nó không được nét và đẹp. Mình phải vận dụng một số kỹ năng làm web của mình để tạo ra form thiết kế mã QR riêng gửi khách. Đó cũng là việc mình yêu thích nên mình làm cực nhanh.

Bằng việc sử dụng Fabricjs để tạo file điều chỉnh được và có thể xuất PDF hoặc PNG, mình đã nghĩ ra cách dùng nó để làm trang in tem mã QR bảo hiểm điện tử cho khách hàng. Mình muốn viết ra đây để chia sẻ với các bạn cách làm một trang tạo hình ảnh đơn giản, có thể ứng dụng để tạo thiệp tết gửi cho người thân hoặc khách hàng của mình.

Đầu tiên, bạn cần tạo ra một trang html có chứa canvas và fabricjs là thư viện javascript dùng để chỉnh sửa hình ảnh. Bạn tạo file index.html như sau

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.17/fabric.min.js"></script>
</head>
<body>
<canvas id="c" width=1200 height=800></canvas>
</body>
</html>

Phần này dùng để hiển thị một canvas với kích thước 1200×800 pixels. Bây giờ mình sẽ hiệu chỉnh css để canvas có đường viền màu #333 để mình có thể preview trên nền trắng của trình duyệt

<style>
canvas {
  border: 1px solid black;
}
</style>

Đầu tiên ta khai báo canvas:

var canvas;
canvas = new fabric.Canvas('c');

Sau đó, ta sẽ tạo một hình nền nằm trong canvas này, mục đích là để tạo hình nền cho tấm thiệp. Ta có thể dùng các chương trình đồ họa để vẽ, hoặc download một hình nền nào đó trên mạng, crop lại với kích thước 1200×800. Mình chọn hình nền này (Mình sẽ chừa một khoảng trống để có thể thêm chữ vào bên trong):

Bây giờ tới lượt mình sẽ add hình nền vào canvas. Ta dùng dòng code như sau:

var img = 'hinhnen.jpg';
canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
         });

Trong đó hinhnen.jpg là file hình nền mình đã tạo, nội dung bên trog 2 dấu {} dùng để làm các lệnh khác như scale, rotate, hoặc thay đổi tọa độ của hình nền… ở đây ta không cần thay đổi gì cả nên cứ để nguyên như vậy.

Bây giờ tới lượt thêm chữ vào trên hình nền. Ta sẽ dùng dòng code như sau:

text1 = new fabric.Text("Text", {
  id: "textinput1",
  fontSize: 28,
  selectable: false,
  left: 600,
  top: 600,
  text: "Mình chúc gia đình bạn một năm mới an khang và thịnh vượng",
  textAlign:'center',
  originX: 'center', 
  originY: 'center',
  fill: '#ff9900',
  fontFamily: 'Open Sans',
});
canvas.add(text1);

Ở html mình add một khung input để sau này có thể sửa dòng chữ này

<input class="input" data-text="Mình chúc gia đình bạn một năm mới an khang và thịnh vượng" value="Mình chúc gia đình bạn một năm mới an khang và thịnh vượng" id="textinput1"/>

Như vậy bạn đã có một chiếc thiệp với nội dung chúc mừng năm mới rồi, tuy nhiên bạn cần phải chỉnh sửa được nội dung ở đoạn văn bản để có thể chỉnh sửa theo ý thích. Bạn nhâp thêm dòng code sau ở javascript. Ở đây đoạn code có nghĩa mỗi khi thay đổi các nội dung ở input thì canvas sẽ thay đổi dựa trên data-text có sẵn

$('.input').on('keyup', function() {
  id = $(this).attr('id');
  val = $(this).attr('data-text');
  newtext = $(this).val();
  input = $(this);

  objs = canvas.getObjects();
  objs.forEach(function(obj) {
    if (obj && obj.text == val) {
      obj.setText(newtext);
      input.attr("data-text", newtext);
      canvas.renderAll();
    }
  });
  });

Bây giờ mình sẽ viết một đoạn code để mình có thể upload lên hình ảnh để trang trí thêm cho tấm thiệp dễ thương hơn. Ta sẽ chèn ở html đoạn code nhỏ để upload file.

<input type="file" id="file">

Và ở javascript, mình sẽ add thêm dòng code để khi upload file lên thì canvas sẽ nhận được

document.getElementById('file').addEventListener("change", function (e) {
  var file = e.target.files[0];
  var reader = new FileReader();
  reader.onload = function (f) {
    var data = f.target.result;                    
    fabric.Image.fromURL(data, function (img) {
      var x = img.width;
      var ratio = 250/img.width;
      var oImg = img.set({left: 50, top: 100}).scale(ratio);
      canvas.add(oImg).renderAll();
      var a = canvas.setActiveObject(oImg);
      var dataURL = canvas.toDataURL({format: 'png', quality: 1.0});
    }); 
};
  reader.readAsDataURL(file);
});     

Vậy là mình cơ bản hoàn thành một ứng dụng nhỏ để thiết kế thiệp rồi.Các bạn có thể xem toàn bộ file ở đây: thiệp tết 2023

Viết hôm 10/01/2022

............

Các bài viết ngẫu nhiên khác:

Đau dạ dày xuyên lưng

Tamarind – trái me chua ở Florida

Cold brew coffee cho những ngày buồn

Lập trình thiết kế online

Lập trình tự thiết kế Thiệp Tết

Đánh giá khách sạn Landmark 81 – Vinpearl Luxury Landmark 81

New Blog cho Keequotes

Thử nghiệm plugin mới

Test Covid-19 PCR ở bệnh viện Tâm Anh


Liên hệ Liêm

✕ Đóng