Tao Trang web giong google Jamboard
- Get link
- X
- Other Apps
By
Jane Wilde
-
Dưới đây là một đoạn mã HTML/JavaScript hoàn chỉnh để bạn có thể đưa vào Blogspot (ví dụ qua “Layout” → “Add a Gadget” → “HTML/JavaScript”). Đoạn mã này tích hợp nhiều tính năng như Google Jamboard:
- Vẽ tự do trên canvas (hỗ trợ cả chuột và cảm ứng)
- Chọn màu vẽ
- Hỗ trợ nhiều slide (2 slide mẫu, có thể mở rộng thêm)
- Tải ảnh từ điện thoại và vẽ lên canvas
- Xóa canvas
- Chụp hình (preview ảnh từ canvas)
- Gửi ảnh lên server qua AJAX (với URL endpoint bạn tự cấu hình)
Hãy thay thế "YOUR_SERVER_URL" bằng URL server thật nếu có, hoặc bỏ qua chức năng gửi nếu bạn không có server xử lý.
html<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Jamboard Tương Tự Google Jamboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body { margin: 20px; font-family: Arial, sans-serif; }
.jamboard-container { text-align: center; }
.controls { margin-bottom: 10px; }
canvas { border: 1px solid #ccc; margin-bottom: 10px; }
.hidden { display: none; }
#preview img { max-width: 100%; margin-top: 10px; }
</style>
</head>
<body>
<div class="jamboard-container">
<!-- Điều khiển slide -->
<div class="controls">
<button id="prevSlide">← Slide Trước</button>
<span id="slideIndicator">Slide 1/2</span>
<button id="nextSlide">Slide Sau →</button>
</div>
<!-- Công cụ điều khiển -->
<div class="controls">
<input type="color" id="colorPicker" value="#000000">
<input type="file" id="uploadImage" accept="image/*">
<button id="clearCanvas">Xóa Canvas</button>
</div>
<!-- Các slide: mỗi slide là một canvas -->
<div id="canvasContainer">
<canvas id="canvas1" width="800" height="600"></canvas>
<canvas id="canvas2" width="800" height="600" class="hidden"></canvas>
</div>
<!-- Các nút chức năng chụp và gửi -->
<div class="controls">
<button id="captureButton">Chụp Hình Ảnh</button>
<button id="sendButton">Gửi Lên Server</button>
</div>
<!-- Phần xem trước ảnh đã chụp -->
<div id="preview"></div>
</div>
<script>
// Khai báo các biến toàn cục
const totalSlides = 2;
let currentSlide = 1;
const canvases = [];
const contexts = [];
// Lấy canvas và context
for (let i = 1; i <= totalSlides; i++) {
const canvas = document.getElementById('canvas' + i);
canvases.push(canvas);
contexts.push(canvas.getContext('2d'));
}
let currentContext = contexts[currentSlide - 1];
// Cập nhật chỉ số slide
function updateSlideIndicator() {
document.getElementById('slideIndicator').textContent = "Slide " + currentSlide + "/" + totalSlides;
}
updateSlideIndicator();
// Hàm chuyển slide
function switchSlide(slide) {
currentSlide = slide;
canvases.forEach((canvas, index) => {
if (index === (currentSlide - 1)) {
canvas.classList.remove('hidden');
} else {
canvas.classList.add('hidden');
}
});
currentContext = contexts[currentSlide - 1];
updateSlideIndicator();
}
document.getElementById('prevSlide').addEventListener('click', function() {
if (currentSlide > 1) switchSlide(currentSlide - 1);
});
document.getElementById('nextSlide').addEventListener('click', function() {
if (currentSlide < totalSlides) switchSlide(currentSlide + 1);
});
// Vẽ tự do: hỗ trợ chuột và cảm ứng
let drawing = false, lastX = 0, lastY = 0;
const colorPicker = document.getElementById('colorPicker');
function startDrawing(x, y) {
drawing = true;
lastX = x;
lastY = y;
}
function draw(x, y) {
if (!drawing) return;
currentContext.strokeStyle = colorPicker.value;
currentContext.lineWidth = 2;
currentContext.beginPath();
currentContext.moveTo(lastX, lastY);
currentContext.lineTo(x, y);
currentContext.stroke();
lastX = x;
lastY = y;
}
function stopDrawing() {
drawing = false;
}
// Sự kiện chuột
canvases.forEach(canvas => {
canvas.addEventListener('mousedown', function(e) {
const rect = canvas.getBoundingClientRect();
startDrawing(e.clientX - rect.left, e.clientY - rect.top);
});
canvas.addEventListener('mousemove', function(e) {
const rect = canvas.getBoundingClientRect();
draw(e.clientX - rect.left, e.clientY - rect.top);
});
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mouseout', stopDrawing);
});
// Sự kiện cảm ứng (touch)
canvases.forEach(canvas => {
canvas.addEventListener('touchstart', function(e) {
e.preventDefault();
const rect = canvas.getBoundingClientRect();
const touch = e.touches[0];
startDrawing(touch.clientX - rect.left, touch.clientY - rect.top);
});
canvas.addEventListener('touchmove', function(e) {
e.preventDefault();
const rect = canvas.getBoundingClientRect();
const touch = e.touches[0];
draw(touch.clientX - rect.left, touch.clientY - rect.top);
});
canvas.addEventListener('touchend', function(e) {
e.preventDefault();
stopDrawing();
});
});
// Tải ảnh từ điện thoại và vẽ lên canvas hiện tại
document.getElementById('uploadImage').addEventListener('change', function(e) {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = function(event) {
const img = new Image();
img.onload = function() {
currentContext.clearRect(0, 0, canvases[currentSlide - 1].width, canvases[currentSlide - 1].height);
currentContext.drawImage(img, 0, 0, canvases[currentSlide - 1].width, canvases[currentSlide - 1].height);
}
img.src = event.target.result;
}
reader.readAsDataURL(file);
});
// Nút Xóa canvas hiện tại
document.getElementById('clearCanvas').addEventListener('click', function() {
currentContext.clearRect(0, 0, canvases[currentSlide - 1].width, canvases[currentSlide - 1].height);
});
// Nút Chụp Hình: Hiển thị preview ảnh của canvas hiện tại
document.getElementById('captureButton').addEventListener('click', function() {
const imageData = canvases[currentSlide - 1].toDataURL("image/png");
const imgPreview = document.createElement('img');
imgPreview.src = imageData;
document.getElementById('preview').innerHTML = "";
document.getElementById('preview').appendChild(imgPreview);
});
// Nút Gửi ảnh lên server qua AJAX
document.getElementById('sendButton').addEventListener('click', function() {
const imageData = canvases[currentSlide - 1].toDataURL("image/png");
// Thay YOUR_SERVER_URL bằng URL endpoint của bạn nếu có server xử lý
const serverUrl = "YOUR_SERVER_URL";
const xhr = new XMLHttpRequest();
xhr.open("POST", serverUrl, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
alert("Hình ảnh đã được gửi thành công!");
} else {
alert("Lỗi khi gửi ảnh: " + xhr.status);
}
}
};
xhr.send("image=" + encodeURIComponent(imageData));
});
</script>
</body>
</html>
Hướng dẫn sử dụng trên Blogspot:
- Vào trang quản trị Blogspot và chọn “Layout”.
- Thêm Gadget HTML/JavaScript và dán toàn bộ mã trên vào hộp nội dung.
- Lưu lại và kiểm tra giao diện trên blog (trên desktop và điện thoại).
Đoạn mã này cung cấp trải nghiệm tương tự Google Jamboard với nhiều slide, công cụ chọn màu, khả năng vẽ tự do, tải ảnh từ thiết bị, chụp ảnh preview và gửi ảnh (với cấu hình server nếu cần). Bạn có thể tùy chỉnh CSS, kích thước canvas hay số lượng slide theo nhu cầu của mình.
- Get link
- X
- Other Apps
Comments
Post a Comment