142 lines
3.9 KiB
JavaScript
142 lines
3.9 KiB
JavaScript
var mousePressed = false;
|
|
var lastX, lastY;
|
|
var canvas;
|
|
var ctx;
|
|
var dashctx;
|
|
var selectedOption;
|
|
var color;
|
|
var line;
|
|
|
|
$(document).ready(function() {
|
|
function updateSelectedOption() {
|
|
selectedOption = $("input:radio[name=option]:checked").val();
|
|
color = (selectedOption === 'brush') ? '#FFF' : '#000';
|
|
line = (selectedOption === 'brush') ? 5 : 20; // Lebar garis
|
|
}
|
|
updateSelectedOption();
|
|
|
|
$('input[type=radio][name=option]').change(function() {
|
|
updateSelectedOption();
|
|
});
|
|
});
|
|
|
|
$(function () {
|
|
InitThis();
|
|
})
|
|
|
|
function InitThis() {
|
|
canvas = document.getElementById("myCanvas");
|
|
canvas.style.cursor = "crosshair";
|
|
ctx = canvas.getContext("2d"); // kuas
|
|
dashctx = canvas.getContext("2d"); //garis kotak
|
|
ctx.fillStyle = '#000000';
|
|
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
|
|
|
|
$('#myCanvas').mousedown(function (e) {
|
|
mousePressed = true;
|
|
Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, false);
|
|
});
|
|
|
|
$('#myCanvas').mousemove(function (e) {
|
|
if (mousePressed) {
|
|
Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, true);
|
|
}
|
|
});
|
|
|
|
$('#myCanvas').mouseup(function (e) {
|
|
mousePressed = false;
|
|
});
|
|
$('#myCanvas').mouseleave(function (e) {
|
|
mousePressed = false;
|
|
});
|
|
}
|
|
|
|
function Draw(x, y, isDown) {
|
|
if (isDown) {
|
|
ctx.setLineDash([0, 0]);
|
|
ctx.beginPath();
|
|
ctx.strokeStyle = color;
|
|
ctx.lineWidth = line;
|
|
ctx.lineJoin = "round";
|
|
ctx.moveTo(lastX, lastY);
|
|
ctx.lineTo(x, y);
|
|
ctx.closePath();
|
|
ctx.stroke();
|
|
}
|
|
lastX = x; lastY = y;
|
|
}
|
|
|
|
$(document).ready(function() {
|
|
function dash(){
|
|
dashctx.setLineDash([5, 5]);
|
|
dashctx.lineWidth = 1;
|
|
dashctx.strokeStyle = 'red';
|
|
dashctx.strokeRect(200, 93, 230, 210);
|
|
}
|
|
dash();
|
|
|
|
$('#deleteButton').on('click', function () {
|
|
clearArea();
|
|
dash();
|
|
});
|
|
});
|
|
|
|
function clearArea() {
|
|
ctx.setTransform(1, 0, 0, 1, 0, 0);
|
|
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
|
|
ctx.fillStyle = '#000000';
|
|
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
|
|
}
|
|
|
|
// Fungsi untuk hide box resized image
|
|
var resizedImage = document.getElementById('resizedbox');
|
|
var predictedClass = document.getElementById('predictedClass');
|
|
|
|
function toggleImageVisibility() {
|
|
if (predictedClass.textContent.trim() === "") {
|
|
resizedImage.style.display = 'none';
|
|
} else {
|
|
resizedImage.style.display = 'block';
|
|
}
|
|
}
|
|
predictedClass.addEventListener('DOMSubtreeModified', toggleImageVisibility);
|
|
toggleImageVisibility();
|
|
|
|
// -----------------------------------------------------------------------------------------------
|
|
// ----------------------------------------PROCESSING---------------------------------------------
|
|
|
|
var processAndSaveButton = document.getElementById("processAndSaveButton");
|
|
processAndSaveButton.addEventListener("click", function() {
|
|
var imageDataURL = canvas.toDataURL();
|
|
fetch('/process_image', {
|
|
method: 'POST',
|
|
body: JSON.stringify({ image_data: imageDataURL }),
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
}
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
|
|
var resizedImage = document.getElementById('resizedImage');
|
|
var predictedClassElement = document.getElementById('predictedClass');
|
|
|
|
// Ambil data URI gambar dari respons JSON
|
|
var resizedDataURI = data.resized_data_uri;
|
|
var predictedClass = data.predicted_class;
|
|
var text = data.res;
|
|
|
|
// Setel atribut src dari elemen gambar
|
|
resizedImage.src = resizedDataURI;
|
|
|
|
if(text){
|
|
predictedClassElement.textContent = text;
|
|
}else{
|
|
predictedClassElement.textContent = predictedClass;
|
|
}
|
|
});
|
|
});
|
|
|
|
// ----------------------------------------PROCESSING---------------------------------------------
|
|
// -----------------------------------------------------------------------------------------------
|