113 lines
3.7 KiB
HTML
113 lines
3.7 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% block content %}
|
|
<div class="container mt-5">
|
|
<h1 class="text-center">Cipher Shield Graphics</h1>
|
|
<p class="text-center">Your personal graphics designing software</p>
|
|
|
|
<div class="row mt-5">
|
|
<div class="col-md-3">
|
|
<h4>Tools</h4>
|
|
<hr>
|
|
<button id="add-rect" class="btn btn-primary btn-block">Add Rectangle</button>
|
|
<button id="add-text" class="btn btn-secondary btn-block mt-2">Add Text</button>
|
|
<hr>
|
|
<label for="image-upload">Upload Image:</label>
|
|
<input type="file" id="image-upload" class="form-control-file">
|
|
<hr>
|
|
<label for="color-picker">Color:</label>
|
|
<input type="color" id="color-picker" class="form-control">
|
|
<hr>
|
|
<button id="bring-to-front" class="btn btn-info btn-block mt-2">Bring to Front</button>
|
|
<button id="send-to-back" class="btn btn-info btn-block mt-2">Send to Back</button>
|
|
<hr>
|
|
<button id="delete-object" class="btn btn-danger btn-block mt-2">Delete Selected</button>
|
|
<hr>
|
|
<button id="download" class="btn btn-success btn-block mt-2">Download as Image</button>
|
|
|
|
</div>
|
|
<div class="col-md-9">
|
|
<canvas id="canvas" width="800" height="600" style="border: 1px solid #ccc;"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>
|
|
<script>
|
|
const canvas = new fabric.Canvas('canvas');
|
|
|
|
document.getElementById('add-rect').addEventListener('click', () => {
|
|
const rect = new fabric.Rect({
|
|
left: 100,
|
|
top: 100,
|
|
fill: 'red',
|
|
width: 200,
|
|
height: 100
|
|
});
|
|
canvas.add(rect);
|
|
});
|
|
|
|
document.getElementById('add-text').addEventListener('click', () => {
|
|
const text = new fabric.IText('Hello, world!', {
|
|
left: 100,
|
|
top: 100
|
|
});
|
|
canvas.add(text);
|
|
});
|
|
|
|
document.getElementById('image-upload').addEventListener('change', (e) => {
|
|
const file = e.target.files[0];
|
|
const reader = new FileReader();
|
|
reader.onload = (f) => {
|
|
fabric.Image.fromURL(f.target.result, (img) => {
|
|
canvas.add(img);
|
|
});
|
|
};
|
|
reader.readAsDataURL(file);
|
|
});
|
|
|
|
document.getElementById('color-picker').addEventListener('change', (e) => {
|
|
const activeObject = canvas.getActiveObject();
|
|
if (activeObject) {
|
|
activeObject.set('fill', e.target.value);
|
|
canvas.renderAll();
|
|
}
|
|
});
|
|
|
|
document.getElementById('delete-object').addEventListener('click', () => {
|
|
const activeObject = canvas.getActiveObject();
|
|
if (activeObject) {
|
|
canvas.remove(activeObject);
|
|
}
|
|
});
|
|
|
|
document.getElementById('bring-to-front').addEventListener('click', () => {
|
|
const activeObject = canvas.getActiveObject();
|
|
if (activeObject) {
|
|
canvas.bringToFront(activeObject);
|
|
}
|
|
});
|
|
|
|
document.getElementById('send-to-back').addEventListener('click', () => {
|
|
const activeObject = canvas.getActiveObject();
|
|
if (activeObject) {
|
|
canvas.sendToBack(activeObject);
|
|
}
|
|
});
|
|
|
|
document.getElementById('download').addEventListener('click', () => {
|
|
const dataURL = canvas.toDataURL({
|
|
format: 'png',
|
|
quality: 1
|
|
});
|
|
const link = document.createElement('a');
|
|
link.href = dataURL;
|
|
link.download = 'cipher-shield-graphic.png';
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
});
|
|
|
|
</script>
|
|
{% endblock %}
|