File size: 4,231 Bytes
bf0bd9f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 |
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('outimg').style.display = 'none'
document.getElementById('loader').style.visibility = 'hidden'
const canvas = document.getElementById('drawing-area');
const canvasContext = canvas.getContext('2d');
const clearButton = document.getElementById('clear-button');
const saveButton = document.getElementById('save-button');
const state = {
mousedown: false
};
const baseLineWidth = 3;
const devicePixelRatio = window.devicePixelRatio || 1;
const lineWidth = baseLineWidth * devicePixelRatio*(7/9);
const strokeStyle = '#333';
canvas.addEventListener('mousedown', handleWritingStart);
canvas.addEventListener('mousemove', handleWritingInProgress);
canvas.addEventListener('mouseup', handleDrawingEnd);
canvas.addEventListener('mouseout', handleDrawingEnd);
canvas.addEventListener('touchstart', handleWritingStart);
canvas.addEventListener('touchmove', handleWritingInProgress);
canvas.addEventListener('touchend', handleDrawingEnd);
clearButton.addEventListener('click', handleClearButtonClick);
saveButton.addEventListener('click', handleSaveButtonClick);
function handleWritingStart(event) {
event.preventDefault();
state.mousedown = true;
const mousePos = getMousePositionOnCanvas(event);
canvasContext.beginPath();
canvasContext.moveTo(mousePos.x, mousePos.y);
canvasContext.lineWidth = lineWidth;
canvasContext.strokeStyle = strokeStyle;
canvasContext.shadowColor = null;
canvasContext.shadowBlur = 0;
}
function handleWritingInProgress(event) {
event.preventDefault();
if (state.mousedown) {
const mousePos = getMousePositionOnCanvas(event);
canvasContext.lineTo(mousePos.x, mousePos.y);
canvasContext.stroke();
}
}
function handleDrawingEnd(event) {
event.preventDefault();
if (state.mousedown) {
canvasContext.shadowColor = null;
canvasContext.shadowBlur = 0;
canvasContext.stroke();
}
state.mousedown = false;
}
function handleClearButtonClick(event) {
event.preventDefault();
document.getElementById('outimg').style.display = 'none'
document.getElementById('outtext').textContent = 'Your Output will be displayed here'
clearCanvas();
}
function handleSaveButtonClick(event) {
event.preventDefault();
const dataUrl = canvas.toDataURL();
sendDataToFlask(dataUrl);
}
function getMousePositionOnCanvas(event) {
const clientX = event.clientX || (event.touches && event.touches[0].clientX);
const clientY = event.clientY || (event.touches && event.touches[0].clientY);
const rect = canvas.getBoundingClientRect();
const scaleX = canvas.width / rect.width;
const scaleY = canvas.height / rect.height;
const canvasX = (clientX - rect.left) * scaleX;
const canvasY = (clientY - rect.top) * scaleY;
return { x: canvasX, y: canvasY };
}
function clearCanvas() {
canvasContext.clearRect(0, 0, canvas.width, canvas.height);
}
async function sendDataToFlask(dataUrl) {
document.getElementById('loader').style.visibility = 'visible'
const response = await fetch('/views', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ image: dataUrl })
})
const data = await response.json()
const output_image = `data:image/png;base64,${data.output_image}`
const output_string = data.output_string
if(output_string){
document.getElementById('outimg').style.display = "block"
document.getElementById('outtext').textContent = output_string
document.getElementById('outimg').src = output_image;
}
document.getElementById('loader').style.visibility = 'hidden'
}
});
|